From 607bdfef92214351732fc0f9da7e442e32fad053 Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Sun, 1 Mar 2020 11:53:02 +0100
Subject: [PATCH] mobile global buttons

---
 src/public/javascripts/mobile_old.js          |  6 ---
 .../javascripts/services/entrypoints.js       |  9 +++++
 .../widgets/mobile_global_buttons.js          | 38 +++++++++++++++++++
 .../javascripts/widgets/mobile_layout.js      |  3 +-
 src/public/javascripts/widgets/note_tree.js   |  6 +--
 src/public/stylesheets/mobile.css             | 11 ------
 src/views/mobile.ejs                          |  1 -
 7 files changed, 50 insertions(+), 24 deletions(-)
 create mode 100644 src/public/javascripts/widgets/mobile_global_buttons.js

diff --git a/src/public/javascripts/mobile_old.js b/src/public/javascripts/mobile_old.js
index a0ea7f9b4..7cb23da77 100644
--- a/src/public/javascripts/mobile_old.js
+++ b/src/public/javascripts/mobile_old.js
@@ -133,12 +133,6 @@ $detail.on("click", ".note-menu-button", async e => {
     });
 });
 
-$("#switch-to-desktop-button").on('click', () => {
-    utils.setCookie('trilium-device', 'desktop');
-
-    utils.reloadApp();
-});
-
 $("#log-out-button").on('click', () => {
     $("#logout-form").trigger('submit');
 });
diff --git a/src/public/javascripts/services/entrypoints.js b/src/public/javascripts/services/entrypoints.js
index 4ba09e46d..a8f3e3a69 100644
--- a/src/public/javascripts/services/entrypoints.js
+++ b/src/public/javascripts/services/entrypoints.js
@@ -7,6 +7,7 @@ import server from "./server.js";
 import appContext from "./app_context.js";
 import Component from "../widgets/component.js";
 import toastService from "./toast.js";
+import noteCreateService from "./note_create.js";
 
 export default class Entrypoints extends Component {
     constructor() {
@@ -158,4 +159,12 @@ export default class Entrypoints extends Component {
         // when the result list does not change with a query
         toastService.showMessage("Search finished successfully.");
     }
+
+    async switchToDesktopVersionCommand() {
+        utils.setCookie('trilium-device', 'desktop');
+
+        utils.reloadApp();
+    }
+
+    createTopLevelNoteCommand() { noteCreateService.createNewTopLevelNote(); }
 }
diff --git a/src/public/javascripts/widgets/mobile_global_buttons.js b/src/public/javascripts/widgets/mobile_global_buttons.js
new file mode 100644
index 000000000..5952c466c
--- /dev/null
+++ b/src/public/javascripts/widgets/mobile_global_buttons.js
@@ -0,0 +1,38 @@
+import BasicWidget from "./basic_widget.js";
+
+const WIDGET_TPL = `
+<div id="global-buttons">
+    <style>
+    #global-buttons {
+        display: flex;
+        flex-shrink: 0;
+        justify-content: space-around;
+        padding: 3px 0 3px 0;
+        margin: 0 10px 0 16px;
+    }
+    </style>
+
+    <a data-trigger-command="createTopLevelNote" title="Create new top level note" class="icon-action bx bx-folder-plus"></a>
+
+    <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="Global actions" class="icon-action bx bx-cog dropdown-toggle" data-toggle="dropdown"></a>
+
+        <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="logout"><span class="bx bx-log-out"></span> Logout</a>
+        </div>
+    </div>
+</div>
+`;
+
+class MobileGlobalButtonsWidget extends BasicWidget {
+    doRender() {
+        return this.$widget = $(WIDGET_TPL);
+    }
+}
+
+export default MobileGlobalButtonsWidget;
\ No newline at end of file
diff --git a/src/public/javascripts/widgets/mobile_layout.js b/src/public/javascripts/widgets/mobile_layout.js
index 5221d9461..54e004204 100644
--- a/src/public/javascripts/widgets/mobile_layout.js
+++ b/src/public/javascripts/widgets/mobile_layout.js
@@ -2,6 +2,7 @@ import FlexContainer from "./flex_container.js";
 import NoteTitleWidget from "./note_title.js";
 import NoteDetailWidget from "./note_detail.js";
 import NoteTreeWidget from "./note_tree.js";
+import MobileGlobalButtonsWidget from "./mobile_global_buttons.js";
 
 export default class MobileLayout {
     getRootWidget(appContext) {
@@ -10,7 +11,7 @@ export default class MobileLayout {
             .id('root-widget')
             .css('height', '100vh')
             .child(new FlexContainer('column')
-                // .child(/* buttons */)
+                .child(new MobileGlobalButtonsWidget())
                 .child(new NoteTreeWidget()))
             .child(new FlexContainer('column')
                 .child(new NoteTitleWidget())
diff --git a/src/public/javascripts/widgets/note_tree.js b/src/public/javascripts/widgets/note_tree.js
index 4e698083e..c88cab5c8 100644
--- a/src/public/javascripts/widgets/note_tree.js
+++ b/src/public/javascripts/widgets/note_tree.js
@@ -103,9 +103,7 @@ export default class NoteTreeWidget extends TabAwareWidget {
             },
             expand: (event, data) => this.setExpandedToServer(data.node.data.branchId, true),
             collapse: (event, data) => this.setExpandedToServer(data.node.data.branchId, false),
-            hotkeys: {
-                keydown: await this.getHotKeys()
-            },
+            hotkeys: utils.isMobile() ? undefined : { keydown: await this.getHotKeys() },
             dnd5: {
                 autoExpandMS: 600,
                 dragStart: (node, data) => {
@@ -399,8 +397,6 @@ export default class NoteTreeWidget extends TabAwareWidget {
         await this.tree.reload(notes);
     }
 
-    createTopLevelNoteCommand() { noteCreateService.createNewTopLevelNote(); }
-
     collapseTreeCommand() { this.collapseTree(); }
 
     isEnabled() {
diff --git a/src/public/stylesheets/mobile.css b/src/public/stylesheets/mobile.css
index fa4d15aa6..683cbd9b4 100644
--- a/src/public/stylesheets/mobile.css
+++ b/src/public/stylesheets/mobile.css
@@ -5,17 +5,6 @@ html, body {
     padding: 0;
 }
 
-#container-row {
-    height: 100%;
-}
-
-#global-buttons {
-    display: flex;
-    flex-shrink: 0;
-    justify-content: space-around;
-    padding: 3px 0 3px 0;
-    margin: 0 10px 0 16px;
-}
 
 .tree {
     width: 100%;
diff --git a/src/views/mobile.ejs b/src/views/mobile.ejs
index 5fc15cae9..e9320559a 100644
--- a/src/views/mobile.ejs
+++ b/src/views/mobile.ejs
@@ -13,7 +13,6 @@
 <div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>
 
 
-
 <script type="text/javascript">
     window.baseApiUrl = 'api/';
     window.device = "mobile";