Repository: obsidian-tasks-group/obsidian-tasks
Pull request #2812 (2024-05-07 18:31:04)

refactor: finalise CSS split in `EditTask.scss
# Description

- Introduce specific CSS classes where needed
- Rename CSS classes
- Remove unneeded references to CSS classes
- Merge classes with same parents

We are now ready to extract components - we have enough separation between the classes

## Motivation and Context

Make extraction of components from `EditTask.svelte` & `EditTask.scss` easy.

## How has this been tested?

Manual tests in demo vault.

## Types of changes

Internal changes:

- [x] **Refactor** (prefix: `refactor` - non-breaking change which only improves the design or structure of existing code, and making no changes to its external behaviour)

## Checklist

- [x] My code follows the code style of this project and passes `yarn run lint`.
- [ ] My change has adequate [Unit Test coverage](https://publish.obsidian.md/tasks-contributing/Testing/About+Testing).
  - CSS code is not tested

## Terms

<!--
By submitting this pull request, you must agree to follow our
[contributing guide](https://publish.obsidian.md/tasks-contributing) and
[Code of Conduct](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CODE_OF_CONDUCT.md).
Put an x in the boxes to confirm you agree.
-->

- [x] My contribution follows this project's [contributing guide](https://publish.obsidian.md/tasks-contributing)
- [x] I agree to follow this project's [Code of Conduct](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/CODE_OF_CONDUCT.md)


claremacrae: @ilandikov This has conflicts with the earlier #2812 ... over to you to resolve them 😃 

Patch:
diff --git a/src/ui/DateEditor.svelte b/src/ui/DateEditor.svelte
index 163fad13..8625e04e 100644
--- a/src/ui/DateEditor.svelte
+++ b/src/ui/DateEditor.svelte
@@ -26,11 +26,11 @@
     {id}
     type="text"
     class:tasks-modal-error={!isDateValid}
-    class="input"
+    class="tasks-modal-date-input"
     placeholder={datePlaceholder}
     {accesskey}
 />
-<code class="results">{dateSymbol} {@html parsedDate}</code>
+<code class="tasks-modal-parsed-date">{dateSymbol} {@html parsedDate}</code>
 
 <style>
 </style>
diff --git a/src/ui/Dependency.svelte b/src/ui/Dependency.svelte
index d69ddaad..89314fd4 100644
--- a/src/ui/Dependency.svelte
+++ b/src/ui/Dependency.svelte
@@ -142,7 +142,7 @@
 </script>
 
 <!-- svelte-ignore a11y-accesskey -->
-<span class="input" bind:clientWidth={inputWidth}>
+<span bind:clientWidth={inputWidth}>
     <input
         bind:this={input}
         bind:value={search}
@@ -151,7 +151,7 @@
         on:blur={() => (inputFocused = false)}
         accesskey={accesskey(accesskeyLetter)}
         id={type}
-        class="input"
+        class="tasks-modal-dependency-input"
         type="text"
         {placeholder}
     />
diff --git a/src/ui/EditTask.scss b/src/ui/EditTask.scss
index 08f1a14e..fdeb81d7 100644
--- a/src/ui/EditTask.scss
+++ b/src/ui/EditTask.scss
@@ -80,11 +80,11 @@
         grid-column: 1;
     }
 
-    .input[type=text] {
+    .tasks-modal-date-input {
         min-width: 15em;
     }
 
-    .results {
+    .tasks-modal-parsed-date {
         grid-column: 3;
         font-size: var(--font-ui-small);
     }
@@ -93,13 +93,13 @@
         grid-column-start: 1;
         grid-column-end: 3;
 
-        input[type="checkbox"] {
+        input {
             margin-left: 0.67em;
             top: 2px;
         }
     }
 
-    select {
+    .tasks-modal-status-selector {
         grid-column: 2;
         width: 15em;
     }
@@ -112,7 +112,7 @@
     row-gap: 5px;
     align-items: center;
 
-    input[type="text"] {
+    .tasks-modal-dependency-input {
         grid-column: 2;
         width: 100%;
     }
@@ -141,10 +141,10 @@
 @media (max-width: 649px) {
     .tasks-modal-priority-section {
         grid-template-columns: 6em auto auto;
-    }
 
-    .tasks-modal-priority-section > label {
-        grid-row: 1 / span 3;
+        > label {
+            grid-row: 1 / span 3;
+        }
     }
 }
 
@@ -157,15 +157,15 @@
         grid-template-columns: 1fr;
         grid-auto-columns: auto;
 
-        .input {
+        .tasks-modal-date-input {
             grid-column: 1;
         }
 
-        .results {
+        .tasks-modal-parsed-date {
             grid-column: 2;
         }
 
-        select {
+        .tasks-modal-status-selector {
             grid-column: 1;
         }
     }
@@ -183,22 +183,22 @@
 
 @media (max-width: 399px) {
     .tasks-modal-dates-section {
-        select {
+        .tasks-modal-status-selector {
             grid-column: 1;
             width: auto;
         }
-    }
 
-    .tasks-modal-dates-section > .results {
-        grid-column: 1;
+        > .tasks-modal-parsed-date {
+            grid-column: 1;
+        }
     }
 
     .tasks-modal-priority-section {
         grid-template-columns: 4em auto;
-    }
 
-    .tasks-modal-priority-section > label {
-        grid-row: 1 / span 6;
+        > label {
+            grid-row: 1 / span 6;
+        }
     }
 
     .tasks-modal-dependencies-section {
@@ -210,9 +210,9 @@
 @media (max-width: 259px) {
     .tasks-modal-priority-section {
         grid-template-columns: 1fr;
-    }
 
-    .tasks-modal-priority-section > label {
-        grid-row: 1;
+        > label {
+            grid-row: 1;
+        }
     }
 }
diff --git a/src/ui/EditTask.svelte b/src/ui/EditTask.svelte
index 9a2eb563..f3c52e0c 100644
--- a/src/ui/EditTask.svelte
+++ b/src/ui/EditTask.svelte
@@ -484,11 +484,11 @@ Availability of access keys:
             id="recurrence"
             type="text"
             class:tasks-modal-error={!isRecurrenceValid}
-            class="input"
+            class="tasks-modal-date-input"
             placeholder="Try 'every day when done'"
             accesskey={accesskey('r')}
         />
-        <code class="results">{recurrenceSymbol} {@html parsedRecurrence}</code>
+        <code class="tasks-modal-parsed-date">{recurrenceSymbol} {@html parsedRecurrence}</code>
         <!-- --------------------------------------------------------------------------- -->
         <!--  Due Date  -->
         <!-- --------------------------------------------------------------------------- -->
@@ -541,7 +541,7 @@ Availability of access keys:
                 bind:checked={editableTask.forwardOnly}
                 id="forwardOnly"
                 type="checkbox"
-                class="input task-list-item-checkbox tasks-modal-checkbox"
+                class="task-list-item-checkbox tasks-modal-checkbox"
                 accesskey={accesskey('f')}
             />
         </div>
@@ -598,7 +598,7 @@ Availability of access keys:
             bind:value={statusSymbol}
             on:change={_onStatusChange}
             id="status-type"
-            class="dropdown"
+            class="tasks-modal-status-selector"
             accesskey={accesskey('u')}
         >
             {#each statusOptions as status}


Test patch:
diff --git a/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot.approved.html b/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot.approved.html
index 6f2da9e4..a564fb67 100644
--- a/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot.approved.html
+++ b/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot.approved.html
@@ -71,20 +71,35 @@
     <hr />
     <section class="tasks-modal-dates-section">
       <label for="recurrence" class="accesskey-first">Recurs</label>
-      <input id="recurrence" type="text" class="input" placeholder="Try 'every day when done'" accesskey="r" />
-      <code class="results">
+      <input
+        id="recurrence"
+        type="text"
+        class="tasks-modal-date-input"
+        placeholder="Try 'every day when done'"
+        accesskey="r" />
+      <code class="tasks-modal-parsed-date">
         🔁
         <i>not recurring</i>
       </code>
       <label for="due" class="accesskey-first">Due</label>
-      <input id="due" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="d" />
-      <code class="results">
+      <input
+        id="due"
+        type="text"
+        class="tasks-modal-date-input"
+        placeholder="Try 'Mon' or 'tm' then space"
+        accesskey="d" />
+      <code class="tasks-modal-parsed-date">
         📅
         <i>no due date</i>
       </code>
       <label for="scheduled" class="accesskey-first">Scheduled</label>
-      <input id="scheduled" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="s" />
-      <code class="results">
+      <input
+        id="scheduled"
+        type="text"
+        class="tasks-modal-date-input"
+        placeholder="Try 'Mon' or 'tm' then space"
+        accesskey="s" />
+      <code class="tasks-modal-parsed-date">
         ⏳
         <i>no scheduled date</i>
       </code>
@@ -93,8 +108,13 @@
         <span class="accesskey">a</span>
         rt
       </label>
-      <input id="start" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="a" />
-      <code class="results">
+      <input
+        id="start"
+        type="text"
+        class="tasks-modal-date-input"
+        placeholder="Try 'Mon' or 'tm' then space"
+        accesskey="a" />
+      <code class="tasks-modal-parsed-date">
         🛫
         <i>no start date</i>
       </code>
@@ -104,21 +124,17 @@
           <span class="accesskey-first">future</span>
           dates:
         </label>
-        <input
-          id="forwardOnly"
-          type="checkbox"
-          class="input task-list-item-checkbox tasks-modal-checkbox"
-          accesskey="f" />
+        <input id="forwardOnly" type="checkbox" class="task-list-item-checkbox tasks-modal-checkbox" accesskey="f" />
       </div>
     </section>
     <hr />
     <section class="tasks-modal-dependencies-section">
       <label for="blockedBy" class="accesskey-first">Before this</label>
-      <span class="input">
+      <span>
         <input
           accesskey="b"
           id="blockedBy"
-          class="input"
+          class="tasks-modal-dependency-input"
           type="text"
           placeholder="Search for tasks that the task being edited depends on..." />
         <iframe
@@ -144,11 +160,11 @@
         <span class="accesskey">e</span>
         r this
       </label>
-      <span class="input">
+      <span>
         <input
           accesskey="e"
           id="blocking"
-          class="input"
+          class="tasks-modal-dependency-input"
           type="text"
           placeholder="Search for tasks that depend on this task being done..." />
         <iframe
@@ -177,15 +193,20 @@
         <span class="accesskey">u</span>
         s
       </label>
-      <select id="status-type" class="dropdown" accesskey="u">
+      <select id="status-type" class="tasks-modal-status-selector" accesskey="u">
         <option value=" ">Todo [ ]</option>
         <option value="/">In Progress [/]</option>
         <option value="x">Done [x]</option>
         <option value="-">Cancelled [-]</option>
       </select>
       <label for="created" class="accesskey-first">Created</label>
-      <input id="created" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="c" />
-      <code class="results">
+      <input
+        id="created"
+        type="text"
+        class="tasks-modal-date-input"
+        placeholder="Try 'Mon' or 'tm' then space"
+        accesskey="c" />
+      <code class="tasks-modal-parsed-date">
         ➕
         <i>no created date</i>
       </code>
@@ -194,8 +215,13 @@
         <span class="accesskey">x</span>
         )
       </label>
-      <input id="done" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="x" />
-      <code class="results">
+      <input
+        id="done"
+        type="text"
+        class="tasks-modal-date-input"
+        placeholder="Try 'Mon' or 'tm' then space"
+        accesskey="x" />
+      <code class="tasks-modal-parsed-date">
         ✅
         <i>no done date</i>
       </code>
@@ -204,8 +230,13 @@
         <span class="accesskey">-</span>
         )
       </label>
-      <input id="cancelled" type="text" class="input" placeholder="Try 'Mon' or 'tm' then space" accesskey="-" />
-      <code class="results">
+      <input
+        id="cancelled"
+        type="text"
+        class="tasks-modal-date-input"
+        placeholder="Try 'Mon' or 'tm' then space"
+        accesskey="-" />
+      <code class="tasks-modal-parsed-date">
         ❌
         <i>no cancelled date</i>
       </code>