From efc84722a9e4ccd017fd7d4d252cf601ab6ef211 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Fri, 22 Nov 2024 21:05:45 +0200 Subject: [PATCH] feat(client): implement top launcher pane --- src/public/app/layouts/desktop_layout.js | 194 +++++++++--------- .../widgets/containers/launcher_container.js | 6 +- .../app/widgets/containers/root_container.js | 2 +- 3 files changed, 103 insertions(+), 99 deletions(-) diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index 4f0a2d2f5..68f365172 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -93,113 +93,117 @@ export default class DesktopLayout { appContext.noteTreeWidget = new NoteTreeWidget(); const launcherPaneIsHorizontal = true; - const launcherPane = new FlexContainer("column") + const launcherPane = new FlexContainer(launcherPaneIsHorizontal ? "row" : "column") .id("launcher-pane") - .css("width", "53px") + .css(launcherPaneIsHorizontal ? "height" : "width", "53px") .child(new GlobalMenuWidget()) - .child(new LauncherContainer()) + .child(new LauncherContainer(launcherPaneIsHorizontal)) .child(new LeftPaneToggleWidget()); return new RootContainer() .setParent(appContext) - .optChild(!launcherPaneIsHorizontal, launcherPane) - .child(new LeftPaneContainer() - .child(new QuickSearchWidget()) - .child(appContext.noteTreeWidget) - .child(...this.customWidgets.get('left-pane')) - ) - .child(new FlexContainer('column') - .id('rest-pane') + .optChild(launcherPaneIsHorizontal, launcherPane) + .child(new FlexContainer('row') .css("flex-grow", "1") - .child(new FlexContainer('row') - .child(new TabRowWidget()) - .child(new TitleBarButtonsWidget()) - .css('height', '40px') + .optChild(!launcherPaneIsHorizontal, launcherPane) + .child(new LeftPaneContainer() + .child(new QuickSearchWidget()) + .child(appContext.noteTreeWidget) + .child(...this.customWidgets.get('left-pane')) ) - .child(new FlexContainer('row') - .filling() - .collapsible() - .child(new FlexContainer('column') + .child(new FlexContainer('column') + .id('rest-pane') + .css("flex-grow", "1") + .child(new FlexContainer('row') + .child(new TabRowWidget()) + .child(new TitleBarButtonsWidget()) + .css('height', '40px') + ) + .child(new FlexContainer('row') .filling() .collapsible() - .id('center-pane') - .child(new SplitNoteContainer(() => - new NoteWrapperWidget() - .child(new FlexContainer('row').class('title-row') - .css("height", "50px") - .css("min-height", "50px") - .css('align-items', "center") - .cssBlock('.title-row > * { margin: 5px; }') - .child(new NoteIconWidget()) - .child(new NoteTitleWidget()) - .child(new SpacerWidget(0, 1)) - .child(new MovePaneButton(true)) - .child(new MovePaneButton(false)) - .child(new ClosePaneButton()) - .child(new CreatePaneButton()) - ) - .child( - new RibbonContainer() - // the order of the widgets matter. Some of these want to "activate" themselves - // when visible. When this happens to multiple of them, the first one "wins". - // promoted attributes should always win. - .ribbon(new ClassicEditorToolbar()) - .ribbon(new PromotedAttributesWidget()) - .ribbon(new ScriptExecutorWidget()) - .ribbon(new SearchDefinitionWidget()) - .ribbon(new EditedNotesWidget()) - .ribbon(new BookPropertiesWidget()) - .ribbon(new NotePropertiesWidget()) - .ribbon(new FilePropertiesWidget()) - .ribbon(new ImagePropertiesWidget()) - .ribbon(new BasicPropertiesWidget()) - .ribbon(new OwnedAttributeListWidget()) - .ribbon(new InheritedAttributesWidget()) - .ribbon(new NotePathsWidget()) - .ribbon(new NoteMapRibbonWidget()) - .ribbon(new SimilarNotesWidget()) - .ribbon(new NoteInfoWidget()) - .button(new RevisionsButton()) - .button(new NoteActionsWidget()) - ) - .child(new SharedInfoWidget()) - .child(new WatchedFileUpdateStatusWidget()) - .child(new FloatingButtons() - .child(new EditButton()) - .child(new ShowTocWidgetButton()) - .child(new ShowHighlightsListWidgetButton()) - .child(new CodeButtonsWidget()) - .child(new RelationMapButtons()) - .child(new CopyImageReferenceButton()) - .child(new SvgExportButton()) - .child(new BacklinksWidget()) - .child(new HideFloatingButtonsButton()) - ) - .child(new MermaidWidget()) - .child( - new ScrollingContainer() - .filling() - .child(new SqlTableSchemasWidget()) - .child(new NoteDetailWidget()) - .child(new NoteListWidget()) - .child(new SearchResultWidget()) - .child(new SqlResultWidget()) - .child(new ScrollPaddingWidget()) - ) - .child(new ApiLogWidget()) - .child(new FindWidget()) - .child( - ...this.customWidgets.get('node-detail-pane'), // typo, let's keep it for a while as BC - ...this.customWidgets.get('note-detail-pane') - ) + .child(new FlexContainer('column') + .filling() + .collapsible() + .id('center-pane') + .child(new SplitNoteContainer(() => + new NoteWrapperWidget() + .child(new FlexContainer('row').class('title-row') + .css("height", "50px") + .css("min-height", "50px") + .css('align-items', "center") + .cssBlock('.title-row > * { margin: 5px; }') + .child(new NoteIconWidget()) + .child(new NoteTitleWidget()) + .child(new SpacerWidget(0, 1)) + .child(new MovePaneButton(true)) + .child(new MovePaneButton(false)) + .child(new ClosePaneButton()) + .child(new CreatePaneButton()) + ) + .child( + new RibbonContainer() + // the order of the widgets matter. Some of these want to "activate" themselves + // when visible. When this happens to multiple of them, the first one "wins". + // promoted attributes should always win. + .ribbon(new ClassicEditorToolbar()) + .ribbon(new PromotedAttributesWidget()) + .ribbon(new ScriptExecutorWidget()) + .ribbon(new SearchDefinitionWidget()) + .ribbon(new EditedNotesWidget()) + .ribbon(new BookPropertiesWidget()) + .ribbon(new NotePropertiesWidget()) + .ribbon(new FilePropertiesWidget()) + .ribbon(new ImagePropertiesWidget()) + .ribbon(new BasicPropertiesWidget()) + .ribbon(new OwnedAttributeListWidget()) + .ribbon(new InheritedAttributesWidget()) + .ribbon(new NotePathsWidget()) + .ribbon(new NoteMapRibbonWidget()) + .ribbon(new SimilarNotesWidget()) + .ribbon(new NoteInfoWidget()) + .button(new RevisionsButton()) + .button(new NoteActionsWidget()) + ) + .child(new SharedInfoWidget()) + .child(new WatchedFileUpdateStatusWidget()) + .child(new FloatingButtons() + .child(new EditButton()) + .child(new ShowTocWidgetButton()) + .child(new ShowHighlightsListWidgetButton()) + .child(new CodeButtonsWidget()) + .child(new RelationMapButtons()) + .child(new CopyImageReferenceButton()) + .child(new SvgExportButton()) + .child(new BacklinksWidget()) + .child(new HideFloatingButtonsButton()) + ) + .child(new MermaidWidget()) + .child( + new ScrollingContainer() + .filling() + .child(new SqlTableSchemasWidget()) + .child(new NoteDetailWidget()) + .child(new NoteListWidget()) + .child(new SearchResultWidget()) + .child(new SqlResultWidget()) + .child(new ScrollPaddingWidget()) + ) + .child(new ApiLogWidget()) + .child(new FindWidget()) + .child( + ...this.customWidgets.get('node-detail-pane'), // typo, let's keep it for a while as BC + ...this.customWidgets.get('note-detail-pane') + ) + ) ) + .child(...this.customWidgets.get('center-pane')) + ) + .child(new RightPaneContainer() + .child(new TocWidget()) + .child(new HighlightsListWidget()) + .child(...this.customWidgets.get('right-pane')) ) - .child(...this.customWidgets.get('center-pane')) - ) - .child(new RightPaneContainer() - .child(new TocWidget()) - .child(new HighlightsListWidget()) - .child(...this.customWidgets.get('right-pane')) ) ) ) diff --git a/src/public/app/widgets/containers/launcher_container.js b/src/public/app/widgets/containers/launcher_container.js index c5fb7d27d..01bf52bf7 100644 --- a/src/public/app/widgets/containers/launcher_container.js +++ b/src/public/app/widgets/containers/launcher_container.js @@ -4,11 +4,11 @@ import appContext from "../../components/app_context.js"; import LauncherWidget from "./launcher.js"; export default class LauncherContainer extends FlexContainer { - constructor() { - super('column'); + constructor(horizontal) { + super(horizontal ? "row" : "column"); this.id('launcher-container'); - this.css('height', '100%'); + this.css(horizontal ? "width" : 'height', '100%'); this.filling(); this.load(); diff --git a/src/public/app/widgets/containers/root_container.js b/src/public/app/widgets/containers/root_container.js index e17967756..e6a4a4a7a 100644 --- a/src/public/app/widgets/containers/root_container.js +++ b/src/public/app/widgets/containers/root_container.js @@ -2,7 +2,7 @@ import FlexContainer from "./flex_container.js"; export default class RootContainer extends FlexContainer { constructor() { - super('row'); + super('column'); this.id('root-widget'); this.css('height', '100%');