diff --git a/locale/de.json b/locale/de.json index c404356..461d78a 100755 --- a/locale/de.json +++ b/locale/de.json @@ -45,5 +45,8 @@ "Page Header": "Kopfzeile", "Support development": "Entwicklung unterstützen", "No commands here!": "Keine Befehle da!", - "Would you like to add one now?": "Möchtest du jetzt einen hinzufügen?" + "Would you like to add one now?": "Möchtest du jetzt einen hinzufügen?", + "Hide Commands": "Befehle verstecken", + "Choose new": "Wähle neu", + "Hide Commands of other Plugins": "Hide Commands of other Plugins" } diff --git a/locale/en.json b/locale/en.json index 7ec1115..8c1c622 100755 --- a/locale/en.json +++ b/locale/en.json @@ -45,5 +45,8 @@ "Page Header": "Page Header", "Support development": "Support development", "No commands here!": "No commands here!", - "Would you like to add one now?": "Would you like to add one now?" + "Would you like to add one now?": "Would you like to add one now?", + "Hide Commands": "Hide Commands", + "Choose new": "Choose new", + "Hide Commands of other Plugins": "Hide Commands of other Plugins" } diff --git a/src/styles.scss b/src/styles.scss index c0ff63e..1473c43 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -18,6 +18,8 @@ h1 { font-weight: 900; + margin-top: 6px; + margin-bottom: 12px; } } @@ -71,12 +73,49 @@ } } +.cmdr-accordion { + .cmdr-accordion-chevron > svg { + transition: all 0.25s ease; + } + + .cmdr-accordion-content { + max-height: 1000px; + transition: all 0.3s ease-in-out; + overflow: hidden; + } + + &[aria-expanded="false"] { + .cmdr-accordion-chevron > svg { + transform: rotate(-90deg); + } + + .cmdr-accordion-content { + max-height: 0; + transition: max-height 0.3s cubic-bezier(0, 1, 0, 1); + } + } + + .cmdr-accordion-header { + display: flex; + justify-content: space-between; + align-items: center; + cursor: var(--cursor); + + span { + font-weight: 600; + margin-bottom: 8px; + margin-top: 0; + } + } +} + .cmdr-add-new-wrapper { width: 100%; margin-top: 12px; margin-bottom: 2rem; display: flex; justify-content: center; + align-items: center; button { margin: 0; diff --git a/src/ui/components/Closable.tsx b/src/ui/components/Closable.tsx new file mode 100644 index 0000000..80a8b8e --- /dev/null +++ b/src/ui/components/Closable.tsx @@ -0,0 +1,39 @@ +import { ComponentProps, h } from "preact"; +import { useEffect, useState } from "preact/hooks"; +import { ObsidianIcon } from "src/util"; + +interface ClosableProps extends ComponentProps<"details"> { + title: string; + index: number; + children?: h.JSX.Element | h.JSX.Element[]; +} +export default function Closable({ title, children, index }: ClosableProps): h.JSX.Element { + const [open, setOpen] = useState(false); + + const toggleHandler = (): void => { + setOpen(!open); + }; + + useEffect(() => { + const handle = (e: CustomEvent): void => { + if (e.detail.index === index) { + setOpen(true); + } + }; + addEventListener("cmdr-open-hider-tab", handle); + + return () => removeEventListener("cmdr-open-hider-tab", handle); + }, [index]); + + return ( +
+
+ {title} + +
+
+ {children} +
+
+ ); +} diff --git a/src/ui/components/commandViewerComponent.tsx b/src/ui/components/commandViewerComponent.tsx index 1884f82..a21852f 100644 --- a/src/ui/components/commandViewerComponent.tsx +++ b/src/ui/components/commandViewerComponent.tsx @@ -3,7 +3,7 @@ import CommanderPlugin from "src/main"; import CommandComponent from "./commandComponent"; import logo from "src/assets/commander-logo.svg"; import CommandManager from "src/manager/_commandManager"; -import { chooseNewCommand, isModeActive } from "src/util"; +import { chooseNewCommand, isModeActive, ObsidianIcon } from "src/util"; import { arrayMoveMutable } from "array-move"; import ChooseIconModal from "../chooseIconModal"; import ConfirmDeleteModal from "../confirmDeleteModal"; @@ -15,8 +15,9 @@ export const ManagerContext = createContext(null!); interface CommandViewerProps { manager: CommandManager; plugin: CommanderPlugin + onOpenHider?: () => void } -export default function CommandViewer({ manager, plugin }: CommandViewerProps): h.JSX.Element { +export default function CommandViewer({ manager, plugin, onOpenHider }: CommandViewerProps): h.JSX.Element { return ( @@ -76,6 +77,14 @@ export default function CommandViewer({ manager, plugin }: CommandViewerProps): > {t("Add command")} + + {onOpenHider && } diff --git a/src/ui/components/hidingViewer.tsx b/src/ui/components/hidingViewer.tsx new file mode 100644 index 0000000..216d921 --- /dev/null +++ b/src/ui/components/hidingViewer.tsx @@ -0,0 +1,21 @@ +import { Fragment, h } from "preact"; +import { useMemo } from "preact/hooks"; +import t from "src/l10n"; +import CommanderPlugin from "src/main"; +import Closable from "./Closable"; + +// eslint-disable-next-line no-unused-vars +export default function HidingViewer({ plugin }: { plugin: CommanderPlugin }): h.JSX.Element { + const tabs = useMemo(() => [ + , + , + , + , + ], []); + + return ( + + {tabs} + + ); +} diff --git a/src/ui/components/settingTabComponent.tsx b/src/ui/components/settingTabComponent.tsx index c5cbb27..a6379a1 100644 --- a/src/ui/components/settingTabComponent.tsx +++ b/src/ui/components/settingTabComponent.tsx @@ -1,11 +1,12 @@ import confetti from "canvas-confetti"; import { Notice } from "obsidian"; import { Fragment, h } from "preact"; -import { useEffect, useState } from "preact/hooks"; +import { useEffect, useMemo, useState } from "preact/hooks"; import t from "src/l10n"; import { ObsidianIcon } from "src/util"; import CommanderPlugin from "../../main"; import CommandViewer from "./commandViewerComponent"; +import HidingViewer from "./hidingViewer"; import { ToggleComponent } from "./settingComponent"; export default function settingTabComponent({ plugin, mobileMode }: { plugin: CommanderPlugin; mobileMode: boolean; }): h.JSX.Element { @@ -28,7 +29,15 @@ export default function settingTabComponent({ plugin, mobileMode }: { plugin: Co return () => removeEventListener("keydown", tabToNextTab); }); - const tabs = [ + const openHiderTab = (idx: number): void => { + setActiveTab(tabs.length - 1); + setTimeout( + () => dispatchEvent(new CustomEvent("cmdr-open-hider-tab", { detail: { index: idx } })), + 50 + ); + }; + + const tabs = useMemo(() => [ { name: t("General"), tab: @@ -73,15 +82,15 @@ export default function settingTabComponent({ plugin, mobileMode }: { plugin: Co }, { name: t("Editor Menu"), - tab: + tab: openHiderTab(2)} /> }, { name: t("File Menu"), - tab: + tab: openHiderTab(3)} /> }, { name: t("Left Ribbon"), - tab: + tab: openHiderTab(0)} /> }, { name: t("Right Ribbon"), @@ -93,13 +102,17 @@ export default function settingTabComponent({ plugin, mobileMode }: { plugin: Co }, { name: t("Statusbar"), - tab: + tab: openHiderTab(1)} /> }, { name: t("Page Header"), tab: + }, + { + name: t("Hide Commands"), + tab: } - ]; + ], []); return ( diff --git a/src/ui/settingTab.ts b/src/ui/settingTab.ts index b19aac7..115c3d6 100644 --- a/src/ui/settingTab.ts +++ b/src/ui/settingTab.ts @@ -12,7 +12,7 @@ export default class CommanderSettingTab extends PluginSettingTab { } public display(): void { - const mobileMode = this.containerEl.getBoundingClientRect().width <= 1000; + const mobileMode = this.containerEl.getBoundingClientRect().width <= 1100; render(h(settingTabComponent, { plugin: this.plugin, mobileMode }), this.containerEl); } diff --git a/src/ui/settingTabModal.ts b/src/ui/settingTabModal.ts index 482e96b..aa03734 100644 --- a/src/ui/settingTabModal.ts +++ b/src/ui/settingTabModal.ts @@ -13,7 +13,7 @@ export default class SettingTabModal extends Modal { } public onOpen(): void { - const mobileMode = this.contentEl.getBoundingClientRect().width <= 1000; + const mobileMode = this.contentEl.getBoundingClientRect().width <= 1100; render(h(settingTabComponent, { plugin: this.plugin, mobileMode }), this.contentEl); }