From 2178f8232477d26b67b9127b70d17ab8c5590efd Mon Sep 17 00:00:00 2001 From: zadam Date: Mon, 13 May 2019 23:08:59 +0200 Subject: [PATCH] fixes to mobile version (WIP) --- src/public/javascripts/mobile.js | 43 ++++++++++--------- .../javascripts/services/tab_context.js | 6 ++- src/public/javascripts/services/tab_row.js | 14 +----- src/public/stylesheets/desktop.css | 9 ++++ src/public/stylesheets/mobile.css | 25 +++++++---- src/public/stylesheets/style.css | 9 ---- src/views/mobile.ejs | 42 ++++++++++-------- 7 files changed, 78 insertions(+), 70 deletions(-) diff --git a/src/public/javascripts/mobile.js b/src/public/javascripts/mobile.js index 049a0dddf..575d4e90d 100644 --- a/src/public/javascripts/mobile.js +++ b/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,24 +86,27 @@ $("#note-menu-button").click(async e => { enabled: isNotRoot && parentNote.type !== 'search' } ]; - contextMenuWidget.initContextMenu(e, items, async (event, cmd) => { - if (cmd === "insertNoteAfter") { - const parentNoteId = node.data.parentNoteId; - const isProtected = await treeUtils.getParentProtectedStatus(node); + contextMenuWidget.initContextMenu(e, { + getContextMenuItems: () => items, + selectContextMenuItem: async (event, cmd) => { + if (cmd === "insertNoteAfter") { + const parentNoteId = node.data.parentNoteId; + const isProtected = await treeUtils.getParentProtectedStatus(node); - treeService.createNote(node, parentNoteId, 'after', { isProtected: isProtected }); - } - else if (cmd === "insertChildNote") { - treeService.createNote(node, node.data.noteId, 'into'); - } - else if (cmd === "delete") { - treeChangesService.deleteNodes([node]); + treeService.createNote(node, parentNoteId, 'after', { isProtected: isProtected }); + } + else if (cmd === "insertChildNote") { + treeService.createNote(node, node.data.noteId, 'into'); + } + else if (cmd === "delete") { + treeChangesService.deleteNodes([node]); - // move to the tree - togglePanes(); - } - else { - throw new Error("Unrecognized command " + cmd); + // move to the tree + togglePanes(); + } + else { + throw new Error("Unrecognized command " + cmd); + } } }); }); diff --git a/src/public/javascripts/services/tab_context.js b/src/public/javascripts/services/tab_context.js index ff117038d..74406c6e9 100644 --- a/src/public/javascripts/services/tab_context.js +++ b/src/public/javascripts/services/tab_context.js @@ -56,7 +56,11 @@ class TabContext { this.noteChangeDisabled = false; this.isNoteChanged = false; this.attributes = new Attributes(this); - this.noteType = new NoteTypeContext(this); + + if (utils.isDesktop()) { + this.noteType = new NoteTypeContext(this); + } + this.components = {}; this.$noteTitle.on('input', () => { diff --git a/src/public/javascripts/services/tab_row.js b/src/public/javascripts/services/tab_row.js index d70850d83..a2bec4e0b 100644 --- a/src/public/javascripts/services/tab_row.js +++ b/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,14 +150,10 @@ class TabRow { const {tabPositions, newTabPosition} = this.getTabPositions(); tabPositions.forEach((position, i) => { - styleHTML += ` - .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-tab:nth-child(${ i + 1 }) { transform: translate3d(${ position }px, 0, 0)} `; }); - styleHTML += `.note-new-tab { transform: translate3d(${ newTabPosition }px, 0, 0) }`; + styleHTML += `.note-new-tab { transform: translate3d(${ newTabPosition }px, 0, 0) } `; this.styleEl.innerHTML = styleHTML; } diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css index b928e15bf..69892935d 100644 --- a/src/public/stylesheets/desktop.css +++ b/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; diff --git a/src/public/stylesheets/mobile.css b/src/public/stylesheets/mobile.css index 6e6ceeea5..2520af75b 100644 --- a/src/public/stylesheets/mobile.css +++ b/src/public/stylesheets/mobile.css @@ -40,14 +40,12 @@ html, body { flex-direction: column; } -#detail-content { - 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; +#note-tab-container { + height: 100%; +} + +.note-tab-row { + display: none !important; } .note-title-row { @@ -103,4 +101,15 @@ kbd { margin: 4px; 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; } \ No newline at end of file diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index 7b9e6b1d6..63b2c4ca3 100644 --- a/src/public/stylesheets/style.css +++ b/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; diff --git a/src/views/mobile.ejs b/src/views/mobile.ejs index d516ad3a3..6ce51b0b0 100644 --- a/src/views/mobile.ejs +++ b/src/views/mobile.ejs @@ -32,35 +32,39 @@
-
- - - - - +
+
-
- +
+
+
+ -
-
+ -
+ +
- <% include details/search.ejs %> +
+
- <% include details/render.ejs %> +
- <% include details/file.ejs %> + <% include details/search.ejs %> - <% include details/image.ejs %> + <% include details/render.ejs %> - <% include details/relation_map.ejs %> + <% include details/file.ejs %> - <% include details/protected_session_password.ejs %> + <% include details/image.ejs %> + + <% include details/relation_map.ejs %> + + <% include details/protected_session_password.ejs %> +