fixes to mobile version (WIP)

src/public/javascripts/mobile.js

@@ -11,7 +11,6 @@ import treeUtils from "./services/tree_utils.js";
 const $leftPane = $("#left-pane");
 const $tree = $("#tree");
 const $detail = $("#detail");
-const $closeDetailButton = $("#close-detail-button");
 
 function togglePanes() {
     if (!$leftPane.is(":visible") || !$detail.is(":visible")) {
@@ -27,7 +26,7 @@ function showDetailPane() {
     }
 }
 
-$closeDetailButton.click(() => {
+$detail.on("click", ".close-detail-button",() => {
     // no page is opened
     document.location.hash = '-';
 
@@ -43,9 +42,8 @@ async function showTree() {
         source: tree,
         scrollParent: $tree,
         minExpandLevel: 2, // root can't be collapsed
-        activate: (event, data) => {
+        activate: async (event, data) => {
             const node = data.node;
-            const noteId = node.data.noteId;
 
             treeService.clearSelectedNodes();
 
@@ -72,7 +70,7 @@ async function showTree() {
     });
 }
 
-$("#note-menu-button").click(async e => {
+$detail.on("click", ".note-menu-button", async e => {
     const node = treeService.getActiveNode();
     const branch = await treeCache.getBranch(node.data.branchId);
     const note = await treeCache.getNote(node.data.noteId);
@@ -88,7 +86,9 @@ $("#note-menu-button").click(async e => {
             enabled: isNotRoot && parentNote.type !== 'search' }
     ];
 
-    contextMenuWidget.initContextMenu(e, items, async (event, cmd) => {
+    contextMenuWidget.initContextMenu(e, {
+        getContextMenuItems: () => items,
+        selectContextMenuItem: async (event, cmd) => {
             if (cmd === "insertNoteAfter") {
                 const parentNoteId = node.data.parentNoteId;
                 const isProtected = await treeUtils.getParentProtectedStatus(node);
@@ -107,6 +107,7 @@ $("#note-menu-button").click(async e => {
             else {
                 throw new Error("Unrecognized command " + cmd);
             }
+        }
     });
 });
 

src/public/javascripts/services/tab_context.js

@@ -56,7 +56,11 @@ class TabContext {
         this.noteChangeDisabled = false;
         this.isNoteChanged = false;
         this.attributes = new Attributes(this);
+
+        if (utils.isDesktop()) {
             this.noteType = new NoteTypeContext(this);
+        }
+
         this.components = {};
 
         this.$noteTitle.on('input', () => {

src/public/javascripts/services/tab_row.js

@@ -34,8 +34,6 @@ const defaultTapProperties = {
     title: 'New tab'
 };
 
-let instanceId = 0;
-
 class TabRow {
     constructor(el) {
         this.draggabillies = [];
@@ -45,10 +43,6 @@ class TabRow {
         this.el = el;
         this.hideTabRowForOneTab = false;
 
-        this.instanceId = instanceId;
-        this.el.setAttribute('data-note-tab-row-instance-id', this.instanceId);
-        instanceId += 1;
-
         this.setupStyleEl();
         this.setupEvents();
         this.layoutTabs();
@@ -156,11 +150,7 @@ class TabRow {
         const {tabPositions, newTabPosition} = this.getTabPositions();
 
         tabPositions.forEach((position, i) => {
-            styleHTML += `
+            styleHTML += `.note-tab:nth-child(${ i + 1 }) { transform: translate3d(${ position }px, 0, 0)} `;
-      .note-tab-row[data-note-tab-row-instance-id="${ this.instanceId }"] .note-tab:nth-child(${ i + 1 }) {
-        transform: translate3d(${ position }px, 0, 0)
-      }
-    `
         });
 
         styleHTML += `.note-new-tab { transform: translate3d(${ newTabPosition }px, 0, 0) } `;

src/public/stylesheets/desktop.css

@@ -169,6 +169,15 @@ li.dropdown-submenu:hover > ul.dropdown-menu {
     margin-top: 10px;
 }
 
+.note-title {
+    margin-left: 15px;
+    margin-right: 10px;
+    font-size: 150%;
+    border: 0;
+    width: 5em;
+    flex-grow: 100;
+}
+
 .note-tab-row {
     box-sizing: border-box;
     position: relative;

src/public/stylesheets/mobile.css

@@ -40,14 +40,12 @@ html, body {
     flex-direction: column;
 }
 
-#detail-content {
+#note-tab-container {
-    position: relative;
+    height: 100%;
-    overflow: auto;
+}
-    flex-direction: column;
+
-    /* for some reason detail overflows a little bit so we subtract few pixels */
+.note-tab-row {
-    height: calc(100% - 25px);
+    display: none !important;
-    /* large left padding is necessary for ckeditor gutter in detail-only (smartphone) layout */
-    padding-left: 35px;
 }
 
 .note-title-row {
@@ -104,3 +102,14 @@ kbd {
     border-width: 2px;
     border-style: solid;
 }
+
+.note-detail-component-wrapper {
+    position: relative;
+    overflow: auto;
+    flex-direction: column;
+    /* for some reason detail overflows a little bit so we subtract few pixels */
+    height: calc(100% - 25px);
+    /* large left padding is necessary for ckeditor gutter in detail-only (smartphone) layout */
+    padding-left: 35px;
+    padding-top: 10px;
+}

src/public/stylesheets/style.css

@@ -52,15 +52,6 @@ button.close:hover {
     color: var(--main-text-color) !important;
 }
 
-.note-title {
-    margin-left: 15px;
-    margin-right: 10px;
-    font-size: 150%;
-    border: 0;
-    width: 5em;
-    flex-grow: 100;
-}
-
 ul.fancytree-container {
     /* override specific size from fancytree.css */
     font-family: inherit !important;

src/views/mobile.ejs

@@ -32,23 +32,26 @@
     </div>
 
     <div id="detail" 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">
-        <div id="note-title-row">
+        <div class="note-tab-row">
-            <button type="button" id="note-menu-button" class="action-button jam jam-align-justify"></button>
+            <div class="note-tab-row-content"></div>
+        </div>
 
-            <input autocomplete="off" value="" id="note-title" class="form-control" tabindex="1">
+        <div id="note-tab-container">
+            <div class="note-tab-content note-tab-content-template">
+                <div class="note-title-row">
+                    <button type="button" class="note-menu-button action-button jam jam-align-justify"></button>
 
-            <button type="button" id="close-detail-button" class="action-button d-sm-none d-md-none d-lg-none d-xl-none" aria-label="Close">
+                    <input autocomplete="off" value="" class="form-control note-title" tabindex="1">
+
+                    <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>
                 </div>
 
-        <div style="position: relative; height: 100%;"> <!-- This div here is for saved indicator to have suitable parent -->
+                <div class="note-detail-component-wrapper">
-            <span id="saved-indicator" title="All changes have been saved" class="jam jam-check"></span>
+                    <div class="note-detail-text note-detail-component" tabindex="10000"></div>
 
-            <div id="detail-content">
+                    <div class="note-detail-code note-detail-component"></div>
-                <div id="note-detail-text" class="note-detail-component" tabindex="10000"></div>
-
-                <div id="note-detail-code" class="note-detail-component"></div>
 
                     <% include details/search.ejs %>
 
@@ -64,6 +67,7 @@
                 </div>
             </div>
         </div>
+    </div>
 
     <% include dialogs/protected_session_password.ejs %>