Merge pull request #1905 from TriliumNext/left-pane

Only expand/collapse the left pane of the focused window.
This commit is contained in:
Elian Doran 2025-05-10 18:20:51 +03:00 committed by GitHub
commit e10d135765
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 21 additions and 10 deletions

View File

@ -26,10 +26,16 @@ function setupLeftPaneResizer(leftPaneVisible: boolean) {
} }
if (leftPaneVisible) { if (leftPaneVisible) {
leftInstance = Split(["#left-pane", "#rest-pane"], { // Delayed initialization ensures that all DOM elements are fully rendered and part of the layout,
sizes: [leftPaneWidth, 100 - leftPaneWidth], // preventing Split.js from retrieving incorrect dimensions due to #left-pane not being rendered yet,
gutterSize: DEFAULT_GUTTER_SIZE, // which would cause the minSize setting to have no effect.
onDragEnd: (sizes) => options.save("leftPaneWidth", Math.round(sizes[0])) requestAnimationFrame(() => {
leftInstance = Split(["#left-pane", "#rest-pane"], {
sizes: [leftPaneWidth, 100 - leftPaneWidth],
gutterSize: DEFAULT_GUTTER_SIZE,
minSize: [150, 300],
onDragEnd: (sizes) => options.save("leftPaneWidth", Math.round(sizes[0]))
});
}); });
} }
} }

View File

@ -5,10 +5,13 @@ import { t } from "../../services/i18n.js";
import type { EventData } from "../../components/app_context.js"; import type { EventData } from "../../components/app_context.js";
export default class LeftPaneToggleWidget extends CommandButtonWidget { export default class LeftPaneToggleWidget extends CommandButtonWidget {
private currentLeftPaneVisible: boolean;
constructor(isHorizontalLayout: boolean) { constructor(isHorizontalLayout: boolean) {
super(); super();
this.currentLeftPaneVisible = options.is("leftPaneVisible");
this.class(isHorizontalLayout ? "toggle-button" : "launcher-button"); this.class(isHorizontalLayout ? "toggle-button" : "launcher-button");
this.settings.icon = () => { this.settings.icon = () => {
@ -21,7 +24,7 @@ export default class LeftPaneToggleWidget extends CommandButtonWidget {
this.settings.title = () => (options.is("leftPaneVisible") ? t("left_pane_toggle.hide_panel") : t("left_pane_toggle.show_panel")); this.settings.title = () => (options.is("leftPaneVisible") ? t("left_pane_toggle.hide_panel") : t("left_pane_toggle.show_panel"));
this.settings.command = () => (options.is("leftPaneVisible") ? "hideLeftPane" : "showLeftPane"); this.settings.command = () => (this.currentLeftPaneVisible ? "hideLeftPane" : "showLeftPane");
if (isHorizontalLayout) { if (isHorizontalLayout) {
this.settings.titlePlacement = "bottom"; this.settings.titlePlacement = "bottom";
@ -29,13 +32,15 @@ export default class LeftPaneToggleWidget extends CommandButtonWidget {
} }
refreshIcon() { refreshIcon() {
super.refreshIcon(); if (document.hasFocus() || this.currentLeftPaneVisible === true) {
super.refreshIcon();
splitService.setupLeftPaneResizer(options.is("leftPaneVisible")); splitService.setupLeftPaneResizer(this.currentLeftPaneVisible);
}
} }
entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
if (loadResults.isOptionReloaded("leftPaneVisible")) { if (loadResults.isOptionReloaded("leftPaneVisible") && document.hasFocus()) {
this.currentLeftPaneVisible = options.is("leftPaneVisible");
this.refreshIcon(); this.refreshIcon();
} }
} }

View File

@ -17,7 +17,7 @@ export default class LeftPaneContainer extends FlexContainer<Component> {
} }
entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) { entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
if (loadResults.isOptionReloaded("leftPaneVisible")) { if (loadResults.isOptionReloaded("leftPaneVisible") && document.hasFocus()) {
const visible = this.isEnabled(); const visible = this.isEnabled();
this.toggleInt(visible); this.toggleInt(visible);