From 24a45b03f525bf3aef217dc5cac5e69b4056d728 Mon Sep 17 00:00:00 2001 From: zadam Date: Thu, 7 Oct 2021 21:57:20 +0200 Subject: [PATCH] bookmark folder --- src/public/app/layouts/desktop_layout.js | 4 +- src/public/app/widgets/bookmark_buttons.js | 9 +- .../app/widgets/buttons/bookmark_folder.js | 82 +++++++++++++++++++ .../buttons/{calendar_menu.js => calendar.js} | 8 +- .../widgets/buttons/right_dropdown_button.js | 15 +++- src/public/stylesheets/calendar.css | 28 +++---- src/services/attributes.js | 3 +- 7 files changed, 123 insertions(+), 26 deletions(-) create mode 100644 src/public/app/widgets/buttons/bookmark_folder.js rename src/public/app/widgets/buttons/{calendar_menu.js => calendar.js} (96%) diff --git a/src/public/app/layouts/desktop_layout.js b/src/public/app/layouts/desktop_layout.js index 0f420a2e9..4f99f0f26 100644 --- a/src/public/app/layouts/desktop_layout.js +++ b/src/public/app/layouts/desktop_layout.js @@ -40,7 +40,7 @@ import NotePathsWidget from "../widgets/ribbon_widgets/note_paths.js"; import SimilarNotesWidget from "../widgets/ribbon_widgets/similar_notes.js"; import RightPaneContainer from "../widgets/containers/right_pane_container.js"; import EditButton from "../widgets/buttons/edit_button.js"; -import CalendarMenuWidget from "../widgets/buttons/calendar_menu.js"; +import CalendarWidget from "../widgets/buttons/calendar.js"; import EditedNotesWidget from "../widgets/ribbon_widgets/edited_notes.js"; import OpenNoteButtonWidget from "../widgets/buttons/open_note_button_widget.js"; import MermaidWidget from "../widgets/mermaid.js"; @@ -78,7 +78,7 @@ export default class DesktopLayout { .icon("bx-history") .title("Show recent changes") .command("showRecentChanges")) - .child(new CalendarMenuWidget()) + .child(new CalendarWidget()) .child(new SpacerWidget(40, 0)) .child(new FlexContainer("column") .id("plugin-buttons") diff --git a/src/public/app/widgets/bookmark_buttons.js b/src/public/app/widgets/bookmark_buttons.js index 49b4ad0c5..4a46d4d4f 100644 --- a/src/public/app/widgets/bookmark_buttons.js +++ b/src/public/app/widgets/bookmark_buttons.js @@ -1,6 +1,7 @@ import FlexContainer from "./containers/flex_container.js"; import searchService from "../services/search.js"; import OpenNoteButtonWidget from "./buttons/open_note_button_widget.js"; +import BookmarkFolderWidget from "./buttons/bookmark_folder.js"; export default class BookmarkButtons extends FlexContainer { constructor() { @@ -10,7 +11,7 @@ export default class BookmarkButtons extends FlexContainer { } async refresh() { - const bookmarkedNotes = await searchService.searchForNotes("#bookmarked"); + const bookmarkedNotes = await searchService.searchForNotes("#bookmarked or #bookmarkFolder"); this.$widget.empty(); this.children = []; @@ -19,7 +20,9 @@ export default class BookmarkButtons extends FlexContainer { for (const note of bookmarkedNotes) { this.noteIds.push(note.noteId); - const buttonWidget = new OpenNoteButtonWidget().targetNote(note.noteId); + const buttonWidget = note.hasLabel("bookmarkFolder") + ? new BookmarkFolderWidget(note) + : new OpenNoteButtonWidget().targetNote(note.noteId); this.child(buttonWidget); @@ -34,7 +37,7 @@ export default class BookmarkButtons extends FlexContainer { } entitiesReloadedEvent({loadResults}) { - if (loadResults.getAttributes().find(attr => attr.type === 'label' && attr.name === 'bookmarked')) { + if (loadResults.getAttributes().find(attr => attr.type === 'label' && ['bookmarked', 'bookmarkFolder'].includes(attr.name))) { this.refresh(); } diff --git a/src/public/app/widgets/buttons/bookmark_folder.js b/src/public/app/widgets/buttons/bookmark_folder.js new file mode 100644 index 000000000..f6ad7549a --- /dev/null +++ b/src/public/app/widgets/buttons/bookmark_folder.js @@ -0,0 +1,82 @@ +import RightDropdownButtonWidget from "./right_dropdown_button.js"; +import linkService from "../../services/link.js"; + +const DROPDOWN_TPL = ` +
+ + +
+ + +
`; + +export default class BookmarkFolderWidget extends RightDropdownButtonWidget { + constructor(note) { + super(note.getIcon(), note.title, DROPDOWN_TPL); + + this.note = note; + } + + doRender() { + super.doRender(); + + this.$parentNote = this.$dropdownContent.find('.parent-note'); + this.$childrenNotes = this.$dropdownContent.find('.children-notes'); + + // this.$dropdownContent.on("click", "a", () => this.hideDropdown()); + } + + async dropdownShown() { + this.$parentNote.empty(); + this.$childrenNotes.empty(); + + this.$parentNote.append( + (await linkService.createNoteLink(this.note.noteId, {showTooltip: false})) + .addClass("note-link") + ); + + for (const childNote of await this.note.getChildNotes()) { + this.$childrenNotes.append( + $("
  • ") + .append( + (await linkService.createNoteLink(childNote.noteId, {showTooltip: false})) + .addClass("note-link") + ) + ); + } + } + + refreshIcon() {} +} diff --git a/src/public/app/widgets/buttons/calendar_menu.js b/src/public/app/widgets/buttons/calendar.js similarity index 96% rename from src/public/app/widgets/buttons/calendar_menu.js rename to src/public/app/widgets/buttons/calendar.js index 10416f27e..85d541c95 100644 --- a/src/public/app/widgets/buttons/calendar_menu.js +++ b/src/public/app/widgets/buttons/calendar.js @@ -6,9 +6,9 @@ import appContext from "../../services/app_context.js"; import RightDropdownButtonWidget from "./right_dropdown_button.js"; const DROPDOWN_TPL = ` -
    +
    @@ -27,7 +27,7 @@ const DROPDOWN_TPL = `
    `; -export default class CalendarMenuWidget extends RightDropdownButtonWidget { +export default class CalendarWidget extends RightDropdownButtonWidget { constructor() { super("bx-calendar", "Calendar", DROPDOWN_TPL); } @@ -67,7 +67,7 @@ export default class CalendarMenuWidget extends RightDropdownButtonWidget { }); } - async dropdown() { + async dropdownShown() { await libraryLoader.requireLibrary(libraryLoader.CALENDAR_WIDGET); const activeNote = appContext.tabManager.getActiveContextNote(); diff --git a/src/public/app/widgets/buttons/right_dropdown_button.js b/src/public/app/widgets/buttons/right_dropdown_button.js index 742e1f720..2fcc6d46f 100644 --- a/src/public/app/widgets/buttons/right_dropdown_button.js +++ b/src/public/app/widgets/buttons/right_dropdown_button.js @@ -28,6 +28,7 @@ export default class RightDropdownButtonWidget extends BasicWidget { doRender() { this.$widget = $(TPL); + this.$dropdownMenu = this.$widget.find(".dropdown-menu"); const $button = this.$widget.find(".right-dropdown-button") .addClass(this.iconClass) @@ -35,16 +36,26 @@ export default class RightDropdownButtonWidget extends BasicWidget { .tooltip({ trigger: "hover" }) .on("click", () => $button.tooltip("hide")); - this.$widget.on('show.bs.dropdown', () => this.dropdown()); + this.$widget.on('show.bs.dropdown', async () => { + await this.dropdownShown(); + + const rect = this.$dropdownMenu[0].getBoundingClientRect(); + const pixelsToBottom = $(window).height() - rect.bottom; + + if (pixelsToBottom < 0) { + this.$dropdownMenu.css("top", pixelsToBottom); + } + }); this.$dropdownContent = $(this.dropdownTpl); this.$widget.find(".dropdown-menu").append(this.$dropdownContent); } // to be overriden - dropdown() {} + async dropdownShow() {} hideDropdown() { this.$widget.dropdown("hide"); + this.$dropdownMenu.removeClass("show"); } } diff --git a/src/public/stylesheets/calendar.css b/src/public/stylesheets/calendar.css index fa531bb5f..d9900222f 100755 --- a/src/public/stylesheets/calendar.css +++ b/src/public/stylesheets/calendar.css @@ -1,14 +1,14 @@ -.calendar-menu *, .calendar-menu *:before, .calendar-menu *:after { +.calendar-dropdown-widget *, .calendar-dropdown-widget *:before, .calendar-dropdown-widget *:after { box-sizing: border-box; } -.calendar-menu { +.calendar-dropdown-widget { margin: 0 auto; overflow: hidden; width: 100%; } -.calendar-menu .calendar-btn { +.calendar-dropdown-widget .calendar-btn { -moz-user-select: none; -ms-user-select: none; -webkit-appearance: button; @@ -25,24 +25,24 @@ text-align: center; } -.calendar-menu .calendar-header { +.calendar-dropdown-widget .calendar-header { align-items: center; display: flex; padding: 0 0.5rem 0.5rem 0.5rem; } -.calendar-menu .calendar-header-label { +.calendar-dropdown-widget .calendar-header-label { font-weight: bold; text-align: center; width: 100%; } -.calendar-menu .calendar-week { +.calendar-dropdown-widget .calendar-week { display: flex; flex-wrap: wrap; } -.calendar-menu .calendar-week span { +.calendar-dropdown-widget .calendar-week span { flex-direction: column; flex: 0 0 14.28%; font-size: 1rem; @@ -54,12 +54,12 @@ text-transform: uppercase; } -.calendar-menu .calendar-body { +.calendar-dropdown-widget .calendar-body { display: flex; flex-wrap: wrap; } -.calendar-menu .calendar-date { +.calendar-dropdown-widget .calendar-date { align-items: center; color: var(--main-text-color); background-color: var(--main-background-color); @@ -71,24 +71,24 @@ font-size: 120%; } -.calendar-menu .calendar-date:hover { +.calendar-dropdown-widget .calendar-date:hover { color: var(--hover-item-text-color); background-color: var(--hover-item-background-color); } -.calendar-menu .calendar-date-active { +.calendar-dropdown-widget .calendar-date-active { background-color: var(--active-item-background-color); color: var(--active-item-text-color); } -.calendar-menu .calendar-date-today { +.calendar-dropdown-widget .calendar-date-today { font-weight: bold; } -.calendar-menu .calendar-date-exists { +.calendar-dropdown-widget .calendar-date-exists { text-decoration: underline !important; } -.calendar-menu .calendar-date:not(.calendar-date-active) { +.calendar-dropdown-widget .calendar-date:not(.calendar-date-active) { cursor: pointer; } diff --git a/src/services/attributes.js b/src/services/attributes.js index 2d60d40c8..ecd8c7689 100644 --- a/src/services/attributes.js +++ b/src/services/attributes.js @@ -47,7 +47,8 @@ const BUILTIN_ATTRIBUTES = [ { type: 'label', name: 'pageSize' }, { type: 'label', name: 'viewType' }, { type: 'label', name: 'mapRootNoteId' }, - { type: 'label', name: 'excludeFromNoteMap' }, + { type: 'label', name: 'bookmarked' }, + { type: 'label', name: 'bookmarkFolder' }, // relation names { type: 'relation', name: 'runOnNoteCreation', isDangerous: true },