From c1d4d3fc8acdf932a2850d1f88ab1c4f84ed6c62 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Sun, 11 Dec 2022 21:27:03 +0100
Subject: [PATCH] mobile layout improvements

---
 src/public/app/layouts/mobile_layout.js       |  2 +
 src/public/app/widgets/buttons/edit_button.js |  2 +-
 .../mobile_widgets/mobile_global_buttons.js   | 45 +++++++++++++++----
 src/public/app/widgets/note_tree.js           |  3 +-
 4 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/src/public/app/layouts/mobile_layout.js b/src/public/app/layouts/mobile_layout.js
index 29f6269e2..0cedb2be8 100644
--- a/src/public/app/layouts/mobile_layout.js
+++ b/src/public/app/layouts/mobile_layout.js
@@ -18,6 +18,7 @@ import MermaidExportButton from "../widgets/floating_buttons/mermaid_export_butt
 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";
 
 const MOBILE_CSS = `
 <style>
@@ -144,6 +145,7 @@ export default class MobileLayout {
                             new NoteDetailWidget()
                                 .css('padding', '5px 20px 10px 0')
                         )
+                        .child(new NoteListWidget())
                         .child(new FilePropertiesWidget().css('font-size','smaller'))
                 )
             )
diff --git a/src/public/app/widgets/buttons/edit_button.js b/src/public/app/widgets/buttons/edit_button.js
index db4ddff54..30eb0fd90 100644
--- a/src/public/app/widgets/buttons/edit_button.js
+++ b/src/public/app/widgets/buttons/edit_button.js
@@ -5,7 +5,7 @@ import protectedSessionHolder from "../../services/protected_session_holder.js";
 
 export default class EditButton extends OnClickButtonWidget {
     isEnabled() {
-        return super.isEnabled() && this.noteContext;
+        return super.isEnabled() && this.note;
     }
 
     constructor() {
diff --git a/src/public/app/widgets/mobile_widgets/mobile_global_buttons.js b/src/public/app/widgets/mobile_widgets/mobile_global_buttons.js
index 16446e4bd..b6ea00db2 100644
--- a/src/public/app/widgets/mobile_widgets/mobile_global_buttons.js
+++ b/src/public/app/widgets/mobile_widgets/mobile_global_buttons.js
@@ -19,24 +19,51 @@ const WIDGET_TPL = `
         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>
 
-    <a data-trigger-command="createNoteIntoInbox" title="New note" class="icon-action bx bx-folder-plus"></a>
+    <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>
 
-    <a data-trigger-command="collapseTree" title="Collapse note tree" class="icon-action bx bx-layer-minus"></a>
-
-    <a data-trigger-command="scrollToActiveNote" title="Scroll to active note" class="icon-action bx bx-crosshair"></a>
-
-    <div class="dropdown">
-        <a title="Plugin buttons" class="icon-action bx bx-extension dropdown-toggle" data-toggle="dropdown"></a>
+    <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">
-        <a title="Global actions" class="icon-action bx bx-cog dropdown-toggle" data-toggle="dropdown"></a>
+    <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>
diff --git a/src/public/app/widgets/note_tree.js b/src/public/app/widgets/note_tree.js
index aad072994..444f979ba 100644
--- a/src/public/app/widgets/note_tree.js
+++ b/src/public/app/widgets/note_tree.js
@@ -238,7 +238,8 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
             this.reloadTreeFromCache();
         });
 
-        froca.initializedPromise.then(() => this.initFancyTree());
+        // note tree starts initializing already during render which is atypical
+        Promise.all([options.initializedPromise, froca.initializedPromise]).then(() => this.initFancyTree());
 
         this.setupNoteTitleTooltip();
     }