diff --git a/src/public/javascripts/services/app_context.js b/src/public/javascripts/services/app_context.js index dbfad1210..0dd66bdac 100644 --- a/src/public/javascripts/services/app_context.js +++ b/src/public/javascripts/services/app_context.js @@ -17,7 +17,6 @@ import WhatLinksHereWidget from "../widgets/what_links_here.js"; import AttributesWidget from "../widgets/attributes.js"; import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js"; import GlobalMenuWidget from "../widgets/global_menu.js"; -import RowFlexContainer from "../widgets/row_flex_container.js"; import StandardTopWidget from "../widgets/standard_top_widget.js"; import treeCache from "./tree_cache.js"; import NotePathsWidget from "../widgets/note_paths.js"; @@ -35,6 +34,7 @@ import treeService from "./tree.js"; import SidePaneContainer from "../widgets/side_pane_container.js"; import ZoomService from "./zoom.js"; import SidePaneToggles from "../widgets/side_pane_toggles.js"; +import FlexContainer from "../widgets/flex_container.js"; class AppContext { constructor() { @@ -130,76 +130,53 @@ class AppContext { showWidgets() { this.tabRow = new TabRowWidget(this); + this.noteTreeWidget = new NoteTreeWidget(this); - const topPaneWidgets = [ - new RowFlexContainer(this, [ + const rootContainer = new FlexContainer(this, { 'flex-direction': 'column', 'height': '100vh' }, [ + new FlexContainer(this, { 'flex-direction': 'row' }, [ new GlobalMenuWidget(this), this.tabRow, new TitleBarButtonsWidget(this) ]), - new StandardTopWidget(this) - ]; - - const $topPane = $("#top-pane"); - - for (const widget of topPaneWidgets) { - $topPane.append(widget.render()); - } - - this.noteTreeWidget = new NoteTreeWidget(this); - - const $centerPane = $("#center-pane"); - - const centerPaneWidgets = [ - new RowFlexContainer(this, [ - new TabCachingWidget(this, () => new NotePathsWidget(this)), - new NoteTitleWidget(this), - new RunScriptButtonsWidget(this), - new ProtectedNoteSwitchWidget(this), - new NoteTypeWidget(this), - new NoteActionsWidget(this) - ]), - new TabCachingWidget(this, () => new PromotedAttributesWidget(this)), - new TabCachingWidget(this, () => new NoteDetailWidget(this)) - ]; - - for (const widget of centerPaneWidgets) { - $centerPane.append(widget.render()); - } - - const leftPaneContainer = new SidePaneContainer(this, 'left', [ - new GlobalButtonsWidget(this), - new SearchBoxWidget(this), - new SearchResultsWidget(this), - this.noteTreeWidget + new StandardTopWidget(this), + new FlexContainer(this, { 'flex-direction': 'row' }, [ + new SidePaneContainer(this, 'left', [ + new GlobalButtonsWidget(this), + new SearchBoxWidget(this), + new SearchResultsWidget(this), + this.noteTreeWidget + ]), + new FlexContainer(this, { id: 'center-pane', 'flex-direction': 'column' }, [ + new FlexContainer(this, { 'flex-direction': 'row' }, [ + new TabCachingWidget(this, () => new NotePathsWidget(this)), + new NoteTitleWidget(this), + new RunScriptButtonsWidget(this), + new ProtectedNoteSwitchWidget(this), + new NoteTypeWidget(this), + new NoteActionsWidget(this) + ]), + new TabCachingWidget(this, () => new PromotedAttributesWidget(this)), + new TabCachingWidget(this, () => new NoteDetailWidget(this)) + ]), + new SidePaneContainer(this, 'right', [ + new NoteInfoWidget(this), + new TabCachingWidget(this, () => new CalendarWidget(this)), + new TabCachingWidget(this, () => new AttributesWidget(this)), + new TabCachingWidget(this, () => new LinkMapWidget(this)), + new TabCachingWidget(this, () => new NoteRevisionsWidget(this)), + new TabCachingWidget(this, () => new SimilarNotesWidget(this)), + new TabCachingWidget(this, () => new WhatLinksHereWidget(this)) + ]), + new SidePaneToggles(this) + ]) ]); - $centerPane.before(leftPaneContainer.render()); - - const rightPaneContainer = new SidePaneContainer(this, 'right', [ - new NoteInfoWidget(this), - new TabCachingWidget(this, () => new CalendarWidget(this)), - new TabCachingWidget(this, () => new AttributesWidget(this)), - new TabCachingWidget(this, () => new LinkMapWidget(this)), - new TabCachingWidget(this, () => new NoteRevisionsWidget(this)), - new TabCachingWidget(this, () => new SimilarNotesWidget(this)), - new TabCachingWidget(this, () => new WhatLinksHereWidget(this)) - ]); - - $centerPane.after(rightPaneContainer.render()); - - const sidePaneTogglesWidget = new SidePaneToggles(this); - - $centerPane.after(sidePaneTogglesWidget.render()); + $("body").append(rootContainer.render()); this.components = [ + rootContainer, new Entrypoints(), - new DialogEventComponent(this), - ...topPaneWidgets, - leftPaneContainer, - ...centerPaneWidgets, - rightPaneContainer, - sidePaneTogglesWidget + new DialogEventComponent(this) ]; if (utils.isElectron()) { @@ -207,6 +184,8 @@ class AppContext { import("./spell_check.js").then(spellCheckService => spellCheckService.initSpellCheck()); } + + this.trigger('initialRenderComplete'); } trigger(name, data, sync = false) { diff --git a/src/public/javascripts/widgets/flex_container.js b/src/public/javascripts/widgets/flex_container.js new file mode 100644 index 000000000..ae7f1f4d4 --- /dev/null +++ b/src/public/javascripts/widgets/flex_container.js @@ -0,0 +1,29 @@ +import BasicWidget from "./basic_widget.js"; + +export default class FlexContainer extends BasicWidget { + constructor(appContext, attrs, widgets) { + super(appContext); + + this.attrs = attrs; + this.children = widgets; + } + + render() { + this.$widget = $(`
`); + + for (const key in this.attrs) { + if (key === 'id') { + this.$widget.attr(key, this.attrs[key]); + } + else { + this.$widget.css(key, this.attrs[key]); + } + } + + for (const widget of this.children) { + this.$widget.append(widget.render()); + } + + return this.$widget; + } +} \ No newline at end of file diff --git a/src/public/javascripts/widgets/row_flex_container.js b/src/public/javascripts/widgets/row_flex_container.js deleted file mode 100644 index 5287c7b6f..000000000 --- a/src/public/javascripts/widgets/row_flex_container.js +++ /dev/null @@ -1,19 +0,0 @@ -import BasicWidget from "./basic_widget.js"; - -export default class RowFlexContainer extends BasicWidget { - constructor(appContext, widgets) { - super(appContext); - - this.children = widgets; - } - - render() { - this.$widget = $(`
`); - - for (const widget of this.children) { - this.$widget.append(widget.render()); - } - - return this.$widget; - } -} \ No newline at end of file diff --git a/src/public/javascripts/widgets/side_pane_toggles.js b/src/public/javascripts/widgets/side_pane_toggles.js index 45253f222..ccb337cfd 100644 --- a/src/public/javascripts/widgets/side_pane_toggles.js +++ b/src/public/javascripts/widgets/side_pane_toggles.js @@ -47,8 +47,6 @@ export default class SidePaneToggles extends BasicWidget { this.$widget.find(".show-left-pane-button").on('click', () => this.toggleAndSave('left', true)); this.$widget.find(".hide-left-pane-button").on('click', () => this.toggleAndSave('left', false)); - splitService.setupSplit(this.paneVisible.left, this.paneVisible.right); - return this.$widget; } @@ -69,4 +67,8 @@ export default class SidePaneToggles extends BasicWidget { this.trigger('sidebarVisibilityChanged', {side, show}); } + + initialRenderCompleteListener() { + splitService.setupSplit(this.paneVisible.left, this.paneVisible.right); + } } diff --git a/src/views/desktop.ejs b/src/views/desktop.ejs index b9f415ecd..298d81a39 100644 --- a/src/views/desktop.ejs +++ b/src/views/desktop.ejs @@ -10,40 +10,32 @@
- +<% include dialogs/about.ejs %> +<% include dialogs/add_link.ejs %> +<% include dialogs/attributes.ejs %> +<% include dialogs/branch_prefix.ejs %> +<% include dialogs/export.ejs %> +<% include dialogs/import.ejs %> +<% include dialogs/jump_to_note.ejs %> +<% include dialogs/markdown_import.ejs %> +<% include dialogs/note_revisions.ejs %> +<% include dialogs/note_source.ejs %> +<% include dialogs/options.ejs %> +<% include dialogs/protected_session_password.ejs %> +<% include dialogs/recent_changes.ejs %> +<% include dialogs/sql_console.ejs %> +<% include dialogs/info.ejs %> +<% include dialogs/prompt.ejs %> +<% include dialogs/confirm.ejs %> +<% include dialogs/help.ejs %> +<% include dialogs/note_info.ejs %> +<% include dialogs/link_map.ejs %> +<% include dialogs/clone_to.ejs %> +<% include dialogs/move_to.ejs %> +<% include dialogs/backend_log.ejs %> +<% include dialogs/include_note.ejs %>