From f15239c00611e3be7e18ad4f69df20ceca16ecf9 Mon Sep 17 00:00:00 2001 From: zadam Date: Sun, 1 Mar 2020 12:50:02 +0100 Subject: [PATCH] mobile layout fixes --- src/public/javascripts/mobile_old.js | 46 ------------------- .../widgets/close_detail_button.js | 18 ++++++++ .../javascripts/widgets/mobile_detail_menu.js | 46 +++++++++++++++++++ .../javascripts/widgets/mobile_layout.js | 7 ++- src/public/stylesheets/mobile.css | 9 ++++ src/views/mobile.ejs | 1 + 6 files changed, 80 insertions(+), 47 deletions(-) create mode 100644 src/public/javascripts/widgets/close_detail_button.js create mode 100644 src/public/javascripts/widgets/mobile_detail_menu.js diff --git a/src/public/javascripts/mobile_old.js b/src/public/javascripts/mobile_old.js index 7cb23da77..46ae1c6b7 100644 --- a/src/public/javascripts/mobile_old.js +++ b/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'); }); diff --git a/src/public/javascripts/widgets/close_detail_button.js b/src/public/javascripts/widgets/close_detail_button.js new file mode 100644 index 000000000..5a500e850 --- /dev/null +++ b/src/public/javascripts/widgets/close_detail_button.js @@ -0,0 +1,18 @@ +import BasicWidget from "./basic_widget.js"; + +const TPL = ` +`; + +class CloseDetailButtonWidget extends BasicWidget { + doRender() { + this.$widget = $(TPL); + + //this.$widget.find('.close-detail-button').on('click', ); + + return this.$widget; + } +} + +export default CloseDetailButtonWidget; \ No newline at end of file diff --git a/src/public/javascripts/widgets/mobile_detail_menu.js b/src/public/javascripts/widgets/mobile_detail_menu.js new file mode 100644 index 000000000..5eb3740ae --- /dev/null +++ b/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 = ``; + +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; \ 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 1bf073ab0..3345a1421 100644 --- a/src/public/javascripts/widgets/mobile_layout.js +++ b/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())); } } \ No newline at end of file diff --git a/src/public/stylesheets/mobile.css b/src/public/stylesheets/mobile.css index c5658d746..e668afbde 100644 --- a/src/public/stylesheets/mobile.css +++ b/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; } \ No newline at end of file diff --git a/src/views/mobile.ejs b/src/views/mobile.ejs index e9320559a..cba269134 100644 --- a/src/views/mobile.ejs +++ b/src/views/mobile.ejs @@ -12,6 +12,7 @@
+