From 637010577bd0be18f8ff5636ee96ae0a03f8abe7 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Thu, 27 Feb 2020 00:58:10 +0100
Subject: [PATCH] layout changes WIP

---
 src/public/javascripts/widgets/component.js   | 12 ++--
 .../javascripts/widgets/flex_container.js     | 59 +++++++++++++---
 src/public/javascripts/widgets/layout.js      | 69 ++++++++++---------
 .../javascripts/widgets/note_actions.js       |  6 ++
 src/public/javascripts/widgets/note_title.js  |  2 -
 .../widgets/protected_note_switch.js          |  6 +-
 .../javascripts/widgets/tab_caching_widget.js |  4 +-
 src/public/stylesheets/desktop.css            |  2 +-
 src/public/stylesheets/style.css              |  9 ---
 9 files changed, 101 insertions(+), 68 deletions(-)

diff --git a/src/public/javascripts/widgets/component.js b/src/public/javascripts/widgets/component.js
index 35020cfa4..5fec19f72 100644
--- a/src/public/javascripts/widgets/component.js
+++ b/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 {
-    /**
-     * @param {Component} parent
-     */
-    constructor(parent) {
+    constructor() {
         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;
 
diff --git a/src/public/javascripts/widgets/flex_container.js b/src/public/javascripts/widgets/flex_container.js
index cfe56b697..549618298 100644
--- a/src/public/javascripts/widgets/flex_container.js
+++ b/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) {
-        super(parent);
+    constructor(direction) {
+        super();
 
-        this.attrs = attrs;
-        this.children = widgetFactories.map(wf => wf(this));
+        if (!direction) {
+            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]);
-            }
-            else {
-                this.$widget.css(key, this.attrs[key]);
-            }
+            this.$widget.attr(key, this.attrs[key]);
         }
 
+        if (!this.children)
+
         for (const widget of this.children) {
             this.$widget.append(widget.render());
         }
diff --git a/src/public/javascripts/widgets/layout.js b/src/public/javascripts/widgets/layout.js
index 6d270d2ff..5d76556e6 100644
--- a/src/public/javascripts/widgets/layout.js
+++ b/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' }, [
-            parent => new FlexContainer(parent, { 'flex-direction': 'row' }, [
-                parent => new GlobalMenuWidget(parent),
-                parent => new TabRowWidget(parent),
-                parent => new TitleBarButtonsWidget(parent)
-            ]),
-            parent => new StandardTopWidget(parent),
-            parent => new FlexContainer(parent, { 'flex-direction': 'row', 'min-height': '0' }, [
-                parent => new SidePaneContainer(parent, 'left', [
-                    parent => new GlobalButtonsWidget(parent),
-                    parent => new SearchBoxWidget(parent),
-                    parent => new SearchResultsWidget(parent),
-                    parent => new NoteTreeWidget(parent)
+        const root = new FlexContainer(appContext)
+            .child(new FlexContainer('row')
+                .child(new GlobalMenuWidget())
+                .child(new TabRowWidget())
+                .child(new TitleBarButtonsWidget()))
+            .child(new StandardTopWidget())
+            new FlexContainer({ 'flex-direction': 'row', 'min-height': '0' }, [
+                new SidePaneContainer('left', [
+                    new GlobalButtonsWidget(),
+                    new SearchBoxWidget(),
+                    new SearchResultsWidget(),
+                    new NoteTreeWidget()
                 ]),
-                parent => new FlexContainer(parent, { id: 'center-pane', 'flex-direction': 'column' }, [
-                    parent => new FlexContainer(parent, { 'flex-direction': 'row' }, [
-                        parent => new TabCachingWidget(parent, parent => new NotePathsWidget(parent)),
-                        parent => new NoteTitleWidget(parent),
-                        parent => new RunScriptButtonsWidget(parent),
-                        parent => new ProtectedNoteSwitchWidget(parent),
-                        parent => new NoteTypeWidget(parent),
-                        parent => new NoteActionsWidget(parent)
+                new FlexContainer({ id: 'center-pane', 'flex-direction': 'column' }, [
+                    new FlexContainer({ 'flex-direction': 'row' }, [
+                        new TabCachingWidget(new NotePathsWidget()),
+                        new NoteTitleWidget(),
+                        new RunScriptButtonsWidget(),
+                        new ProtectedNoteSwitchWidget(),
+                        new NoteTypeWidget(),
+                        new NoteActionsWidget()
                     ]),
-                    parent => new TabCachingWidget(parent, parent => new PromotedAttributesWidget(parent)),
-                    parent => new TabCachingWidget(parent, parent => new NoteDetailWidget(parent))
+                    new TabCachingWidget(new PromotedAttributesWidget()),
+                    new TabCachingWidget(new NoteDetailWidget())
                 ]),
-                parent => new SidePaneContainer(parent, 'right', [
-                    parent => new NoteInfoWidget(parent),
-                    parent => new TabCachingWidget(parent, parent => new CalendarWidget(parent)),
-                    parent => new TabCachingWidget(parent, parent => new AttributesWidget(parent)),
-                    parent => new TabCachingWidget(parent, parent => new LinkMapWidget(parent)),
-                    parent => new TabCachingWidget(parent, parent => new NoteRevisionsWidget(parent)),
-                    parent => new TabCachingWidget(parent, parent => new SimilarNotesWidget(parent)),
-                    parent => new TabCachingWidget(parent, parent => new WhatLinksHereWidget(parent))
+                new SidePaneContainer('right', [
+                    new NoteInfoWidget(),
+                    new TabCachingWidget(() => new CalendarWidget()),
+                    new TabCachingWidget(() => new AttributesWidget()),
+                    new TabCachingWidget(() => new LinkMapWidget()),
+                    new TabCachingWidget(() => new NoteRevisionsWidget()),
+                    new TabCachingWidget(() => new SimilarNotesWidget()),
+                    new TabCachingWidget(() => new WhatLinksHereWidget())
                 ]),
-                parent => new SidePaneToggles(parent)
+                new SidePaneToggles()
             ])
-        ])
+        ]);
+
+        root.setParent(appContext);
+        
+        return root;
     }
 }
\ No newline at end of file
diff --git a/src/public/javascripts/widgets/note_actions.js b/src/public/javascripts/widgets/note_actions.js
index 1dbd2d082..ab6efd81b 100644
--- a/src/public/javascripts/widgets/note_actions.js
+++ b/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>
diff --git a/src/public/javascripts/widgets/note_title.js b/src/public/javascripts/widgets/note_title.js
index 81b4e661a..2c7c8316c 100644
--- a/src/public/javascripts/widgets/note_title.js
+++ b/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;
diff --git a/src/public/javascripts/widgets/protected_note_switch.js b/src/public/javascripts/widgets/protected_note_switch.js
index ab691b44d..4750bbefc 100644
--- a/src/public/javascripts/widgets/protected_note_switch.js
+++ b/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() {
diff --git a/src/public/javascripts/widgets/tab_caching_widget.js b/src/public/javascripts/widgets/tab_caching_widget.js
index 1b729372e..eb587d7f4 100644
--- a/src/public/javascripts/widgets/tab_caching_widget.js
+++ b/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) {
-        super(parent);
+    constructor(widgetFactory) {
+        super();
 
         this.widgetFactory = widgetFactory;
         this.widgets = {};
diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css
index 7aba0c8bb..3e48e3abf 100644
--- a/src/public/stylesheets/desktop.css
+++ b/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);
diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css
index 857847b6a..cd5d63521 100644
--- a/src/public/stylesheets/style.css
+++ b/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);