Tools/Notes
1
0
Fork 0
mirror of https://github.com/TriliumNext/Notes.git synced 2025-08-10 18:39:22 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(client): implement top launcher pane

Browse Source
This commit is contained in:
Elian Doran 2024-11-22 21:05:45 +02:00
parent 8300acd30b
commit efc84722a9
No known key found for this signature in database
3 changed files with 103 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

194
src/public/app/layouts/desktop_layout.js
View File

@ -93,113 +93,117 @@ export default class DesktopLayout {
appContext.noteTreeWidget = new NoteTreeWidget(); appContext.noteTreeWidget = new NoteTreeWidget();
const launcherPaneIsHorizontal = true; const launcherPaneIsHorizontal = true;
const launcherPane = new FlexContainer("column") const launcherPane = new FlexContainer(launcherPaneIsHorizontal ? "row" : "column")
.id("launcher-pane") .id("launcher-pane")
.css("width", "53px") .css(launcherPaneIsHorizontal ? "height" : "width", "53px")
.child(new GlobalMenuWidget()) .child(new GlobalMenuWidget())
.child(new LauncherContainer()) .child(new LauncherContainer(launcherPaneIsHorizontal))
.child(new LeftPaneToggleWidget()); .child(new LeftPaneToggleWidget());
return new RootContainer() return new RootContainer()
.setParent(appContext) .setParent(appContext)
.optChild(!launcherPaneIsHorizontal, launcherPane) .optChild(launcherPaneIsHorizontal, launcherPane)
.child(new LeftPaneContainer() .child(new FlexContainer('row')
.child(new QuickSearchWidget())
.child(appContext.noteTreeWidget)
.child(...this.customWidgets.get('left-pane'))
)
.child(new FlexContainer('column')
.id('rest-pane')
.css("flex-grow", "1") .css("flex-grow", "1")
.child(new FlexContainer('row') .optChild(!launcherPaneIsHorizontal, launcherPane)
.child(new TabRowWidget()) .child(new LeftPaneContainer()
.child(new TitleBarButtonsWidget()) .child(new QuickSearchWidget())
.css('height', '40px') .child(appContext.noteTreeWidget)
.child(...this.customWidgets.get('left-pane'))
) )
.child(new FlexContainer('row') .child(new FlexContainer('column')
.filling() .id('rest-pane')
.collapsible() .css("flex-grow", "1")
.child(new FlexContainer('column') .child(new FlexContainer('row')
.child(new TabRowWidget())
.child(new TitleBarButtonsWidget())
.css('height', '40px')
)
.child(new FlexContainer('row')
.filling() .filling()
.collapsible() .collapsible()
.id('center-pane') .child(new FlexContainer('column')
.child(new SplitNoteContainer(() => .filling()
new NoteWrapperWidget() .collapsible()
.child(new FlexContainer('row').class('title-row') .id('center-pane')
.css("height", "50px") .child(new SplitNoteContainer(() =>
.css("min-height", "50px") new NoteWrapperWidget()
.css('align-items', "center") .child(new FlexContainer('row').class('title-row')
.cssBlock('.title-row > * { margin: 5px; }') .css("height", "50px")
.child(new NoteIconWidget()) .css("min-height", "50px")
.child(new NoteTitleWidget()) .css('align-items', "center")
.child(new SpacerWidget(0, 1)) .cssBlock('.title-row > * { margin: 5px; }')
.child(new MovePaneButton(true)) .child(new NoteIconWidget())
.child(new MovePaneButton(false)) .child(new NoteTitleWidget())
.child(new ClosePaneButton()) .child(new SpacerWidget(0, 1))
.child(new CreatePaneButton()) .child(new MovePaneButton(true))
) .child(new MovePaneButton(false))
.child( .child(new ClosePaneButton())
new RibbonContainer() .child(new CreatePaneButton())
// 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". .child(
// promoted attributes should always win. new RibbonContainer()
.ribbon(new ClassicEditorToolbar()) // the order of the widgets matter. Some of these want to "activate" themselves
.ribbon(new PromotedAttributesWidget()) // when visible. When this happens to multiple of them, the first one "wins".
.ribbon(new ScriptExecutorWidget()) // promoted attributes should always win.
.ribbon(new SearchDefinitionWidget()) .ribbon(new ClassicEditorToolbar())
.ribbon(new EditedNotesWidget()) .ribbon(new PromotedAttributesWidget())
.ribbon(new BookPropertiesWidget()) .ribbon(new ScriptExecutorWidget())
.ribbon(new NotePropertiesWidget()) .ribbon(new SearchDefinitionWidget())
.ribbon(new FilePropertiesWidget()) .ribbon(new EditedNotesWidget())
.ribbon(new ImagePropertiesWidget()) .ribbon(new BookPropertiesWidget())
.ribbon(new BasicPropertiesWidget()) .ribbon(new NotePropertiesWidget())
.ribbon(new OwnedAttributeListWidget()) .ribbon(new FilePropertiesWidget())
.ribbon(new InheritedAttributesWidget()) .ribbon(new ImagePropertiesWidget())
.ribbon(new NotePathsWidget()) .ribbon(new BasicPropertiesWidget())
.ribbon(new NoteMapRibbonWidget()) .ribbon(new OwnedAttributeListWidget())
.ribbon(new SimilarNotesWidget()) .ribbon(new InheritedAttributesWidget())
.ribbon(new NoteInfoWidget()) .ribbon(new NotePathsWidget())
.button(new RevisionsButton()) .ribbon(new NoteMapRibbonWidget())
.button(new NoteActionsWidget()) .ribbon(new SimilarNotesWidget())
) .ribbon(new NoteInfoWidget())
.child(new SharedInfoWidget()) .button(new RevisionsButton())
.child(new WatchedFileUpdateStatusWidget()) .button(new NoteActionsWidget())
.child(new FloatingButtons() )
.child(new EditButton()) .child(new SharedInfoWidget())
.child(new ShowTocWidgetButton()) .child(new WatchedFileUpdateStatusWidget())
.child(new ShowHighlightsListWidgetButton()) .child(new FloatingButtons()
.child(new CodeButtonsWidget()) .child(new EditButton())
.child(new RelationMapButtons()) .child(new ShowTocWidgetButton())
.child(new CopyImageReferenceButton()) .child(new ShowHighlightsListWidgetButton())
.child(new SvgExportButton()) .child(new CodeButtonsWidget())
.child(new BacklinksWidget()) .child(new RelationMapButtons())
.child(new HideFloatingButtonsButton()) .child(new CopyImageReferenceButton())
) .child(new SvgExportButton())
.child(new MermaidWidget()) .child(new BacklinksWidget())
.child( .child(new HideFloatingButtonsButton())
new ScrollingContainer() )
.filling() .child(new MermaidWidget())
.child(new SqlTableSchemasWidget()) .child(
.child(new NoteDetailWidget()) new ScrollingContainer()
.child(new NoteListWidget()) .filling()
.child(new SearchResultWidget()) .child(new SqlTableSchemasWidget())
.child(new SqlResultWidget()) .child(new NoteDetailWidget())
.child(new ScrollPaddingWidget()) .child(new NoteListWidget())
) .child(new SearchResultWidget())
.child(new ApiLogWidget()) .child(new SqlResultWidget())
.child(new FindWidget()) .child(new ScrollPaddingWidget())
.child( )
...this.customWidgets.get('node-detail-pane'), // typo, let's keep it for a while as BC .child(new ApiLogWidget())
...this.customWidgets.get('note-detail-pane') .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'))
) )
) )
) )

6
src/public/app/widgets/containers/launcher_container.js
View File

@ -4,11 +4,11 @@ import appContext from "../../components/app_context.js";
import LauncherWidget from "./launcher.js"; import LauncherWidget from "./launcher.js";
export default class LauncherContainer extends FlexContainer { export default class LauncherContainer extends FlexContainer {
constructor() { constructor(horizontal) {
super('column'); super(horizontal ? "row" : "column");
this.id('launcher-container'); this.id('launcher-container');
this.css('height', '100%'); this.css(horizontal ? "width" : 'height', '100%');
this.filling(); this.filling();
this.load(); this.load();

2
src/public/app/widgets/containers/root_container.js
View File

@ -2,7 +2,7 @@ import FlexContainer from "./flex_container.js";
export default class RootContainer extends FlexContainer { export default class RootContainer extends FlexContainer {
constructor() { constructor() {
super('row'); super('column');
this.id('root-widget'); this.id('root-widget');
this.css('height', '100%'); this.css('height', '100%');