Skip to content

Commit

Permalink
Merge pull request obsidian-tasks-group#3067 from ilandikov/fix-remov…
Browse files Browse the repository at this point in the history 
…e-datepicker

fix: remove datepicker pending usability fixes
  • Loading branch information
@claremacrae
claremacrae authored Sep 6, 2024
2 parents 8eaff15 + 56b4ccd commit 9286238
Show file tree
Hide file tree
Showing 9 changed files with 111 additions and 201 deletions.
12 changes: 6 additions & 6 deletions ...urces/sample_vaults/Tasks-Demo/Manual Testing/Smoke Testing the Tasks Plugin.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,13 +127,13 @@ heading includes Rendering of Task Blocks
- View this file in **Reading mode**...
- On the task line above:
- [ ] #task **left**-click on a date value, and use the date picker to select and save a different date. Check that the date is updated.
- [ ] #task **left**-click on a date value, and click outside the date picker, to confirm that the picker closes.
- [ ] #task ~~**left**-click on a date value, and use the date picker to select and save a different date. Check that the date is updated.~~
- [ ] #task ~~**left**-click on a date value, and click outside the date picker, to confirm that the picker closes.~~
- [ ] #task **right**-click on a date value, and use the context menu to select and save a different date. Check that the date is updated.
- [ ] #task **right**-click on a date value, and click outside the context menu, to confirm that the menu closes.
- In the tasks search block below:
- [ ] #task **left**-click on a date value, and use the date picker to select and save a different date. Check that the date is updated.
- [ ] #task **left**-click on a date value, and click outside the date picker, to confirm that the picker closes.
- [ ] #task ~~**left**-click on a date value, and use the date picker to select and save a different date. Check that the date is updated.~~
- [ ] #task ~~**left**-click on a date value, and click outside the date picker, to confirm that the picker closes.~~
- [ ] #task **right**-click on a date value, and use the context menu to select and save a different date. Check that the date is updated.
- [ ] #task **right**-click on a date value, and click outside the context menu, to confirm that the menu closes.
- [ ] #task **check**: Checked all above steps for **editing dates** worked
Expand All @@ -155,8 +155,8 @@ hide postpone button
2. **Check** that the text in the list item is copied in to the Description field
3. Type some values in to the fields
4. In one of the date fields, type `tm` (including the space afterwards) and **Check** it is expanded in to `tomorrow`
5. In one of the date fields, left-click the calendar button, and use the context menu to select and save a date. Check that the date is saved.
6. In one of the date fields, left-click the calendar button, and click outside the date picker, to confirm that the picker closes and the modal is still usable.
5. ~~In one of the date fields, left-click the calendar button, and use the context menu to select and save a date. Check that the date is saved.~~
6. ~~In one of the date fields, left-click the calendar button, and click outside the date picker, to confirm that the picker closes and the modal is still usable.~~
7. Hit Return or click **Apply**
8. **Check** that the list item above is converted in to a task
9. **Check** that values you entered in the modal have been copied in to the list item above
Expand Down
14 changes: 7 additions & 7 deletions src/Renderer/TaskLineRenderer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import { TaskRegularExpressions } from '../Task/TaskRegularExpressions';
import { StatusMenu } from '../ui/Menus/StatusMenu';
import type { AllTaskDateFields } from '../DateTime/DateFieldTypes';
import { defaultTaskSaver } from '../ui/Menus/TaskEditingMenu';
import { promptForDate } from '../ui/Menus/DatePicker';
import { splitDateText } from '../DateTime/Postponer';
import { DateMenu } from '../ui/Menus/DateMenu';
import { TaskFieldRenderer } from './TaskFieldRenderer';
Expand Down Expand Up @@ -216,11 +215,11 @@ export class TaskLineRenderer {
const componentDateField = component as AllTaskDateFields;

// Note: The more convenient span.onClickEvent() doesn't work here, as it is not available when tests are run.
span.addEventListener('click', (ev: MouseEvent) => {
ev.preventDefault(); // suppress the default click behavior
ev.stopPropagation(); // suppress further event propagation
promptForDate(span, task, componentDateField, defaultTaskSaver);
});
// span.addEventListener('click', (ev: MouseEvent) => {
// ev.preventDefault(); // suppress the default click behavior
// ev.stopPropagation(); // suppress further event propagation
// promptForDate(span, task, componentDateField, defaultTaskSaver);
// });

span.addEventListener('contextmenu', (ev: MouseEvent) => {
ev.preventDefault(); // suppress the default context menu
Expand All @@ -230,7 +229,8 @@ export class TaskLineRenderer {
});
span.setAttribute(
'title',
`Click to edit ${splitDateText(componentDateField)}, Right-click for more options`,
// `Click to edit ${splitDateText(componentDateField)}, Right-click for more options`,
`Right-click to edit ${splitDateText(componentDateField)}`,
);
}
}
Expand Down
136 changes: 65 additions & 71 deletions src/ui/DateEditor.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,4 @@
<script lang="ts">
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';
Expand All @@ -16,16 +11,16 @@
export let accesskey: string | null;
let parsedDate: string;
let inputElement: HTMLInputElement;
let flatpickrInstance: any;
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');
};
// let inputElement: HTMLInputElement;
// let flatpickrInstance: any;
//
// 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);
Expand All @@ -41,60 +36,59 @@
*
* See also {@link promptForDate}
*/
function openDatePicker() {
if (inputElement) {
if (flatpickrInstance) {
flatpickrInstance.destroy(); // Destroy any existing instance to avoid conflicts
}
const options: Record<string, any> = {
enableTime: false,
dateFormat: 'Y-m-d',
locale: {
firstDayOfWeek: 1,
},
onClose: (selectedDates: Date[]) => {
dispatch('close', { instance: flatpickrInstance }); // Notify parent about close
if (selectedDates.length > 0) {
const selectedDate = selectedDates[0];
date = window.moment(selectedDate).format('YYYY-MM-DD');
}
flatpickrInstance.destroy(); // Destroy the instance after the date is selected
flatpickrInstance = null;
},
allowInput: true, // Allow manual input to keep the field empty if no selection is made
defaultDate: undefined, // Explicitly define defaultDate with undefined
};
// 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(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);
}
flatpickrInstance = flatpickr(inputElement, options);
dispatch('open', { instance: flatpickrInstance }); // Notify parent about open
flatpickrInstance.open(); // Directly open the date picker
}
}
// function openDatePicker() {
// if (inputElement) {
// if (flatpickrInstance) {
// flatpickrInstance.destroy(); // Destroy any existing instance to avoid conflicts
// }
//
// const options: Record<string, any> = {
// enableTime: false,
// dateFormat: 'Y-m-d',
// locale: {
// firstDayOfWeek: 1,
// },
// onClose: (selectedDates: Date[]) => {
// dispatch('close', { instance: flatpickrInstance }); // Notify parent about close
//
// if (selectedDates.length > 0) {
// const selectedDate = selectedDates[0];
// date = window.moment(selectedDate).format('YYYY-MM-DD');
// }
//
// flatpickrInstance.destroy(); // Destroy the instance after the date is selected
// flatpickrInstance = null;
// },
// allowInput: true, // Allow manual input to keep the field empty if no selection is made
// defaultDate: undefined, // Explicitly define defaultDate with undefined
// };
//
// // 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(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);
// }
//
// flatpickrInstance = flatpickr(inputElement, options);
// dispatch('open', { instance: flatpickrInstance }); // Notify parent about open
//
// flatpickrInstance.open(); // Directly open the date picker
// }
// }
</script>

<label for={id}>{@html labelContentWithAccessKey(id, accesskey)}</label>
<!-- svelte-ignore a11y-accesskey -->
<input
bind:this={inputElement}
bind:value={date}
{id}
type="text"
Expand All @@ -104,13 +98,13 @@
{accesskey}
/>

<button
class="tasks-modal-calendar-button"
use:iconCalendarDays
on:click={openDatePicker}
aria-label="Open date picker"
style="background: none; border: none; padding: 0; cursor: pointer;"
/>
<!--<button-->
<!-- class="tasks-modal-calendar-button"-->
<!-- use:iconCalendarDays-->
<!-- on:click={openDatePicker}-->
<!-- aria-label="Open date picker"-->
<!-- style="background: none; border: none; padding: 0; cursor: pointer;"-->
<!--/>-->

<code class="tasks-modal-parsed-date">{dateSymbol} {@html parsedDate}</code>

Expand Down
30 changes: 15 additions & 15 deletions src/ui/EditTask.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,23 +77,23 @@
}

.tasks-modal-date-input {
grid-column: 2;
//grid-column: 2;
min-width: 15em;
}

.tasks-modal-calendar-button {
grid-column: 3;
color: var(--text-muted);
}
//.tasks-modal-calendar-button {
// grid-column: 3;
// color: var(--text-muted);
//}

.tasks-modal-parsed-date {
grid-column: 4;
grid-column: 3;
font-size: var(--font-ui-small);
}

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

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

@media (max-width: 529px) {
@media (max-width: 499px) {
.tasks-modal-priority-section {
grid-template-columns: 4em auto auto;
}
Expand All @@ -162,12 +162,12 @@
grid-column: 1;
}

.tasks-modal-calendar-button {
grid-column: 2;
}
//.tasks-modal-calendar-button {
// grid-column: 2;
//}

.tasks-modal-parsed-date {
grid-column: 3;
grid-column: 2;
}

.status-editor-status-selector {
Expand All @@ -192,9 +192,9 @@
grid-column: 1;
}

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

> .tasks-modal-parsed-date {
grid-column: 1;
Expand Down
24 changes: 6 additions & 18 deletions ...r/QueryResultsRenderer.test.QueryResultsRenderer_tests_fully_populated_task.approved.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,34 +21,22 @@
<span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
<span class="task-recurring"><span>🔁 every day when done</span></span>
<span class="task-onCompletion"><span>🏁 delete</span></span>
<span
class="task-created"
data-task-created="past-far"
title="Click to edit created date, Right-click for more options">
<span class="task-created" data-task-created="past-far" title="Right-click to edit created date">
<span>➕ 2023-07-01</span>
</span>
<span
class="task-start"
data-task-start="past-far"
title="Click to edit start date, Right-click for more options">
<span class="task-start" data-task-start="past-far" title="Right-click to edit start date">
<span>🛫 2023-07-02</span>
</span>
<span
class="task-scheduled"
data-task-scheduled="past-far"
title="Click to edit scheduled date, Right-click for more options">
<span class="task-scheduled" data-task-scheduled="past-far" title="Right-click to edit scheduled date">
<span>⏳ 2023-07-03</span>
</span>
<span class="task-due" data-task-due="past-far" title="Click to edit due date, Right-click for more options">
<span class="task-due" data-task-due="past-far" title="Right-click to edit due date">
<span>📅 2023-07-04</span>
</span>
<span
class="task-cancelled"
data-task-cancelled="past-far"
title="Click to edit cancelled date, Right-click for more options">
<span class="task-cancelled" data-task-cancelled="past-far" title="Right-click to edit cancelled date">
<span>❌ 2023-07-06</span>
</span>
<span class="task-done" data-task-done="past-far" title="Click to edit done date, Right-click for more options">
<span class="task-done" data-task-done="past-far" title="Right-click to edit done date">
<span>✅ 2023-07-05</span>
</span>
<span class="task-block-link"><span>^dcf64c</span></span>
Expand Down
21 changes: 6 additions & 15 deletions tests/Renderer/TaskLineRenderer.test.Visualise_HTML_Full_task_-_full_mode.approved.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,31 +23,22 @@
<span class="task-priority" data-task-priority="medium"><span>🔼</span></span>
<span class="task-recurring"><span>🔁 every day when done</span></span>
<span class="task-onCompletion"><span>🏁 delete</span></span>
<span
class="task-created"
data-task-created="past-4d"
title="Click to edit created date, Right-click for more options">
<span class="task-created" data-task-created="past-4d" title="Right-click to edit created date">
<span>➕ 2023-07-01</span>
</span>
<span class="task-start" data-task-start="past-3d" title="Click to edit start date, Right-click for more options">
<span class="task-start" data-task-start="past-3d" title="Right-click to edit start date">
<span>🛫 2023-07-02</span>
</span>
<span
class="task-scheduled"
data-task-scheduled="past-2d"
title="Click to edit scheduled date, Right-click for more options">
<span class="task-scheduled" data-task-scheduled="past-2d" title="Right-click to edit scheduled date">
<span>⏳ 2023-07-03</span>
</span>
<span class="task-due" data-task-due="past-1d" title="Click to edit due date, Right-click for more options">
<span class="task-due" data-task-due="past-1d" title="Right-click to edit due date">
<span>📅 2023-07-04</span>
</span>
<span
class="task-cancelled"
data-task-cancelled="future-1d"
title="Click to edit cancelled date, Right-click for more options">
<span class="task-cancelled" data-task-cancelled="future-1d" title="Right-click to edit cancelled date">
<span>❌ 2023-07-06</span>
</span>
<span class="task-done" data-task-done="today" title="Click to edit done date, Right-click for more options">
<span class="task-done" data-task-done="today" title="Right-click to edit done date">
<span>✅ 2023-07-05</span>
</span>
<span class="task-block-link"><span>^dcf64c</span></span>
Expand Down
Loading

0 comments on commit 9286238

Please sign in to comment.