WIP: Hide other Commands

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"
 }

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"
 }

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;

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 (
+		<div className="cmdr-accordion" aria-expanded={open}>
+			<div className="cmdr-accordion-header" onClick={toggleHandler}>
+				<span>{title}</span>
+				<ObsidianIcon className="cmdr-accordion-chevron clickable-icon" icon="chevron-down" size={24} />
+			</div>
+			<div className="cmdr-accordion-content">
+				{children}
+			</div>
+		</div>
+	);
+}

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<CommandManager>(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 (
 		<Fragment>
 			<ManagerContext.Provider value={manager}>
@@ -76,6 +77,14 @@ export default function CommandViewer({ manager, plugin }: CommandViewerProps):
 					>
 						{t("Add command")}
 					</button>
+
+					{onOpenHider && <ObsidianIcon
+						icon="eye-off"
+						size={18}
+						class="clickable-icon"
+						aria-label={t("Hide Commands of other Plugins")}
+						onClick={onOpenHider}
+					/>}
 				</div>
 			</ManagerContext.Provider>
 		</Fragment >

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(() => [
+		<Closable title={t("Left Ribbon")} index={0}></Closable>,
+		<Closable title={t("Statusbar")} index={1}></Closable>,
+		<Closable title={t("Editor Menu")} index={2}></Closable>,
+		<Closable title={t("File Menu")} index={3}></Closable>,
+	], []);
+
+	return (
+		<Fragment>
+			{tabs}
+		</Fragment>
+	);
+}

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: <Fragment>
@@ -73,15 +82,15 @@ export default function settingTabComponent({ plugin, mobileMode }: { plugin: Co
 		},
 		{
 			name: t("Editor Menu"),
-			tab: <CommandViewer manager={plugin.manager.editorMenu} plugin={plugin} />
+			tab: <CommandViewer manager={plugin.manager.editorMenu} plugin={plugin} onOpenHider={(): void => openHiderTab(2)} />
 		},
 		{
 			name: t("File Menu"),
-			tab: <CommandViewer manager={plugin.manager.fileMenu} plugin={plugin} />
+			tab: <CommandViewer manager={plugin.manager.fileMenu} plugin={plugin} onOpenHider={(): void => openHiderTab(3)} />
 		},
 		{
 			name: t("Left Ribbon"),
-			tab: <CommandViewer manager={plugin.manager.leftRibbon} plugin={plugin} />
+			tab: <CommandViewer manager={plugin.manager.leftRibbon} plugin={plugin} onOpenHider={(): void => openHiderTab(0)} />
 		},
 		{
 			name: t("Right Ribbon"),
@@ -93,13 +102,17 @@ export default function settingTabComponent({ plugin, mobileMode }: { plugin: Co
 		},
 		{
 			name: t("Statusbar"),
-			tab: <CommandViewer manager={plugin.manager.statusBar} plugin={plugin} />
+			tab: <CommandViewer manager={plugin.manager.statusBar} plugin={plugin} onOpenHider={(): void => openHiderTab(1)} />
 		},
 		{
 			name: t("Page Header"),
 			tab: <CommandViewer manager={plugin.manager.pageHeader} plugin={plugin} />
+		},
+		{
+			name: t("Hide Commands"),
+			tab: <HidingViewer plugin={plugin} />
 		}
-	];
+	], []);
 
 	return (
 		<Fragment>

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

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