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);
}