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 NoteContextAwareWidget from "../note_context_aware_widget.js";
@ -5,7 +6,7 @@ const TPL = `
<button type="button"
class="switch-layout-button"
title="Switch layout">
<span class="bx bxs-dock-bottom"></span>
<span class="bx"></span>
</button>
`;
@ -19,14 +20,30 @@ export default class SwitchSplitOrientationButton extends NoteContextAwareWidget
doRender(): void {
super.doRender();
this.$widget = $(TPL);
this.$widget.on("click", () => {
const currentOrientation = options.get("splitEditorOrientation");
options.save("splitEditorOrientation", toggleOrientation(currentOrientation));
});
this.#adjustIcon();
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) {

View File

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