From f4079604c97bb72dc6b55aa8f4d65f370254afc2 Mon Sep 17 00:00:00 2001 From: azivner Date: Sun, 8 Apr 2018 22:38:52 -0400 Subject: [PATCH] basic implementation of children overview, closes #80 --- src/public/javascripts/entities/branch.js | 4 + .../javascripts/services/note_detail.js | 28 +++- src/public/stylesheets/style.css | 23 +++- src/views/index.ejs | 129 +++++++++--------- 4 files changed, 116 insertions(+), 68 deletions(-) diff --git a/src/public/javascripts/entities/branch.js b/src/public/javascripts/entities/branch.js index e6f2d66a2..2a2268e5d 100644 --- a/src/public/javascripts/entities/branch.js +++ b/src/public/javascripts/entities/branch.js @@ -14,6 +14,10 @@ class Branch { return await this.treeCache.getNote(this.noteId); } + isTopLevel() { + return this.parentNoteId === 'root'; + } + get toString() { return `Branch(branchId=${this.branchId})`; } diff --git a/src/public/javascripts/services/note_detail.js b/src/public/javascripts/services/note_detail.js index 71bdc9f28..cbf648f74 100644 --- a/src/public/javascripts/services/note_detail.js +++ b/src/public/javascripts/services/note_detail.js @@ -1,4 +1,5 @@ import treeService from './tree.js'; +import treeUtils from './tree_utils.js'; import noteTypeService from './note_type.js'; import protectedSessionService from './protected_session.js'; import protectedSessionHolder from './protected_session_holder.js'; @@ -24,6 +25,7 @@ const $noteDetailWrapper = $("#note-detail-wrapper"); const $noteIdDisplay = $("#note-id-display"); const $labelList = $("#label-list"); const $labelListInner = $("#label-list-inner"); +const $childrenOverview = $("#children-overview"); let currentNote = null; @@ -73,14 +75,14 @@ function noteChanged() { async function reload() { // no saving here - await loadNoteToEditor(getCurrentNoteId()); + await loadNoteDetail(getCurrentNoteId()); } async function switchToNote(noteId) { if (getCurrentNoteId() !== noteId) { await saveNoteIfChanged(); - await loadNoteToEditor(noteId); + await loadNoteDetail(noteId); } } @@ -137,7 +139,7 @@ async function handleProtectedSession() { protectedSessionService.ensureDialogIsClosed(); } -async function loadNoteToEditor(noteId) { +async function loadNoteDetail(noteId) { currentNote = await loadNote(noteId); if (isNewNoteCreated) { @@ -175,6 +177,26 @@ async function loadNoteToEditor(noteId) { $noteDetailWrapper.scrollTop(0); await loadLabelList(); + + await showChildrenOverview(); +} + +async function showChildrenOverview() { + const note = getCurrentNote(); + + $childrenOverview.empty(); + + const notePath = treeService.getCurrentNotePath(); + + for (const childBranch of await note.getChildBranches()) { + const link = $('', { + href: 'javascript:', + text: await treeUtils.getNoteTitle(childBranch.noteId, childBranch.parentNoteId) + }).attr('action', 'note').attr('note-path', notePath + '/' + childBranch.noteId); + + const childEl = $('
').html(link); + $childrenOverview.append(childEl); + } } async function loadLabelList() { diff --git a/src/public/stylesheets/style.css b/src/public/stylesheets/style.css index fa3dd610c..e5719680c 100644 --- a/src/public/stylesheets/style.css +++ b/src/public/stylesheets/style.css @@ -5,9 +5,9 @@ display: grid; grid-template-areas: "header header" "tree-actions title" - "search note-content" - "tree note-content" - "parent-list note-content" + "search note-detail" + "tree note-detail" + "parent-list note-detail" "parent-list label-list"; grid-template-columns: 2fr 5fr; grid-template-rows: auto @@ -288,4 +288,21 @@ div.ui-tooltip { #file-table th, #file-table td { padding: 10px; font-size: large; +} + +#children-overview { + padding-top: 20px; +} + +.child-overview { + font-weight: bold; + font-size: large; + padding: 10px; + border: 1px solid black; + width: 150px; + height: 95px; + margin-right: 20px; + margin-bottom: 20px; + border-radius: 15px; + overflow: hidden; } \ No newline at end of file diff --git a/src/views/index.ejs b/src/views/index.ejs index bcfd24fa6..b1e358f38 100644 --- a/src/views/index.ejs +++ b/src/views/index.ejs @@ -132,76 +132,81 @@
-
-
+
+
+
-