the whole view is now composed from a single root widget

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) {

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 = $(`<div style="display: flex;">`);
+
+        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;
+    }
+}

src/public/javascripts/widgets/row_flex_container.js

@@ -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 = $(`<div style="display: flex; flex-direction: row;">`);
-
-        for (const widget of this.children) {
-            this.$widget.append(widget.render());
-        }
-
-        return this.$widget;
-    }
-}

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);
+    }
 }

src/views/desktop.ejs

@@ -10,40 +10,32 @@
 
 <div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>
 
-<div id="container" style="display: none;">
-    <div id="top-pane"></div>
+<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
 
-    <div id="main-pane" style="display: flex; flex-grow: 1; flex-shrink: 1; min-height: 0;">
-        <div id="center-pane"></div>
-    </div>
-
-    <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
-
-    <% 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 %>
-</div>
+<% 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 %>
 
 <script type="text/javascript">
     window.baseApiUrl = 'api/';
@@ -88,10 +80,5 @@
 
 <link rel="stylesheet" type="text/css" href="libraries/boxicons/css/boxicons.min.css">
 
-<script type="text/javascript">
-    // we hide container initally because otherwise it is rendered first without CSS and then flickers into
-    // final form which is pretty ugly.
-    $("#container").show();
-</script>
 </body>
 </html>