From 23322455a34aea37076d32760470306724f49f20 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Sun, 11 Dec 2022 22:26:18 +0100
Subject: [PATCH] mobile layout now has launchbar

---
 src/public/app/layouts/mobile_layout.js       | 105 ++++++++++--------
 src/public/app/services/server.js             |   2 +-
 src/public/app/widgets/buttons/global_menu.js |   2 +
 src/public/app/widgets/containers/launcher.js |   4 +-
 .../widgets/containers/launcher_container.js  |   2 +
 .../mobile_widgets/mobile_global_buttons.js   |  96 ----------------
 6 files changed, 64 insertions(+), 147 deletions(-)
 delete mode 100644 src/public/app/widgets/mobile_widgets/mobile_global_buttons.js

diff --git a/src/public/app/layouts/mobile_layout.js b/src/public/app/layouts/mobile_layout.js
index 0cedb2be8..c86a0bff7 100644
--- a/src/public/app/layouts/mobile_layout.js
+++ b/src/public/app/layouts/mobile_layout.js
@@ -3,7 +3,6 @@ import NoteTitleWidget from "../widgets/note_title.js";
 import NoteDetailWidget from "../widgets/note_detail.js";
 import QuickSearchWidget from "../widgets/quick_search.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
-import MobileGlobalButtonsWidget from "../widgets/mobile_widgets/mobile_global_buttons.js";
 import CloseDetailButtonWidget from "../widgets/mobile_widgets/close_detail_button.js";
 import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
@@ -19,6 +18,9 @@ import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js";
 import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating_buttons_button.js";
 import MermaidWidget from "../widgets/mermaid.js";
 import NoteListWidget from "../widgets/note_list.js";
+import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
+import LauncherContainer from "../widgets/containers/launcher_container.js";
+import RootContainer from "../widgets/containers/root_container.js";
 
 const MOBILE_CSS = `
 <style>
@@ -40,7 +42,7 @@ kbd {
     color: var(--main-text-color);
 }
 .quick-search {
-    margin: 55px 0px 0px 0px;
+    margin: 0;
 }
 .quick-search .dropdown-menu {
     max-width: 350px;
@@ -103,53 +105,60 @@ span.fancytree-expander {
 
 export default class MobileLayout {
     getRootWidget(appContext) {
-        return new FlexContainer('row').cssBlock(MOBILE_CSS)
+        return new RootContainer()
             .setParent(appContext)
-            .id('root-widget')
-            .css('height', '100%')
-            .child(new ScreenContainer("tree", 'column')
-                .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-4 col-xl-4")
-                .css("max-height", "100%")
-                .css('padding-left', 0)
-                .css('contain', 'content')
-                .child(new MobileGlobalButtonsWidget())
-                .child(new QuickSearchWidget())
-                .child(new NoteTreeWidget()
-                    .cssBlock(FANCYTREE_CSS)))
-            .child(new ScreenContainer("detail", "column")
-                .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8")
-                .css('max-height', '100%')
-                .child(new FlexContainer('row').contentSized()
-                    .css('font-size', 'larger')
-                    .css('align-items', 'center')
-                    .child(new MobileDetailMenuWidget().contentSized())
-                    .child(new NoteTitleWidget()
-                        .contentSized()
-                        .css("position: relative;")
-                        .css("top: 5px;")
-                    )
-                    .child(new CloseDetailButtonWidget().contentSized()))
-                .child(new FloatingButtons()
-                    .child(new EditButton())
-                    .child(new RelationMapButtons())
-                    .child(new MermaidExportButton())
-                    .child(new BacklinksWidget())
-                    .child(new HideFloatingButtonsButton())
-                )
-                .child(new MermaidWidget())
-                .child(
-                    new ScrollingContainer()
-                        .filling()
-                        .contentSized()
-                        .child(
-                            new NoteDetailWidget()
-                                .css('padding', '5px 20px 10px 0')
-                        )
-                        .child(new NoteListWidget())
-                        .child(new FilePropertiesWidget().css('font-size','smaller'))
-                )
+            .cssBlock(MOBILE_CSS)
+            .child(new FlexContainer("column")
+                .id("launcher-pane")
+                .css("width", "53px")
+                .child(new GlobalMenuWidget())
+                .child(new LauncherContainer())
             )
-            .child(new ProtectedSessionPasswordDialog())
-            .child(new ConfirmDialog());
+            .child(new FlexContainer("row")
+                .filling()
+                .child(new ScreenContainer("tree", 'column')
+                    .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-4 col-xl-4")
+                    .css("max-height", "100%")
+                    .css('padding-left', 0)
+                    .css('contain', 'content')
+                    .child(new QuickSearchWidget())
+                    .child(new NoteTreeWidget()
+                        .cssBlock(FANCYTREE_CSS)))
+                .child(new ScreenContainer("detail", "column")
+                    .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-8")
+                    .css('max-height', '100%')
+                    .child(new FlexContainer('row').contentSized()
+                        .css('font-size', 'larger')
+                        .css('align-items', 'center')
+                        .child(new MobileDetailMenuWidget().contentSized())
+                        .child(new NoteTitleWidget()
+                            .contentSized()
+                            .css("position: relative;")
+                            .css("top: 5px;")
+                        )
+                        .child(new CloseDetailButtonWidget().contentSized()))
+                    .child(new FloatingButtons()
+                        .child(new EditButton())
+                        .child(new RelationMapButtons())
+                        .child(new MermaidExportButton())
+                        .child(new BacklinksWidget())
+                        .child(new HideFloatingButtonsButton())
+                    )
+                    .child(new MermaidWidget())
+                    .child(
+                        new ScrollingContainer()
+                            .filling()
+                            .contentSized()
+                            .child(
+                                new NoteDetailWidget()
+                                    .css('padding', '5px 20px 10px 0')
+                            )
+                            .child(new NoteListWidget())
+                            .child(new FilePropertiesWidget().css('font-size','smaller'))
+                    )
+                )
+                .child(new ProtectedSessionPasswordDialog())
+                .child(new ConfirmDialog())
+            );
     }
 }
diff --git a/src/public/app/services/server.js b/src/public/app/services/server.js
index feded7a6e..0e76b270b 100644
--- a/src/public/app/services/server.js
+++ b/src/public/app/services/server.js
@@ -111,7 +111,7 @@ async function reportError(method, url, status, response) {
         throw new ValidationError(response);
     }
 
-    const message = "Error when calling " + method + " " + url + ": " + status + " - " + responseText;
+    const message = "Error when calling " + method + " " + url + ": " + status + " - " + response;
     toastService.showError(message);
     toastService.throwError(message);
 }
diff --git a/src/public/app/widgets/buttons/global_menu.js b/src/public/app/widgets/buttons/global_menu.js
index bde21b82a..fec1eb44b 100644
--- a/src/public/app/widgets/buttons/global_menu.js
+++ b/src/public/app/widgets/buttons/global_menu.js
@@ -263,6 +263,8 @@ export default class GlobalMenuWidget extends BasicWidget {
     }
 
     async updateVersionStatus() {
+        await options.initializedPromise;
+
         if (options.get("checkForUpdates") !== 'true') {
             return;
         }
diff --git a/src/public/app/widgets/containers/launcher.js b/src/public/app/widgets/containers/launcher.js
index 29f060c62..4b3a5147c 100644
--- a/src/public/app/widgets/containers/launcher.js
+++ b/src/public/app/widgets/containers/launcher.js
@@ -33,7 +33,7 @@ export default class LauncherWidget extends BasicWidget {
         const launcherType = note.getLabelValue("launcherType");
 
         if (launcherType === 'command') {
-            this.innerWidget = this.initCommandWidget(note)
+            this.innerWidget = this.initCommandLauncherWidget(note)
                 .class("launcher-button");
         } else if (launcherType === 'note') {
             this.innerWidget = new NoteLauncher(note)
@@ -56,7 +56,7 @@ export default class LauncherWidget extends BasicWidget {
         this.child(this.innerWidget);
     }
 
-    initCommandWidget(note) {
+    initCommandLauncherWidget(note) {
         return new CommandButtonWidget()
             .title(note.title)
             .icon(note.getIcon())
diff --git a/src/public/app/widgets/containers/launcher_container.js b/src/public/app/widgets/containers/launcher_container.js
index 9e27e08fb..8a5cf8fa2 100644
--- a/src/public/app/widgets/containers/launcher_container.js
+++ b/src/public/app/widgets/containers/launcher_container.js
@@ -15,6 +15,8 @@ export default class LauncherContainer extends FlexContainer {
     }
 
     async load() {
+        await froca.initializedPromise;
+
         this.children = [];
 
         const visibleLaunchersRoot = await froca.getNote('lbVisibleLaunchers', true);
diff --git a/src/public/app/widgets/mobile_widgets/mobile_global_buttons.js b/src/public/app/widgets/mobile_widgets/mobile_global_buttons.js
deleted file mode 100644
index b6ea00db2..000000000
--- a/src/public/app/widgets/mobile_widgets/mobile_global_buttons.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import BasicWidget from "../basic_widget.js";
-import protectedSessionHolder from "../../services/protected_session_holder.js";
-
-const WIDGET_TPL = `
-<div id="global-buttons">
-    <style>
-    #global-buttons {
-        display: flex;
-        flex-shrink: 0;
-        justify-content: space-around;
-        padding: 0px 0 3px 0;
-        font-size: larger;
-        position: absolute;
-        top: 8px;
-        width: 100%;
-    }
-
-    #plugin-buttons-placeholder {
-        font-size: smaller;
-        padding: 5px;
-    }
-    
-    #global-buttons .global-button {
-        border: 1px solid transparent;
-        width: 60px;
-        height: 40px;
-        background: var(--button-background-color);
-        border-radius: var(--button-border-radius);
-        color: var(--button-text-color);
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-    }
-    
-    #global-buttons .global-button > .bx {
-        font-size: 1.5em;
-        color: var(--button-text-color);
-        cursor: pointer;
-    }
-    
-    #global-buttons .global-button:hover {
-        text-decoration: none;
-        border-color: var(--button-border-color);
-    }
-    </style>
-
-    <button data-trigger-command="createNoteIntoInbox" title="New note" class="global-button">
-        <span class="bx bx-folder-plus"></span>
-    </button>
-    <button data-trigger-command="collapseTree" title="Collapse note tree" class="global-button">
-        <span class="bx bx-layer-minus">
-    </button>
-    <button data-trigger-command="scrollToActiveNote" title="Scroll to active note" class="global-button">
-        <span class="bx bx-crosshair"></span>
-    </button>
-
-    <div class="dropdown global-button">
-        <span title="Plugin buttons" class="bx bx-extension dropdown-toggle" data-toggle="dropdown"></span>
-
-        <div id="plugin-buttons" class="dropdown-menu dropdown-menu-right">
-            <p id="plugin-buttons-placeholder">No plugin buttons loaded yet.</p>
-        </div>
-    </div> 
-
-    <div class="dropdown global-button">
-        <span title="Global actions" class="bx bx-cog dropdown-toggle" data-toggle="dropdown"></span>
-
-        <div class="dropdown-menu dropdown-menu-right">
-            <a class="dropdown-item" data-trigger-command="switchToDesktopVersion"><span class="bx bx-laptop"></span> Switch to desktop version</a>
-            <a class="dropdown-item" data-trigger-command="enterProtectedSession"><span class="bx bx-shield-quarter"></span> Enter protected session</a>
-            <a class="dropdown-item" data-trigger-command="leaveProtectedSession"><span class="bx bx-check-shield"></span> Leave protected session</a>
-            <a class="dropdown-item" data-trigger-command="logout"><span class="bx bx-log-out"></span> Logout</a>
-        </div>
-    </div>
-</div>
-`;
-
-class MobileGlobalButtonsWidget extends BasicWidget {
-    doRender() {
-        this.$widget = $(WIDGET_TPL);
-        this.updateSettings();
-    }
-
-    protectedSessionStartedEvent() {
-        this.updateSettings();
-    }
-
-    updateSettings() {
-        const protectedSession = protectedSessionHolder.isProtectedSessionAvailable();
-
-        this.$widget.find('[data-trigger-command="enterProtectedSession"]').toggle(!protectedSession);
-        this.$widget.find('[data-trigger-command="leaveProtectedSession"]').toggle(protectedSession);
-    }
-}
-
-export default MobileGlobalButtonsWidget;