Skip to content

Commit

Permalink
Merge pull request obsidian-tasks-group#3058 from obsidian-tasks-grou…
Browse files Browse the repository at this point in the history 
…p/fix-date-picker

fix: Improve Edit Task modal calendar 'button' layout
  • Loading branch information
@claremacrae
claremacrae authored Sep 1, 2024
2 parents 20bb51d + 67037bf commit e9a94c1
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 70 deletions.
38 changes: 19 additions & 19 deletions src/ui/DateEditor.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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
Expand All @@ -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);
}
Expand All @@ -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;"
>
Expand Down
22 changes: 19 additions & 3 deletions src/ui/EditTask.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,17 +77,25 @@
}

.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);
}

.future-dates-only {
grid-column-start: 1;
grid-column-end: 3;
grid-column-end: 4;

input {
margin-left: 0.67em;
Expand Down Expand Up @@ -143,7 +151,7 @@
}
}

@media (max-width: 499px) {
@media (max-width: 529px) {
.tasks-modal-priority-section {
grid-template-columns: 4em auto auto;
}
Expand All @@ -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;
}
Expand All @@ -182,6 +194,10 @@
grid-column: 1;
}

.tasks-modal-calendar-icon {
grid-column: 1;
}

> .tasks-modal-parsed-date {
grid-column: 1;
}
Expand Down
10 changes: 10 additions & 0 deletions src/ui/Menus/DatePicker.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
30 changes: 6 additions & 24 deletions tests/ui/EditTask.test.Edit_Modal_HTML_snapshot_tests_should_match_snapshot.approved.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
30 changes: 6 additions & 24 deletions ....Edit_Modal_HTML_snapshot_tests_should_match_snapshot_-_without_access_keys.approved.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit e9a94c1

Please sign in to comment.