mobile layout fixes + fix mobile delete note

src/public/app/layouts/mobile_layout.js

@@ -76,13 +76,13 @@ export default class MobileLayout {
                 .child(new NoteTreeWidget("main").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")
-                .child(new FlexContainer('row')
+                .child(new FlexContainer('row').overflowing()
+                    .css('font-size', 'larger')
+                    .css('align-items', 'center')
                     .child(new MobileDetailMenuWidget())
-                    .child(new NoteTitleWidget()
-                        .css('padding', '10px')
-                        .css('font-size', 'larger'))
+                    .child(new NoteTitleWidget())
                     .child(new CloseDetailButtonWidget()))
                 .child(new NoteDetailWidget()
                     .css('padding', '5px 20px 10px 0')));
     }
-}
+}

src/public/app/services/tree.js

@@ -158,6 +158,12 @@ function getNoteIdFromNotePath(notePath) {
     return lastSegment.split("-")[0];
 }
 
+async function getBranchIdFromNotePath(notePath) {
+    const {noteId, parentNoteId} = getNoteIdAndParentIdFromNotePath(notePath);
+
+    return await treeCache.getBranchId(parentNoteId, noteId);
+}
+
 function getNoteIdAndParentIdFromNotePath(notePath) {
     if (notePath === 'root') {
         return {
@@ -185,7 +191,7 @@ function getNoteIdAndParentIdFromNotePath(notePath) {
     return {
         parentNoteId,
         noteId
-    }
+    };
 }
 
 function getNotePath(node) {
@@ -286,6 +292,7 @@ export default {
     getNotePath,
     getNoteIdFromNotePath,
     getNoteIdAndParentIdFromNotePath,
+    getBranchIdFromNotePath,
     getNoteTitle,
     getNotePathTitle,
     getHashValueFromAddress,

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

@@ -1,13 +1,14 @@
 import BasicWidget from "../basic_widget.js";
 
 const TPL = `
-<button type="button" class="action-button d-sm-none d-md-none d-lg-none d-xl-none" aria-label="Close">
+<button type="button" class="action-button d-sm-none d-md-none d-lg-none d-xl-none" aria-label="Close" style="padding-top: 10px;">
     <span aria-hidden="true">&times;</span>
 </button>`;
 
 class CloseDetailButtonWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
+        this.overflowing();
 
         this.$widget.on('click', () => this.triggerCommand('setActiveScreen', {screen:'tree'}));
     }

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

@@ -3,12 +3,14 @@ import appContext from "../../services/app_context.js";
 import contextMenu from "../../services/context_menu.js";
 import noteCreateService from "../../services/note_create.js";
 import branchService from "../../services/branches.js";
+import treeService from "../../services/tree.js";
 
-const TPL = `<button type="button" class="action-button bx bx-menu"></button>`;
+const TPL = `<button type="button" class="action-button bx bx-menu" style="padding-top: 10px;"></button>`;
 
 class MobileDetailMenuWidget extends BasicWidget {
     doRender() {
         this.$widget = $(TPL);
+        this.overflowing();
 
         this.$widget.on("click", async e => {
             const note = appContext.tabManager.getActiveTabNote();
@@ -27,9 +29,15 @@ class MobileDetailMenuWidget extends BasicWidget {
                         noteCreateService.createNote(note.noteId);
                     }
                     else if (command === "delete") {
-                        if (await branchService.deleteNotes(note.getBranchIds()[0])) {
-                            // move to the tree
-                            togglePanes();
+                        const notePath = appContext.tabManager.getActiveTabNotePath();
+                        const branchId = await treeService.getBranchIdFromNotePath(notePath);
+
+                        if (!branchId) {
+                            throw new Error(`Cannot get branchId for notePath ${notePath}`);
+                        }
+
+                        if (await branchService.deleteNotes([branchId])) {
+                            this.triggerCommand('setActiveScreen', {screen:'tree'})
                         }
                     }
                     else {

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

@@ -32,8 +32,9 @@ const WIDGET_TPL = `
 
 class MobileGlobalButtonsWidget extends BasicWidget {
     doRender() {
-        return this.$widget = $(WIDGET_TPL);
+        this.$widget = $(WIDGET_TPL);
+        this.overflowing();
     }
 }
 
-export default MobileGlobalButtonsWidget;
+export default MobileGlobalButtonsWidget;

src/views/mobile.ejs

@@ -101,6 +101,8 @@
 
 <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
 
+<%- include('dialogs/confirm.ejs') %>
+
 <script type="text/javascript">
     window.baseApiUrl = 'api/';
     window.device = "mobile";