Repository: obsidian-tasks-group/obsidian-tasks
Pull request #3058 (2024-09-01 07:42:56)

fix: Improve Edit Task modal calendar 'button' layout
# Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->

Changes visible to users:

- [x] **Bug fix** (prefix: `fix` - non-breaking change which fixes an issue)
    - Improves the appearance of an unreleased feature

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)

## Description

In testing the date picker in the Edit Task modal on my phone, I realised I hadn't implemented adjusting of the layout for smaller screen sizes, so this fixes that.

It also makes the icon a slightly more muted colour, and tidies up the code a little.

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->

## How has this been tested?

Exploratory testing, with videos made for comparison.

Only on desktop so far.

## Screenshots (if appropriate)



https://github.com/user-attachments/assets/d6bb38bc-46f2-4ac9-9a69-8e4520a56eb4



## Checklist

<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->

- [x] My code follows the code style of this project and passes `yarn run lint`.
- [x] My change requires a change to the documentation.
- [ ] I have [updated the documentation](https://publish.obsidian.md/tasks-contributing/Documentation/About+Documentation) accordingly.
- [ ] My change has adequate [Unit Test coverage](https://publish.obsidian.md/tasks-contributing/Testing/About+Testing).

## 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)



Patch:
diff --git a/src/ui/DateEditor.svelte b/src/ui/DateEditor.svelte
index f4e1aa90..a049d74b 100644
--- a/src/ui/DateEditor.svelte
+++ b/src/ui/DateEditor.svelte
@@ -28,11 +28,11 @@
     // 'weekend' abbreviation omitted due to lack of space.
     const datePlaceholder = "Try 'Mon' or 'tm' then space";
 
-    // Function to open the date-picker and update the date
-    // TODO Reduce its complexity.
-    // TODO Can a function be extracted?
-    // TODO Can the function be moved out?
-    // TODO Can we re-use this in the pre-existing date picker function?
+    /**
+     * A calendar date picker which is not tied to any particular date field.
+     *
+     * See also {@link promptForDate}
+     */
     function openDatePicker() {
         if (inputElement) {
             if (flatpickrInstance) {
@@ -49,12 +49,8 @@
                     dispatch('close', { instance: flatpickrInstance }); // Notify parent about close
 
                     if (selectedDates.length > 0) {
-                        // TODO can this be simplified?
                         const selectedDate = selectedDates[0];
-                        const year = selectedDate.getFullYear();
-                        const month = String(selectedDate.getMonth() + 1).padStart(2, '0');
-                        const day = String(selectedDate.getDate()).padStart(2, '0');
-                        date = `${year}-${month}-${day}`;
+                        date = window.moment(selectedDate).format('YYYY-MM-DD');
                     }
 
                     flatpickrInstance.destroy(); // Destroy the instance after the date is selected
@@ -64,11 +60,18 @@
                 defaultDate: undefined, // Explicitly define defaultDate with undefined
             };
 
-            // Determine if `parsedDate` should be used as the default date
-            // TODO Remove repetition of regex here - do we have a helper function for this already?
-            if (parsedDate.match(/^\d{4}-\d{2}-\d{2}$/)) {
+            // We don't use parseDate() here as we want to strictly only match exact dates,
+            // and not words like 'today' or 'tomorrow', to make sure we really
+            // are using the already-parsed date in the Modal UI:
+            const dateMatcher = /^\d{4}-\d{2}-\d{2}$/;
+            if (parsedDate.match(dateMatcher)) {
+                // This is where the user had typed, for example, 'tomorrow' in the input
+                // field, and chrono has converted that to an exact date.
                 options.defaultDate = new Date(parsedDate);
-            } else if (date.match(/^\d{4}-\d{2}-\d{2}$/)) {
+            } else if (date.match(dateMatcher)) {
+                // This is a precaution, for the unlikely event that the input field
+                // contains a parsed date, but the parsedDate does not.
+                // It's possible that it is unreachable, but we would need tests to confirm that.
                 options.defaultDate = new Date(date);
             }
 
@@ -94,15 +97,12 @@
 />
 
 <!-- Separate the calendar icon from the input to allow typing in the input box -->
-<!-- TODO Suppress or fix the ally warning-->
+<!-- TODO Fix the accessibility warning, ideally by converting this to a proper button -->
 <!-- TODO Nicer looking icon, or at least make it a paler shade -->
 <svg
-    class="calendar-icon"
+    class="tasks-modal-calendar-icon"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
-    fill="currentColor"
-    width="24px"
-    height="24px"
     on:click={openDatePicker}
     style="cursor: pointer;"
 >
diff --git a/src/ui/EditTask.scss b/src/ui/EditTask.scss
index 19d258f7..e5e75951 100644
--- a/src/ui/EditTask.scss
+++ b/src/ui/EditTask.scss
@@ -77,9 +77,17 @@
     }
 
     .tasks-modal-date-input {
+        grid-column: 2;
         min-width: 15em;
     }
 
+    .tasks-modal-calendar-icon {
+        grid-column: 3;
+        width: 24px;
+        height: 24px;
+        fill: var(--text-muted);
+    }
+
     .tasks-modal-parsed-date {
         grid-column: 4;
         font-size: var(--font-ui-small);
@@ -87,7 +95,7 @@
 
     .future-dates-only {
         grid-column-start: 1;
-        grid-column-end: 3;
+        grid-column-end: 4;
 
         input {
             margin-left: 0.67em;
@@ -143,7 +151,7 @@
     }
 }
 
-@media (max-width: 499px) {
+@media (max-width: 529px) {
     .tasks-modal-priority-section {
         grid-template-columns: 4em auto auto;
     }
@@ -156,10 +164,14 @@
             grid-column: 1;
         }
 
-        .tasks-modal-parsed-date {
+        .tasks-modal-calendar-icon {
             grid-column: 2;
         }
 
+        .tasks-modal-parsed-date {
+            grid-column: 3;
+        }
+
         .status-editor-status-selector {
             grid-column: 1;
         }
@@ -182,6 +194,10 @@
             grid-column: 1;
         }
 
+        .tasks-modal-calendar-icon {
+            grid-column: 1;
+        }
+
         > .tasks-modal-parsed-date {
             grid-column: 1;
         }
diff --git a/src/ui/Menus/DatePicker.ts b/src/ui/Menus/DatePicker.ts
index baf02b84..dd383339 100644
--- a/src/ui/Menus/DatePicker.ts
+++ b/src/ui/Menus/DatePicker.ts
@@ -3,6 +3,16 @@ import type { Task } from '../../Task/Task';
 import { SetTaskDate } from '../EditInstructions/DateInstructions';
 import type { AllTaskDateFields } from '../../DateTime/DateFieldTypes';
 
+/**
+ * A calendar date picker which edits a date value in a {@link Task} object.
+ * See also {@link openDatePicker}
+ * @param parentElement
+ * @param task
+ * @param dateFieldToEdit
+ * @param taskSaver
+ *
+ * See also {@link openDatePicker}
+ */
 export function promptForDate(
     parentElement: HTMLElement,
     task: Task,


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 71eae2ef..dc0df6cd 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
@@ -95,12 +95,9 @@
         placeholder="Try 'Mon' or 'tm' then space"
         accesskey="d" />
       <svg
-        class="calendar-icon"
+        class="tasks-modal-calendar-icon"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        fill="currentColor"
-        width="24px"
-        height="24px"
         style="cursor: pointer">
         <path
           d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"></path>
@@ -120,12 +117,9 @@
         placeholder="Try 'Mon' or 'tm' then space"
         accesskey="s" />
       <svg
-        class="calendar-icon"
+        class="tasks-modal-calendar-icon"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        fill="currentColor"
-        width="24px"
-        height="24px"
         style="cursor: pointer">
         <path
           d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"></path>
@@ -146,12 +140,9 @@
         placeholder="Try 'Mon' or 'tm' then space"
         accesskey="a" />
       <svg
-        class="calendar-icon"
+        class="tasks-modal-calendar-icon"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        fill="currentColor"
-        width="24px"
-        height="24px"
         style="cursor: pointer">
         <path
           d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"></path>
@@ -255,12 +246,9 @@
         placeholder="Try 'Mon' or 'tm' then space"
         accesskey="c" />
       <svg
-        class="calendar-icon"
+        class="tasks-modal-calendar-icon"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        fill="currentColor"
-        width="24px"
-        height="24px"
         style="cursor: pointer">
         <path
           d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"></path>
@@ -281,12 +269,9 @@
         placeholder="Try 'Mon' or 'tm' then space"
         accesskey="x" />
       <svg
-        class="calendar-icon"
+        class="tasks-modal-calendar-icon"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        fill="currentColor"
-        width="24px"
-        height="24px"
         style="cursor: pointer">
         <path
           d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"></path>
@@ -307,12 +292,9 @@
         placeholder="Try 'Mon' or 'tm' then space"
         accesskey="-" />
       <svg
-        class="calendar-icon"
+        class="tasks-modal-calendar-icon"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        fill="currentColor"
-        width="24px"
-        height="24px"
         style="cursor: pointer">
         <path
           d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"></path>
diff --git a/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot_-_without_access_keys.approved.html b/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot_-_without_access_keys.approved.html
index adbc103c..bc199a2e 100644
--- a/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot_-_without_access_keys.approved.html
+++ b/tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot_-_without_access_keys.approved.html
@@ -57,12 +57,9 @@
       <label for="due">Due</label>
       <input id="due" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
       <svg
-        class="calendar-icon"
+        class="tasks-modal-calendar-icon"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        fill="currentColor"
-        width="24px"
-        height="24px"
         style="cursor: pointer">
         <path
           d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"></path>
@@ -74,12 +71,9 @@
       <label for="scheduled">Scheduled</label>
       <input id="scheduled" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
       <svg
-        class="calendar-icon"
+        class="tasks-modal-calendar-icon"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        fill="currentColor"
-        width="24px"
-        height="24px"
         style="cursor: pointer">
         <path
           d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"></path>
@@ -91,12 +85,9 @@
       <label for="start">Start</label>
       <input id="start" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
       <svg
-        class="calendar-icon"
+        class="tasks-modal-calendar-icon"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        fill="currentColor"
-        width="24px"
-        height="24px"
         style="cursor: pointer">
         <path
           d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"></path>
@@ -175,12 +166,9 @@
       <label for="created">Created</label>
       <input id="created" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
       <svg
-        class="calendar-icon"
+        class="tasks-modal-calendar-icon"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        fill="currentColor"
-        width="24px"
-        height="24px"
         style="cursor: pointer">
         <path
           d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"></path>
@@ -192,12 +180,9 @@
       <label for="done">Done</label>
       <input id="done" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
       <svg
-        class="calendar-icon"
+        class="tasks-modal-calendar-icon"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        fill="currentColor"
-        width="24px"
-        height="24px"
         style="cursor: pointer">
         <path
           d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"></path>
@@ -209,12 +194,9 @@
       <label for="cancelled">Cancelled</label>
       <input id="cancelled" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
       <svg
-        class="calendar-icon"
+        class="tasks-modal-calendar-icon"
         xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 24 24"
-        fill="currentColor"
-        width="24px"
-        height="24px"
         style="cursor: pointer">
         <path
           d="M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V9h14v11zM7 11h5v5H7z"></path>