mobile layout fixes

src/public/javascripts/mobile_old.js

@@ -87,52 +87,6 @@ async function showTree() {
     treeService.setTree($.ui.fancytree.getTree("#tree"));
 }
 
-$detail.on("click", ".note-menu-button", async e => {
-    // FIXME
-    const node = appContext.getMainNoteTree().getActiveNode();
-    const branch = treeCache.getBranch(node.data.branchId);
-    const note = await treeCache.getNote(node.data.noteId);
-    const parentNote = await treeCache.getNote(branch.parentNoteId);
-    const isNotRoot = note.noteId !== 'root';
-
-    const items = [
-        { title: "Insert note after", cmd: "insertNoteAfter", uiIcon: "plus",
-            enabled: isNotRoot && parentNote.type !== 'search' },
-        { title: "Insert child note", cmd: "insertChildNote", uiIcon: "plus",
-            enabled: note.type !== 'search' },
-        { title: "Delete this note", cmd: "delete", uiIcon: "trash",
-            enabled: isNotRoot && parentNote.type !== 'search' }
-    ];
-
-    contextMenuWidget.initContextMenu(e, {
-        getContextMenuItems: () => items,
-        selectContextMenuItem: async (event, cmd) => {
-            if (cmd === "insertNoteAfter") {
-                const parentNoteId = node.data.parentNoteId;
-                const isProtected = await treeService.getParentProtectedStatus(node);
-
-                noteCreateService.createNote(parentNoteId, {
-                    isProtected: isProtected,
-                    target: 'after',
-                    targetBranchId: node.data.branchId
-                });
-            }
-            else if (cmd === "insertChildNote") {
-                noteCreateService.createNote(node.data.noteId);
-            }
-            else if (cmd === "delete") {
-                if (await branchService.deleteNotes([node])) {
-                    // move to the tree
-                    togglePanes();
-                }
-            }
-            else {
-                throw new Error("Unrecognized command " + cmd);
-            }
-        }
-    });
-});
-
 $("#log-out-button").on('click', () => {
     $("#logout-form").trigger('submit');
 });

src/public/javascripts/widgets/close_detail_button.js

@@ -0,0 +1,18 @@
+import BasicWidget from "./basic_widget.js";
+
+const TPL = `
+<button type="button" class="close-detail-button action-button d-sm-none d-md-none d-lg-none d-xl-none" aria-label="Close">
+    <span aria-hidden="true">&times;</span>
+</button>`;
+
+class CloseDetailButtonWidget extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+
+        //this.$widget.find('.close-detail-button').on('click', );
+
+        return this.$widget;
+    }
+}
+
+export default CloseDetailButtonWidget;

src/public/javascripts/widgets/mobile_detail_menu.js

@@ -0,0 +1,46 @@
+import BasicWidget from "./basic_widget.js";
+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";
+
+const TPL = `<button type="button" class="action-button bx bx-menu"></button>`;
+
+class MobileDetailMenuWidget extends BasicWidget {
+    doRender() {
+        this.$widget = $(TPL);
+
+        this.$widget.on("click", async e => {
+            const note = appContext.tabManager.getActiveTabNote();
+
+            contextMenu.show({
+                x: e.pageX,
+                y: e.pageY,
+                items: [
+                    { title: "Insert child note", command: "insertChildNote", uiIcon: "plus",
+                        enabled: note.type !== 'search' },
+                    { title: "Delete this note", command: "delete", uiIcon: "trash",
+                        enabled: note.noteId !== 'root' }
+                ],
+                selectMenuItemHandler: async ({command}) => {
+                    if (command === "insertChildNote") {
+                        noteCreateService.createNote(note.noteId);
+                    }
+                    else if (command === "delete") {
+                        if (await branchService.deleteNotes(note.getBranchIds()[0])) {
+                            // move to the tree
+                            togglePanes();
+                        }
+                    }
+                    else {
+                        throw new Error("Unrecognized command " + command);
+                    }
+                }
+            });
+        });
+
+        return this.$widget;
+    }
+}
+
+export default MobileDetailMenuWidget;

src/public/javascripts/widgets/mobile_layout.js

@@ -3,6 +3,8 @@ 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";
+import CloseDetailButtonWidget from "./close_detail_button.js";
+import MobileDetailMenuWidget from "./mobile_detail_menu.js";
 
 export default class MobileLayout {
     getRootWidget(appContext) {
@@ -16,7 +18,10 @@ export default class MobileLayout {
                 .child(new NoteTreeWidget()))
             .child(new FlexContainer('column')
                 .class("d-none 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 NoteTitleWidget())
+                .child(new FlexContainer('row')
+                    .child(new MobileDetailMenuWidget())
+                    .child(new NoteTitleWidget())
+                    .child(new CloseDetailButtonWidget()))
                 .child(new NoteDetailWidget()));
     }
 }

src/public/stylesheets/mobile.css

@@ -56,4 +56,13 @@ span.fancytree-expander {
     margin-top: 4px;
     border-width: 2px;
     border-style: solid;
+}
+
+.action-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.5em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
 }

src/views/mobile.ejs

@@ -12,6 +12,7 @@
 
 <div id="toast-container" class="d-flex flex-column justify-content-center align-items-center"></div>
 
+<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
 
 <script type="text/javascript">
     window.baseApiUrl = 'api/';