Skip to content

Commit

Permalink
fix: settings can be closed, improves settings styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@valentine195
valentine195 committed May 24, 2023
1 parent 7843349 commit 2f1f345
Show file tree
Hide file tree
Showing 5 changed files with 53 additions and 86 deletions.
5 changes: 2 additions & 3 deletions src/calendar/ui/Month.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down
11 changes: 0 additions & 11 deletions src/calendar/ui/Nav.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
17 changes: 6 additions & 11 deletions src/settings/creator/Utilities/Details.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script lang="ts">
import { Platform, Setting } from "obsidian";
import { Platform, Setting, setIcon } from "obsidian";
import { warning } from "./utils";
export let open = !Platform.isMobile;
Expand All @@ -13,6 +13,9 @@
const summary = (node: HTMLDivElement) => {
new Setting(node).setHeading().setName(name);
};
const handle = (node: HTMLElement) => {
setIcon(node, "chevron-right");
};
</script>

<details class="calendarium-nested-settings" use:details>
Expand All @@ -28,7 +31,7 @@
{#if warn}
<div use:warning />
{/if}
<div class="handle" />
<div class="handle" use:handle />
</div>
</div>
</summary>
Expand Down Expand Up @@ -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 {
Expand Down
34 changes: 10 additions & 24 deletions src/settings/settings.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
:root {
--calendarium-details-icon: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http: //www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M8.59 16.58L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42z'/></svg>");
}

body:not(.is-mobile)
.modal.mod-settings
.vertical-tab-content-container
Expand All @@ -8,6 +12,8 @@ body:not(.is-mobile)
.calendarium-settings,
.calendarium-settings-content {
background-color: inherit;
}
.calendarium-settings-content {
position: relative;
}

Expand All @@ -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
Expand Down Expand Up @@ -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);
}

Expand Down Expand Up @@ -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);
}

Expand Down
72 changes: 35 additions & 37 deletions src/settings/settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
PluginSettingTab,
setIcon,
Setting,
TFolder
TFolder,
} from "obsidian";

import copy from "fast-copy";
Expand All @@ -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<typeof createStore>;
Expand Down Expand Up @@ -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(
Expand All @@ -103,8 +101,8 @@ export default class CalendariumSettings extends PluginSettingTab {
attr: {
...(this.data.settingsToggleState.events
? { open: `open` }
: {})
}
: {}),
},
})
);
this.buildAdvanced(
Expand All @@ -113,8 +111,8 @@ export default class CalendariumSettings extends PluginSettingTab {
attr: {
...(this.data.settingsToggleState.advanced
? { open: `open` }
: {})
}
: {}),
},
})
);
}
Expand All @@ -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();
});
Expand All @@ -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,
});
})
)
Expand All @@ -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 () => {
Expand Down Expand Up @@ -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")
Expand Down Expand Up @@ -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",
});
})
)
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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." });
Expand Down Expand Up @@ -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(
Expand All @@ -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"),
Expand All @@ -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")}`,
});
}
})
Expand Down Expand Up @@ -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.",
});
})
)
Expand Down Expand Up @@ -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 });
Expand Down Expand Up @@ -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",
Expand Down

0 comments on commit 2f1f345

Please sign in to comment.