From 2f1f345b94c979f9ee6dc5ecd144a5d455aac3f6 Mon Sep 17 00:00:00 2001 From: Jeremy Valentine <38669521+valentine195@users.noreply.github.com> Date: Wed, 24 May 2023 13:52:55 -0400 Subject: [PATCH] fix: settings can be closed, improves settings styling --- src/calendar/ui/Month.svelte | 5 +- src/calendar/ui/Nav.svelte | 11 --- src/settings/creator/Utilities/Details.svelte | 17 ++--- src/settings/settings.css | 34 +++------ src/settings/settings.ts | 72 +++++++++---------- 5 files changed, 53 insertions(+), 86 deletions(-) diff --git a/src/calendar/ui/Month.svelte b/src/calendar/ui/Month.svelte index ad32045..244bf76 100644 --- a/src/calendar/ui/Month.svelte +++ b/src/calendar/ui/Month.svelte @@ -9,20 +9,19 @@ const global = getTypedContext("store"); const ephemeral = getTypedContext("ephemeralStore"); $: store = $global; - $: staticStore = store.staticStore; $: yearCalculator = store.yearCalculator; $: previousMonth = $ephemeral.getPreviousMonth(month, year); $: nextMonth = $ephemeral.getNextMonth(month, year); $: displayWeeks = $ephemeral.displayWeeks; $: viewState = $ephemeral.viewState; - $: staticConfiguration = staticStore.staticConfiguration; + $: staticConfiguration = store.staticStore.staticConfiguration; $: displayedMonth = yearCalculator .getYearFromCache(year) .getMonthFromCache(month); $: ({ weekdays, days, lastDay, firstWeekNumber, weeks } = displayedMonth); $: ({ lastDay: previousLastDay, days: previousDays } = previousMonth); - $: firstDay = displayedMonth.firstDay; + $: extraWeek = $weekdays.length - $lastDay <= $weekdays.length / 2 ? 1 : 0; const tbody = (node: HTMLElement) => { diff --git a/src/calendar/ui/Nav.svelte b/src/calendar/ui/Nav.svelte index 3ccc9ee..45cbea4 100644 --- a/src/calendar/ui/Nav.svelte +++ b/src/calendar/ui/Nav.svelte @@ -35,17 +35,6 @@ /* openDate(); */ }); }); - menu.addItem((item) => { - item.setTitle( - `Show ${$viewState == ViewState.Year ? "Month" : "Year"} View` - ).onClick(() => { - if ($viewState == ViewState.Year) { - $viewState = ViewState.Month; - } else { - $viewState = ViewState.Year; - } - }); - }); menu.addSeparator(); menu.addItem((item) => { item.setTitle( diff --git a/src/settings/creator/Utilities/Details.svelte b/src/settings/creator/Utilities/Details.svelte index e1a0e01..9f68b70 100644 --- a/src/settings/creator/Utilities/Details.svelte +++ b/src/settings/creator/Utilities/Details.svelte @@ -1,5 +1,5 @@
@@ -28,7 +31,7 @@ {#if warn}
{/if} -
+
@@ -89,15 +92,7 @@ .handle { transform: rotate(0deg); transition: transform 0.25s; - background-color: currentColor; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: contain; - mask-size: contain; - -webkit-mask-image: var(--admonition-details-icon); - mask-image: var(--admonition-details-icon); - width: 20px; - height: 20px; + display: flex; } details[open] .handle { diff --git a/src/settings/settings.css b/src/settings/settings.css index bff0f7e..191b747 100644 --- a/src/settings/settings.css +++ b/src/settings/settings.css @@ -1,3 +1,7 @@ +:root { + --calendarium-details-icon: url("data:image/svg+xml;charset=utf-8,"); +} + body:not(.is-mobile) .modal.mod-settings .vertical-tab-content-container @@ -8,6 +12,8 @@ body:not(.is-mobile) .calendarium-settings, .calendarium-settings-content { background-color: inherit; +} +.calendarium-settings-content { position: relative; } @@ -29,12 +35,6 @@ body:not(.is-mobile) } /** Details */ -.modal.mod-settings - .vertical-tab-content-container - .vertical-tab-content.calendarium-settings { - position: relative; - /* padding-top: 0px; */ -} .modal.mod-settings .vertical-tab-content.calendarium-settings @@ -71,21 +71,9 @@ details.calendarium-nested-settings > summary > .collapser { details.calendarium-nested-settings > summary > .collapser > .handle { transform: rotate(0deg); transition: transform 0.25s; - background-color: currentColor; - -webkit-mask-repeat: no-repeat; - mask-repeat: no-repeat; - -webkit-mask-size: contain; - mask-size: contain; - -webkit-mask-image: var(--admonition-details-icon); - mask-image: var(--admonition-details-icon); - width: 20px; - height: 20px; -} - -details.calendarium-nested-settings[open] - > summary - > .collapser - > .handle { +} + +details.calendarium-nested-settings[open] > summary > .collapser > .handle { transform: rotate(90deg); } @@ -199,9 +187,7 @@ details.calendarium-nested-settings[open] flex-direction: column; } -.calendarium-choose-preset - .calendarium-preset-container - button.mod-cta { +.calendarium-choose-preset .calendarium-preset-container button.mod-cta { box-shadow: 0 0 10px var(--background-modifier-success); } diff --git a/src/settings/settings.ts b/src/settings/settings.ts index d4a5ec9..4902387 100644 --- a/src/settings/settings.ts +++ b/src/settings/settings.ts @@ -7,7 +7,7 @@ import { PluginSettingTab, setIcon, Setting, - TFolder + TFolder, } from "obsidian"; import copy from "fast-copy"; @@ -30,7 +30,7 @@ import { nanoid } from "src/utils/functions"; export enum Recurring { none = "None", monthly = "Monthly", - yearly = "Yearly" + yearly = "Yearly", } interface Context { store: ReturnType; @@ -85,16 +85,14 @@ export default class CalendariumSettings extends PluginSettingTab { "calendarium-settings-content" ); - this.buildInfo( - this.contentEl.createDiv("calendarium-nested-settings") - ); + this.buildInfo(this.contentEl.createDiv("calendarium-nested-settings")); this.calendarsEl = this.contentEl.createEl("details", { cls: "calendarium-nested-settings", attr: { ...(this.data.settingsToggleState.calendars ? { open: `open` } - : {}) - } + : {}), + }, }); this.buildCalendars(); this.buildEvents( @@ -103,8 +101,8 @@ export default class CalendariumSettings extends PluginSettingTab { attr: { ...(this.data.settingsToggleState.events ? { open: `open` } - : {}) - } + : {}), + }, }) ); this.buildAdvanced( @@ -113,8 +111,8 @@ export default class CalendariumSettings extends PluginSettingTab { attr: { ...(this.data.settingsToggleState.advanced ? { open: `open` } - : {}) - } + : {}), + }, }) ); } @@ -131,7 +129,7 @@ export default class CalendariumSettings extends PluginSettingTab { this.plugin.data.exit = { saving: false, event: false, - calendar: false + calendar: false, }; await this.plugin.saveSettings(); }); @@ -151,16 +149,16 @@ export default class CalendariumSettings extends PluginSettingTab { .setDesc( createFragment((e) => { e.createSpan({ - text: "Please back up your data before changing this setting. Hidden directories must be manually entered." + text: "Please back up your data before changing this setting. Hidden directories must be manually entered.", }); e.createEl("br"); e.createSpan({ - text: `Current directory: ` + text: `Current directory: `, }); const configDirectory = this.data.configDirectory ?? this.app.vault.configDir; e.createEl("code", { - text: configDirectory + text: configDirectory, }); }) ) @@ -173,7 +171,7 @@ export default class CalendariumSettings extends PluginSettingTab { this.data.configDirectory ?? this.app.vault.configDir ); const modal = new FolderSuggestionModal(this.app, text, [ - ...(folders as TFolder[]) + ...(folders as TFolder[]), ]); modal.onClose = async () => { @@ -223,7 +221,7 @@ export default class CalendariumSettings extends PluginSettingTab { const summary = this.calendarsEl.createEl("summary"); new Setting(summary).setHeading().setName("Calendar Management"); - summary.createDiv("collapser").createDiv("handle"); + setIcon(summary.createDiv("collapser").createDiv("handle"), "chevron-right"); new Setting(this.calendarsEl) .setName("Show Intercalary Months Separately") @@ -262,12 +260,12 @@ export default class CalendariumSettings extends PluginSettingTab { .setDesc( createFragment((e) => { e.createSpan({ - text: "Import calendar from " + text: "Import calendar from ", }); e.createEl("a", { href: "https://app.calendarium.com", text: "Calendarium", - cls: "external-link" + cls: "external-link", }); }) ) @@ -278,8 +276,8 @@ export default class CalendariumSettings extends PluginSettingTab { name: "merge", accept: ".json", multiple: true, - style: "display: none;" - } + style: "display: none;", + }, }); input.onchange = async () => { const { files } = input; @@ -335,7 +333,7 @@ export default class CalendariumSettings extends PluginSettingTab { this.existingEl.empty(); if (!this.data.calendars.length) { this.existingEl.createSpan({ - text: "No calendars created! Create a calendar to see it here." + text: "No calendars created! Create a calendar to see it here.", }); return; } @@ -388,14 +386,14 @@ export default class CalendariumSettings extends PluginSettingTab { const summary = containerEl.createEl("summary"); new Setting(summary).setHeading().setName("Events"); - summary.createDiv("collapser").createDiv("handle"); + setIcon(summary.createDiv("collapser").createDiv("handle"), "chevron-right"); new Setting(containerEl) .setName("Add Events to Default Calendar") .setDesc( createFragment((e) => { e.createSpan({ - text: "Add events found in notes to the default calendar if the " + text: "Add events found in notes to the default calendar if the ", }); e.createEl("code", { text: "fc-calendar" }); e.createSpan({ text: " frontmatter tag is not present." }); @@ -449,25 +447,25 @@ export default class CalendariumSettings extends PluginSettingTab { .setDesc( createFragment((e) => { e.createSpan({ - text: "Event dates will be parsed using this format." + text: "Event dates will be parsed using this format.", }); e.createSpan({ text: "Only the " }); e.createEl("code", { text: "Y" }); e.createSpan({ - text: ", " + text: ", ", }); e.createEl("code", { text: "M" }); e.createSpan({ - text: ", and " + text: ", and ", }); e.createEl("code", { text: "D" }); e.createEl("a", { text: "tokens", href: "https://momentjs.com/docs/#/displaying/format/", - cls: "external-link" + cls: "external-link", }); e.createSpan({ - text: " are supported." + text: " are supported.", }); if ( ["Y", "M", "D"].some( @@ -476,7 +474,7 @@ export default class CalendariumSettings extends PluginSettingTab { ) { e.createEl("br"); const span = e.createSpan({ - cls: "calendarium-warning date-format" + cls: "calendarium-warning date-format", }); setIcon( span.createSpan("calendarium-warning"), @@ -488,7 +486,7 @@ export default class CalendariumSettings extends PluginSettingTab { span.createSpan({ text: ` Date format is missing: ${missing .join(", ") - .replace(/, ([^,]*)$/, " and $1")}` + .replace(/, ([^,]*)$/, " and $1")}`, }); } }) @@ -532,14 +530,14 @@ export default class CalendariumSettings extends PluginSettingTab { const summary = containerEl.createEl("summary"); new Setting(summary).setHeading().setName("Advanced"); - summary.createDiv("collapser").createDiv("handle"); + setIcon(summary.createDiv("collapser").createDiv("handle"), "chevron-right"); new Setting(containerEl) .setName("Show Event Debug Messages") .setDesc( createFragment((e) => { e.createSpan({ - text: "The plugin will show debug messages when events are added, deleted or updated by the file watcher." + text: "The plugin will show debug messages when events are added, deleted or updated by the file watcher.", }); }) ) @@ -588,8 +586,8 @@ export default class CalendariumSettings extends PluginSettingTab { plugin: this.plugin, width: this.contentEl.clientWidth, color, - top: this.containerEl.scrollTop - } + top: this.containerEl.scrollTop, + }, }); const observer = new ResizeObserver(() => { $app.$set({ width: this.contentEl.clientWidth }); @@ -636,8 +634,8 @@ class MobileCreatorModal extends CalendariumModal { base: this.calendar, plugin: this.plugin, width: this.contentEl.clientWidth, - top: 0 - } + top: 0, + }, }); $app.$on( "exit",