Merge pull request obsidian-tasks-group#3059 from obsidian-tasks-grou…

…p/more-date-picker-fixes fix: Improve Edit Task modal calendar button behaviour
ilandikov · Sep 1, 2024 · b663a42 · b663a42
2 parents e9a94c1 + 6d97202
commit b663a42
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 153 deletions.
diff --git a/src/Obsidian/TaskModal.ts b/src/Obsidian/TaskModal.ts
@@ -33,6 +33,13 @@ export class TaskModal extends Modal implements IFlatpickrUser {
  this.task = task;
  this.allTasks = allTasks;
  this.onSubmit = (updatedTasks: Task[]) => {
+ if (this.activeFlatpickrInstance) {
+ // Ignore onSubmit if the date-picker is open:
+ // For some unknown reason, making the date-picker lunched from a Button
+ // caused the modal to be automatically submitted before the user had
+ // even seen the date picker.
+ return;
+ }
  updatedTasks.length && onSubmit(updatedTasks);
  this.close();
  };

diff --git a/src/Renderer/TaskLineRenderer.ts b/src/Renderer/TaskLineRenderer.ts
@@ -219,7 +219,7 @@ export class TaskLineRenderer {
  span.addEventListener('click', (ev: MouseEvent) => {
  ev.preventDefault(); // suppress the default click behavior
  ev.stopPropagation(); // suppress further event propagation
- promptForDate(li, task, componentDateField, defaultTaskSaver);
+ promptForDate(span, task, componentDateField, defaultTaskSaver);
  });
 
  span.addEventListener('contextmenu', (ev: MouseEvent) => {

diff --git a/src/ui/DateEditor.svelte b/src/ui/DateEditor.svelte
@@ -2,6 +2,8 @@
  import flatpickr from 'flatpickr';
  import { createEventDispatcher } from 'svelte';
 
+ import { setIcon } from 'obsidian';
+
  import { doAutocomplete } from '../DateTime/DateAbbreviations';
  import { parseTypedDateForDisplayUsingFutureDate } from '../DateTime/DateTools';
  import { labelContentWithAccessKey } from './EditTaskHelpers';
@@ -19,6 +21,12 @@
 
  const dispatch = createEventDispatcher();
 
+ const iconCalendarDays = (node: HTMLElement) => {
+ // For a more general implementation, see:
+ // https://github.com/joethei/obsidian-rss/blob/b600e2ead2505d58aa3e4c7898795bbf58fa3cdc/src/view/IconComponent.svelte
+ setIcon(node, 'calendar-days');
+ };
+
  $: {
  date = doAutocomplete(date);
  parsedDate = parseTypedDateForDisplayUsingFutureDate(id, date, forwardOnly);
@@ -96,20 +104,13 @@
  {accesskey}
 />
 
-<!-- Separate the calendar icon from the input to allow typing in the input box -->
-<!-- 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="tasks-modal-calendar-icon"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
+<button
+ class="tasks-modal-calendar-button"
+ use:iconCalendarDays
  on:click={openDatePicker}
- 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"
- />
-</svg>
+ aria-label="Open date picker"
+ style="background: none; border: none; padding: 0; cursor: pointer;"
+/>
 
 <code class="tasks-modal-parsed-date">{dateSymbol} {@html parsedDate}</code>
 

diff --git a/src/ui/EditTask.scss b/src/ui/EditTask.scss
@@ -81,11 +81,9 @@
  min-width: 15em;
  }
 
- .tasks-modal-calendar-icon {
+ .tasks-modal-calendar-button {
  grid-column: 3;
- width: 24px;
- height: 24px;
- fill: var(--text-muted);
+ color: var(--text-muted);
  }
 
  .tasks-modal-parsed-date {
@@ -164,7 +162,7 @@
  grid-column: 1;
  }
 
- .tasks-modal-calendar-icon {
+ .tasks-modal-calendar-button {
  grid-column: 2;
  }
 
@@ -194,7 +192,7 @@
  grid-column: 1;
  }
 
- .tasks-modal-calendar-icon {
+ .tasks-modal-calendar-button {
  grid-column: 1;
  }
 

diff --git a/src/ui/Menus/DatePicker.ts b/src/ui/Menus/DatePicker.ts
@@ -19,42 +19,26 @@ export function promptForDate(
  dateFieldToEdit: AllTaskDateFields,
  taskSaver: (originalTask: Task, newTasks: Task | Task[]) => Promise<void>,
 ) {
- if (!parentElement) {
- console.log('Parent element not found.');
- return;
- }
+ const currentValue = task[dateFieldToEdit];
+ // TODO figure out how Today's date is determined: if Obsidian is left
+ // running overnight, the flatpickr modal shows the previous day as Today.
+ const fp = flatpickr(parentElement, {
+ defaultDate: currentValue ? currentValue.format('YYYY-MM-DD') : new Date(),
+ enableTime: false, // Optional: Enable time picker
+ dateFormat: 'Y-m-d', // Adjust the date and time format as needed
+ locale: {
+ firstDayOfWeek: 1, // Sets Monday as the first day of the week
+ },
+ onClose: async (selectedDates, _dateStr, instance) => {
+ if (selectedDates.length > 0) {
+ const date = selectedDates[0];
+ const newTask = new SetTaskDate(dateFieldToEdit, date).apply(task);
+ await taskSaver(task, newTask);
+ }
+ instance.destroy(); // Proper cleanup
+ },
+ });
 
- const input = document.createElement('input');
- input.type = 'text'; // Flatpickr can hook into a text input
- parentElement.appendChild(input);
-
- // Ensure styles are applied so Flatpickr can render correctly
- input.style.minWidth = '200px'; // Ensure there's enough room for Flatpickr
-
- // Delay the initialization of Flatpickr to ensure DOM is ready
- setTimeout(() => {
- const currentValue = task[dateFieldToEdit];
- // TODO figure out how Today's date is determined: if Obsidian is left
- // running overnight, the flatpickr modal shows the previous day as Today.
- const fp = flatpickr(input, {
- defaultDate: currentValue ? currentValue.format('YYYY-MM-DD') : new Date(),
- enableTime: false, // Optional: Enable time picker
- dateFormat: 'Y-m-d', // Adjust the date and time format as needed
- locale: {
- firstDayOfWeek: 1, // Sets Monday as the first day of the week
- },
- onClose: async (selectedDates, _dateStr, instance) => {
- if (selectedDates.length > 0) {
- const date = selectedDates[0];
- const newTask = new SetTaskDate(dateFieldToEdit, date).apply(task);
- await taskSaver(task, newTask);
- }
- instance.destroy(); // Proper cleanup
- input.remove(); // Remove the elements after selection
- },
- });
-
- // Open the calendar programmatically
- fp.open();
- }, 0);
+ // Open the calendar programmatically
+ fp.open();
 }
diff --git a/tests/__mocks__/obsidian.ts b/tests/__mocks__/obsidian.ts
@@ -157,3 +157,6 @@ export function prepareSimpleSearch(query: string): (text: string) => SearchResu
  return caseInsensitiveSubstringSearch(query, text);
  };
 }
+
+type IconName = string;
+export function setIcon(_parent: HTMLElement, _iconId: IconName): void {}
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
@@ -94,14 +94,10 @@
  class="tasks-modal-date-input"
  placeholder="Try 'Mon' or 'tm' then space"
  accesskey="d" />
- <svg
- class="tasks-modal-calendar-icon"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- 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>
- </svg>
+ <button
+ class="tasks-modal-calendar-button"
+ aria-label="Open date picker"
+ style="background: none; padding: 0px; cursor: pointer"></button>
  <code class="tasks-modal-parsed-date">
  📅
  <i>no due date</i>
@@ -116,14 +112,10 @@
  class="tasks-modal-date-input"
  placeholder="Try 'Mon' or 'tm' then space"
  accesskey="s" />
- <svg
- class="tasks-modal-calendar-icon"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- 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>
- </svg>
+ <button
+ class="tasks-modal-calendar-button"
+ aria-label="Open date picker"
+ style="background: none; padding: 0px; cursor: pointer"></button>
  <code class="tasks-modal-parsed-date">
  ⏳
  <i>no scheduled date</i>
@@ -139,14 +131,10 @@
  class="tasks-modal-date-input"
  placeholder="Try 'Mon' or 'tm' then space"
  accesskey="a" />
- <svg
- class="tasks-modal-calendar-icon"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- 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>
- </svg>
+ <button
+ class="tasks-modal-calendar-button"
+ aria-label="Open date picker"
+ style="background: none; padding: 0px; cursor: pointer"></button>
  <code class="tasks-modal-parsed-date">
  🛫
  <i>no start date</i>
@@ -245,14 +233,10 @@
  class="tasks-modal-date-input"
  placeholder="Try 'Mon' or 'tm' then space"
  accesskey="c" />
- <svg
- class="tasks-modal-calendar-icon"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- 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>
- </svg>
+ <button
+ class="tasks-modal-calendar-button"
+ aria-label="Open date picker"
+ style="background: none; padding: 0px; cursor: pointer"></button>
  <code class="tasks-modal-parsed-date">
  ➕
  <i>no created date</i>
@@ -268,14 +252,10 @@
  class="tasks-modal-date-input"
  placeholder="Try 'Mon' or 'tm' then space"
  accesskey="x" />
- <svg
- class="tasks-modal-calendar-icon"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- 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>
- </svg>
+ <button
+ class="tasks-modal-calendar-button"
+ aria-label="Open date picker"
+ style="background: none; padding: 0px; cursor: pointer"></button>
  <code class="tasks-modal-parsed-date">
  ✅
  <i>no done date</i>
@@ -291,14 +271,10 @@
  class="tasks-modal-date-input"
  placeholder="Try 'Mon' or 'tm' then space"
  accesskey="-" />
- <svg
- class="tasks-modal-calendar-icon"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- 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>
- </svg>
+ <button
+ class="tasks-modal-calendar-button"
+ aria-label="Open date picker"
+ style="background: none; padding: 0px; cursor: pointer"></button>
  <code class="tasks-modal-parsed-date">
  ❌
  <i>no cancelled date</i>

diff --git a/....Edit_Modal_HTML_snapshot_tests_should_match_snapshot_-_without_access_keys.approved.html b/....Edit_Modal_HTML_snapshot_tests_should_match_snapshot_-_without_access_keys.approved.html
@@ -56,42 +56,30 @@
  </code>
  <label for="due">Due</label>
  <input id="due" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
- <svg
- class="tasks-modal-calendar-icon"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- 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>
- </svg>
+ <button
+ class="tasks-modal-calendar-button"
+ aria-label="Open date picker"
+ style="background: none; padding: 0px; cursor: pointer"></button>
  <code class="tasks-modal-parsed-date">
  📅
  <i>no due date</i>
  </code>
  <label for="scheduled">Scheduled</label>
  <input id="scheduled" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
- <svg
- class="tasks-modal-calendar-icon"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- 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>
- </svg>
+ <button
+ class="tasks-modal-calendar-button"
+ aria-label="Open date picker"
+ style="background: none; padding: 0px; cursor: pointer"></button>
  <code class="tasks-modal-parsed-date">
  ⏳
  <i>no scheduled date</i>
  </code>
  <label for="start">Start</label>
  <input id="start" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
- <svg
- class="tasks-modal-calendar-icon"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- 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>
- </svg>
+ <button
+ class="tasks-modal-calendar-button"
+ aria-label="Open date picker"
+ style="background: none; padding: 0px; cursor: pointer"></button>
  <code class="tasks-modal-parsed-date">
  🛫
  <i>no start date</i>
@@ -165,42 +153,30 @@
  </select>
  <label for="created">Created</label>
  <input id="created" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
- <svg
- class="tasks-modal-calendar-icon"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- 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>
- </svg>
+ <button
+ class="tasks-modal-calendar-button"
+ aria-label="Open date picker"
+ style="background: none; padding: 0px; cursor: pointer"></button>
  <code class="tasks-modal-parsed-date">
  ➕
  <i>no created date</i>
  </code>
  <label for="done">Done</label>
  <input id="done" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
- <svg
- class="tasks-modal-calendar-icon"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- 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>
- </svg>
+ <button
+ class="tasks-modal-calendar-button"
+ aria-label="Open date picker"
+ style="background: none; padding: 0px; cursor: pointer"></button>
  <code class="tasks-modal-parsed-date">
  ✅
  <i>no done date</i>
  </code>
  <label for="cancelled">Cancelled</label>
  <input id="cancelled" type="text" class="tasks-modal-date-input" placeholder="Try 'Mon' or 'tm' then space" />
- <svg
- class="tasks-modal-calendar-icon"
- xmlns="http://www.w3.org/2000/svg"
- viewBox="0 0 24 24"
- 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>
- </svg>
+ <button
+ class="tasks-modal-calendar-button"
+ aria-label="Open date picker"
+ style="background: none; padding: 0px; cursor: pointer"></button>
  <code class="tasks-modal-parsed-date">
  ❌
  <i>no cancelled date</i>