Skip to content

Commit

Permalink
fix: Use a nicer icon for the calendar
Browse files Browse the repository at this point in the history 
credit:  @joethei
  • Loading branch information
@claremacrae
claremacrae committed Sep 1, 2024
1 parent e4638d1 commit 6d97202
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 166 deletions.
26 changes: 10 additions & 16 deletions src/ui/DateEditor.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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);
Expand Down Expand Up @@ -96,27 +104,13 @@
{accesskey}
/>

<!-- Separate the calendar icon from the input to allow typing in the input box -->
<!-- TODO Nicer looking icon, or at least make it a paler shade -->
<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;"
>
<svg
class="tasks-modal-calendar-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="24px"
height="24px"
>
<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>
</button>
/>

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

Expand Down
10 changes: 4 additions & 6 deletions src/ui/EditTask.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -164,7 +162,7 @@
grid-column: 1;
}

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

Expand Down Expand Up @@ -194,7 +192,7 @@
grid-column: 1;
}

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

Expand Down
3 changes: 3 additions & 0 deletions tests/__mocks__/obsidian.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {}
78 changes: 6 additions & 72 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 @@ -97,18 +97,7 @@
<button
class="tasks-modal-calendar-button"
aria-label="Open date picker"
style="background: none; padding: 0px; cursor: pointer">
<svg
class="tasks-modal-calendar-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="24px"
height="24px">
<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>
style="background: none; padding: 0px; cursor: pointer"></button>
<code class="tasks-modal-parsed-date">
📅
<i>no due date</i>
Expand All @@ -126,18 +115,7 @@
<button
class="tasks-modal-calendar-button"
aria-label="Open date picker"
style="background: none; padding: 0px; cursor: pointer">
<svg
class="tasks-modal-calendar-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="24px"
height="24px">
<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>
style="background: none; padding: 0px; cursor: pointer"></button>
<code class="tasks-modal-parsed-date">
⏳
<i>no scheduled date</i>
Expand All @@ -156,18 +134,7 @@
<button
class="tasks-modal-calendar-button"
aria-label="Open date picker"
style="background: none; padding: 0px; cursor: pointer">
<svg
class="tasks-modal-calendar-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="24px"
height="24px">
<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>
style="background: none; padding: 0px; cursor: pointer"></button>
<code class="tasks-modal-parsed-date">
🛫
<i>no start date</i>
Expand Down Expand Up @@ -269,18 +236,7 @@
<button
class="tasks-modal-calendar-button"
aria-label="Open date picker"
style="background: none; padding: 0px; cursor: pointer">
<svg
class="tasks-modal-calendar-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="24px"
height="24px">
<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>
style="background: none; padding: 0px; cursor: pointer"></button>
<code class="tasks-modal-parsed-date">
➕
<i>no created date</i>
Expand All @@ -299,18 +255,7 @@
<button
class="tasks-modal-calendar-button"
aria-label="Open date picker"
style="background: none; padding: 0px; cursor: pointer">
<svg
class="tasks-modal-calendar-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="24px"
height="24px">
<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>
style="background: none; padding: 0px; cursor: pointer"></button>
<code class="tasks-modal-parsed-date">
✅
<i>no done date</i>
Expand All @@ -329,18 +274,7 @@
<button
class="tasks-modal-calendar-button"
aria-label="Open date picker"
style="background: none; padding: 0px; cursor: pointer">
<svg
class="tasks-modal-calendar-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="24px"
height="24px">
<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>
style="background: none; padding: 0px; cursor: pointer"></button>
<code class="tasks-modal-parsed-date">
❌
<i>no cancelled date</i>
Expand Down
78 changes: 6 additions & 72 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 @@ -59,18 +59,7 @@
<button
class="tasks-modal-calendar-button"
aria-label="Open date picker"
style="background: none; padding: 0px; cursor: pointer">
<svg
class="tasks-modal-calendar-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="24px"
height="24px">
<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>
style="background: none; padding: 0px; cursor: pointer"></button>
<code class="tasks-modal-parsed-date">
📅
<i>no due date</i>
Expand All @@ -80,18 +69,7 @@
<button
class="tasks-modal-calendar-button"
aria-label="Open date picker"
style="background: none; padding: 0px; cursor: pointer">
<svg
class="tasks-modal-calendar-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="24px"
height="24px">
<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>
style="background: none; padding: 0px; cursor: pointer"></button>
<code class="tasks-modal-parsed-date">
⏳
<i>no scheduled date</i>
Expand All @@ -101,18 +79,7 @@
<button
class="tasks-modal-calendar-button"
aria-label="Open date picker"
style="background: none; padding: 0px; cursor: pointer">
<svg
class="tasks-modal-calendar-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="24px"
height="24px">
<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>
style="background: none; padding: 0px; cursor: pointer"></button>
<code class="tasks-modal-parsed-date">
🛫
<i>no start date</i>
Expand Down Expand Up @@ -189,18 +156,7 @@
<button
class="tasks-modal-calendar-button"
aria-label="Open date picker"
style="background: none; padding: 0px; cursor: pointer">
<svg
class="tasks-modal-calendar-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="24px"
height="24px">
<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>
style="background: none; padding: 0px; cursor: pointer"></button>
<code class="tasks-modal-parsed-date">
➕
<i>no created date</i>
Expand All @@ -210,18 +166,7 @@
<button
class="tasks-modal-calendar-button"
aria-label="Open date picker"
style="background: none; padding: 0px; cursor: pointer">
<svg
class="tasks-modal-calendar-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="24px"
height="24px">
<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>
style="background: none; padding: 0px; cursor: pointer"></button>
<code class="tasks-modal-parsed-date">
✅
<i>no done date</i>
Expand All @@ -231,18 +176,7 @@
<button
class="tasks-modal-calendar-button"
aria-label="Open date picker"
style="background: none; padding: 0px; cursor: pointer">
<svg
class="tasks-modal-calendar-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
width="24px"
height="24px">
<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>
style="background: none; padding: 0px; cursor: pointer"></button>
<code class="tasks-modal-parsed-date">
❌
<i>no cancelled date</i>
Expand Down

0 comments on commit 6d97202

Please sign in to comment.