layout changes WIP

src/public/javascripts/widgets/component.js

@@ -2,19 +2,19 @@ import utils from '../services/utils.js';
 import Mutex from "../services/mutex.js";
 
 export default class Component {
-    /**
+    constructor() {
-     * @param {Component} parent
-     */
-    constructor(parent) {
         this.componentId = `comp-${this.constructor.name}-` + utils.randomString(6);
-        /** @type Component */
-        this.parent = parent;
         /** @type Component[] */
         this.children = [];
         this.initialized = Promise.resolve();
         this.mutex = new Mutex();
     }
 
+    setParent(parent) {
+        /** @type Component */
+        this.parent = parent;
+    }
+
     async handleEvent(name, data) {
         await this.initialized;
 

src/public/javascripts/widgets/flex_container.js

@@ -1,25 +1,62 @@
 import BasicWidget from "./basic_widget.js";
 
 export default class FlexContainer extends BasicWidget {
-    constructor(parent, attrs, widgetFactories) {
+    constructor(direction) {
-        super(parent);
+        super();
 
-        this.attrs = attrs;
+        if (!direction) {
-        this.children = widgetFactories.map(wf => wf(this));
+            throw new Error(`Direction argument missing, use either 'row' or 'column'`);
+        }
+
+        this.attrs = {
+            style: 'display: flex;'
+        };
+
+        this.children = [];
+    }
+
+    id(id) {
+        this.attrs.id = id;
+        return this;
+    }
+
+    css(name, value) {
+        this.attrs.style += `${name}: ${value};`;
+        return this;
+    }
+
+    rowFlex() {
+        this.css('flex-direction', 'row');
+        return this;
+    }
+
+    columnFlex() {
+        this.css('flex-direction', 'column');
+        return this;
+    }
+
+    cssBlock(block) {
+        this.cssEl = block;
+        return this;
+    }
+
+    child(widgetFactory) {
+        this.children = widgetFactory(this);
     }
 
     doRender() {
-        this.$widget = $(`<div style="display: flex;">`);
+        this.$widget = $(`<div>`);
+
+        if (this.cssEl) {
+            this.$widget.append($(`<style>`).append(this.cssEl));
+        }
 
         for (const key in this.attrs) {
-            if (key === 'id') {
+            this.$widget.attr(key, this.attrs[key]);
-                this.$widget.attr(key, this.attrs[key]);
-            }
-            else {
-                this.$widget.css(key, this.attrs[key]);
-            }
         }
 
+        if (!this.children)
+
         for (const widget of this.children) {
             this.$widget.append(widget.render());
         }

src/public/javascripts/widgets/layout.js

@@ -28,43 +28,46 @@ import SidePaneToggles from "./side_pane_toggles.js";
 
 export default class Layout {
     getRootWidget(appContext) {
-        return new FlexContainer(appContext, { 'flex-direction': 'column', 'height': '100vh' }, [
+        const root = new FlexContainer(appContext)
-            parent => new FlexContainer(parent, { 'flex-direction': 'row' }, [
+            .child(new FlexContainer('row')
-                parent => new GlobalMenuWidget(parent),
+                .child(new GlobalMenuWidget())
-                parent => new TabRowWidget(parent),
+                .child(new TabRowWidget())
-                parent => new TitleBarButtonsWidget(parent)
+                .child(new TitleBarButtonsWidget()))
-            ]),
+            .child(new StandardTopWidget())
-            parent => new StandardTopWidget(parent),
+            new FlexContainer({ 'flex-direction': 'row', 'min-height': '0' }, [
-            parent => new FlexContainer(parent, { 'flex-direction': 'row', 'min-height': '0' }, [
+                new SidePaneContainer('left', [
-                parent => new SidePaneContainer(parent, 'left', [
+                    new GlobalButtonsWidget(),
-                    parent => new GlobalButtonsWidget(parent),
+                    new SearchBoxWidget(),
-                    parent => new SearchBoxWidget(parent),
+                    new SearchResultsWidget(),
-                    parent => new SearchResultsWidget(parent),
+                    new NoteTreeWidget()
-                    parent => new NoteTreeWidget(parent)
                 ]),
-                parent => new FlexContainer(parent, { id: 'center-pane', 'flex-direction': 'column' }, [
+                new FlexContainer({ id: 'center-pane', 'flex-direction': 'column' }, [
-                    parent => new FlexContainer(parent, { 'flex-direction': 'row' }, [
+                    new FlexContainer({ 'flex-direction': 'row' }, [
-                        parent => new TabCachingWidget(parent, parent => new NotePathsWidget(parent)),
+                        new TabCachingWidget(new NotePathsWidget()),
-                        parent => new NoteTitleWidget(parent),
+                        new NoteTitleWidget(),
-                        parent => new RunScriptButtonsWidget(parent),
+                        new RunScriptButtonsWidget(),
-                        parent => new ProtectedNoteSwitchWidget(parent),
+                        new ProtectedNoteSwitchWidget(),
-                        parent => new NoteTypeWidget(parent),
+                        new NoteTypeWidget(),
-                        parent => new NoteActionsWidget(parent)
+                        new NoteActionsWidget()
                     ]),
-                    parent => new TabCachingWidget(parent, parent => new PromotedAttributesWidget(parent)),
+                    new TabCachingWidget(new PromotedAttributesWidget()),
-                    parent => new TabCachingWidget(parent, parent => new NoteDetailWidget(parent))
+                    new TabCachingWidget(new NoteDetailWidget())
                 ]),
-                parent => new SidePaneContainer(parent, 'right', [
+                new SidePaneContainer('right', [
-                    parent => new NoteInfoWidget(parent),
+                    new NoteInfoWidget(),
-                    parent => new TabCachingWidget(parent, parent => new CalendarWidget(parent)),
+                    new TabCachingWidget(() => new CalendarWidget()),
-                    parent => new TabCachingWidget(parent, parent => new AttributesWidget(parent)),
+                    new TabCachingWidget(() => new AttributesWidget()),
-                    parent => new TabCachingWidget(parent, parent => new LinkMapWidget(parent)),
+                    new TabCachingWidget(() => new LinkMapWidget()),
-                    parent => new TabCachingWidget(parent, parent => new NoteRevisionsWidget(parent)),
+                    new TabCachingWidget(() => new NoteRevisionsWidget()),
-                    parent => new TabCachingWidget(parent, parent => new SimilarNotesWidget(parent)),
+                    new TabCachingWidget(() => new SimilarNotesWidget()),
-                    parent => new TabCachingWidget(parent, parent => new WhatLinksHereWidget(parent))
+                    new TabCachingWidget(() => new WhatLinksHereWidget())
                 ]),
-                parent => new SidePaneToggles(parent)
+                new SidePaneToggles()
             ])
-        ])
+        ]);
+
+        root.setParent(appContext);
+        
+        return root;
     }
 }

src/public/javascripts/widgets/note_actions.js

@@ -2,6 +2,12 @@ import TabAwareWidget from "./tab_aware_widget.js";
 
 const TPL = `
 <div class="dropdown note-actions">
+    <style>
+    .note-actions .dropdown-menu {
+        width: 15em;
+    }
+    </style>
+
     <button type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle">
         Note actions
         <span class="caret"></span>

src/public/javascripts/widgets/note_title.js

@@ -12,8 +12,6 @@ const TPL = `
     }
     
     .note-title-container input.note-title {
-        margin-left: 15px;
-        margin-right: 10px;
         font-size: 150%;
         border: 0;
         min-width: 5em;

src/public/javascripts/widgets/protected_note_switch.js

@@ -1,10 +1,8 @@
-import BasicWidget from "./basic_widget.js";
 import protectedSessionService from "../services/protected_session.js";
-import protectedSessionHolder from "../services/protected_session_holder.js";
 import TabAwareWidget from "./tab_aware_widget.js";
 
 const TPL = `
-<div class="btn-group btn-group-xs" style="margin-left: 10px; margin-right: 10px;">
+<div class="btn-group btn-group-xs">
     <button type="button"
             class="btn btn-sm icon-button bx bx-check-shield protect-button"
             title="Protected note can be viewed and edited only after entering password">
@@ -14,7 +12,7 @@ const TPL = `
             class="btn btn-sm icon-button bx bx-shield-x unprotect-button"
             title="Not protected note can be viewed without entering password">
     </button>
-</div>`;
+</div>`;``;
 
 export default class ProtectedNoteSwitchWidget extends TabAwareWidget {
     doRender() {

src/public/javascripts/widgets/tab_caching_widget.js

@@ -2,8 +2,8 @@ import TabAwareWidget from "./tab_aware_widget.js";
 import keyboardActionsService from "../services/keyboard_actions.js";
 
 export default class TabCachingWidget extends TabAwareWidget {
-    constructor(parent, widgetFactory) {
+    constructor(widgetFactory) {
-        super(parent);
+        super();
 
         this.widgetFactory = widgetFactory;
         this.widgets = {};

src/public/stylesheets/desktop.css

@@ -149,7 +149,7 @@ body {
 
 #right-pane .card-header {
     background: inherit;
-    padding: 5px 10px 5px 10px;
+    padding: 3px 10px 3px 10px;
     width: 99%; /* to give minimal right margin */
     background-color: var(--button-background-color);
     border-color: var(--button-border-color);

src/public/stylesheets/style.css

@@ -380,15 +380,6 @@ button.icon-button {
     max-height: 34px;
 }
 
-.note-actions {
-    margin-left: 10px;
-    margin-right: 10px;
-}
-
-.note-actions .dropdown-menu {
-    width: 15em;
-}
-
 .ck.ck-block-toolbar-button {
     transform: translateX(7px);
     color: var(--muted-text-color);