feat(mermaid): change icon based on new layout

This commit is contained in:
Elian Doran 2025-03-22 10:43:24 +02:00
parent afa865765b
commit b54603b7d7
No known key found for this signature in database
2 changed files with 22 additions and 4 deletions

View File

@ -1,3 +1,4 @@
import type { EventData } from "../../components/app_context.js";
import options from "../../services/options.js"; import options from "../../services/options.js";
import NoteContextAwareWidget from "../note_context_aware_widget.js"; import NoteContextAwareWidget from "../note_context_aware_widget.js";
@ -5,7 +6,7 @@ const TPL = `
<button type="button" <button type="button"
class="switch-layout-button" class="switch-layout-button"
title="Switch layout"> title="Switch layout">
<span class="bx bxs-dock-bottom"></span> <span class="bx"></span>
</button> </button>
`; `;
@ -19,14 +20,30 @@ export default class SwitchSplitOrientationButton extends NoteContextAwareWidget
doRender(): void { doRender(): void {
super.doRender(); super.doRender();
this.$widget = $(TPL); this.$widget = $(TPL);
this.$widget.on("click", () => { this.$widget.on("click", () => {
const currentOrientation = options.get("splitEditorOrientation"); const currentOrientation = options.get("splitEditorOrientation");
options.save("splitEditorOrientation", toggleOrientation(currentOrientation)); options.save("splitEditorOrientation", toggleOrientation(currentOrientation));
}); });
this.#adjustIcon();
this.contentSized(); this.contentSized();
} }
#adjustIcon() {
const currentOrientation = options.get("splitEditorOrientation");
const upcomingOrientation = toggleOrientation(currentOrientation);
const $icon = this.$widget.find("span.bx");
$icon
.toggleClass("bxs-dock-bottom", upcomingOrientation === "vertical")
.toggleClass("bxs-dock-left", upcomingOrientation === "horizontal");
}
entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
if (loadResults.isOptionReloaded("splitEditorOrientation")) {
this.#adjustIcon();
}
}
} }
function toggleOrientation(orientation: string) { function toggleOrientation(orientation: string) {

View File

@ -153,8 +153,9 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
return; return;
} }
this.$widget.toggleClass("split-horizontal", layoutOrientation === "horizontal"); this.$widget
this.$widget.toggleClass("split-vertical", layoutOrientation === "vertical"); .toggleClass("split-horizontal", layoutOrientation === "horizontal")
.toggleClass("split-vertical", layoutOrientation === "vertical");
this.layoutOrientation = layoutOrientation as ("horizontal" | "vertical"); this.layoutOrientation = layoutOrientation as ("horizontal" | "vertical");
this.#setupResizer(); this.#setupResizer();
} }