bookmark folder

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")

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();
         }
 

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 = `
+<div class="bookmark-folder-widget">
+    <style>
+        .bookmark-folder-widget {
+            min-width: 200px;
+            max-height: 500px;
+            padding: 10px 20px 10px 20px;
+            font-size: 110%;
+            overflow: auto;
+        }
+        
+        .bookmark-folder-widget ul {
+            padding: 0;
+            list-style-type: none;
+        }
+        
+        .bookmark-folder-widget .note-link {
+            display: block;
+            padding: 5px 10px 5px 5px;
+        }
+        
+        .bookmark-folder-widget .note-link:hover {
+            background-color: var(--accented-background-color);
+            text-decoration: none;
+        }
+        
+        .dropdown-menu .bookmark-folder-widget a:hover {
+            text-decoration: none;
+            background: transparent !important;
+        }
+        
+        .bookmark-folder-widget li .note-link {
+            padding-left: 35px;
+        }
+    </style>
+    
+    <div class="parent-note"></div>
+    
+    <ul class="children-notes"></ul>
+</div>`;
+
+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(
+                $("<li>")
+                    .append(
+                        (await linkService.createNoteLink(childNote.noteId, {showTooltip: false}))
+                            .addClass("note-link")
+                    )
+            );
+        }
+    }
+
+    refreshIcon() {}
+}

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 = `
-<div class="calendar-menu">
+<div class="calendar-dropdown-widget">
   <style>
-  .calendar-menu {
+  .calendar-dropdown-widget {
       width: 350px;
   }
   </style>
@@ -27,7 +27,7 @@ const DROPDOWN_TPL = `
   <div class="calendar-body" data-calendar-area="month"></div>
 </div>`;
 
-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();

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");
     }
 }

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;
 }

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 },