mobile layout now has launchbar

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,16 +105,22 @@ span.fancytree-expander {
 
 export default class MobileLayout {
     getRootWidget(appContext) {
-        return new FlexContainer('row').cssBlock(MOBILE_CSS)
+        return new RootContainer()
             .setParent(appContext)
-            .id('root-widget')
+            .cssBlock(MOBILE_CSS)
-            .css('height', '100%')
+            .child(new FlexContainer("column")
+                .id("launcher-pane")
+                .css("width", "53px")
+                .child(new GlobalMenuWidget())
+                .child(new LauncherContainer())
+            )
+            .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 MobileGlobalButtonsWidget())
                     .child(new QuickSearchWidget())
                     .child(new NoteTreeWidget()
                         .cssBlock(FANCYTREE_CSS)))
@@ -150,6 +158,7 @@ export default class MobileLayout {
                     )
                 )
                 .child(new ProtectedSessionPasswordDialog())
-            .child(new ConfirmDialog());
+                .child(new ConfirmDialog())
+            );
     }
 }

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

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

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

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

src/public/app/widgets/mobile_widgets/mobile_global_buttons.js

@@ -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;