diff --git a/apps/client/src/widgets/bookmark_buttons.ts b/apps/client/src/widgets/bookmark_buttons.ts index 88ff3c7e9..ef6cb97a1 100644 --- a/apps/client/src/widgets/bookmark_buttons.ts +++ b/apps/client/src/widgets/bookmark_buttons.ts @@ -34,14 +34,6 @@ export default class BookmarkButtons extends FlexContainer { let buttonWidget: OpenNoteButtonWidget | BookmarkFolderWidget = note.isLabelTruthy("bookmarkFolder") ? new BookmarkFolderWidget(note); - if (this.settings.titlePlacement) { - if (!("settings" in buttonWidget)) { - (buttonWidget as any).settings = {}; - } - - (buttonWidget as any).settings.titlePlacement = this.settings.titlePlacement; - } - this.child(buttonWidget); this.$widget.append(buttonWidget.render()); diff --git a/apps/client/src/widgets/buttons/bookmark_folder.ts b/apps/client/src/widgets/buttons/bookmark_folder.ts deleted file mode 100644 index b749a1ab6..000000000 --- a/apps/client/src/widgets/buttons/bookmark_folder.ts +++ /dev/null @@ -1,88 +0,0 @@ -import RightDropdownButtonWidget from "./right_dropdown_button.js"; -import linkService from "../../services/link.js"; -import utils from "../../services/utils.js"; -import type FNote from "../../entities/fnote.js"; - -const DROPDOWN_TPL = ` -
- - -
- - -
`; - -interface LinkOptions { - showTooltip: boolean; - showNoteIcon: boolean; -} - -export default class BookmarkFolderWidget extends RightDropdownButtonWidget { - private note: FNote; - private $parentNote!: JQuery; - private $childrenNotes!: JQuery; - declare $dropdownContent: JQuery; - - constructor(note: FNote) { - super(utils.escapeHtml(note.title), note.getIcon(), DROPDOWN_TPL); - - this.note = note; - } - - doRender(): void { - super.doRender(); - - this.$parentNote = this.$dropdownContent.find(".parent-note"); - this.$childrenNotes = this.$dropdownContent.find(".children-notes"); - } - - async dropdownShown(): Promise { - this.$parentNote.empty(); - this.$childrenNotes.empty(); - - const linkOptions: LinkOptions = { - showTooltip: false, - showNoteIcon: true - }; - - this.$parentNote.append((await linkService.createLink(this.note.noteId, linkOptions)).addClass("note-link")); - - for (const childNote of await this.note.getChildNotes()) { - this.$childrenNotes.append($("
  • ").append((await linkService.createLink(childNote.noteId, linkOptions)).addClass("note-link"))); - } - } - - refreshIcon(): void {} -} diff --git a/apps/client/src/widgets/launch_bar/BookmarkButtons.css b/apps/client/src/widgets/launch_bar/BookmarkButtons.css new file mode 100644 index 000000000..b38ba59c0 --- /dev/null +++ b/apps/client/src/widgets/launch_bar/BookmarkButtons.css @@ -0,0 +1,31 @@ +.bookmark-folder-widget { + min-width: 400px; + max-height: 500px; + padding: 7px 15px 0 15px; + font-size: 1.2rem; + 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:not(.disabled) { + text-decoration: none; + background-color: transparent !important; +} + +.bookmark-folder-widget li .note-link { + padding-inline-start: 35px; +} \ No newline at end of file diff --git a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx index 45941c699..493031877 100644 --- a/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx +++ b/apps/client/src/widgets/launch_bar/BookmarkButtons.tsx @@ -2,12 +2,16 @@ import { useMemo } from "preact/hooks"; import type { LaunchBarWidgetProps } from "./launch_bar_widget"; import { CSSProperties } from "preact"; import type FNote from "../../entities/fnote"; -import { useChildNotes, useNoteLabel, useNoteProperty } from "../react/hooks"; -import Dropdown from "../react/Dropdown"; +import { useChildNotes, useNoteLabel, useNoteLabelBoolean, useNoteProperty } from "../react/hooks"; import ActionButton from "../react/ActionButton"; import appContext from "../../components/app_context"; import { escapeHtml, isCtrlKey } from "../../services/utils"; import link_context_menu from "../../menus/link_context_menu"; +import "./BookmarkButtons.css"; +import Dropdown from "../react/Dropdown"; +import Icon from "../react/Icon"; +import NoteList from "../react/NoteList"; +import NoteLink from "../react/NoteLink"; const PARENT_NOTE_ID = "_lbBookmarks"; @@ -27,7 +31,10 @@ export default function BookmarkButtons({ isHorizontalLayout }: LaunchBarWidgetP } function SingleBookmark({ note }: { note: FNote }) { - return + const [ bookmarkFolder ] = useNoteLabelBoolean(note, "bookmarkFolder"); + return bookmarkFolder + ? + : } function OpenNoteButtonWidget({ note }: { note: FNote }) { @@ -66,6 +73,36 @@ function OpenNoteButtonWidget({ note }: { note: FNote }) { ) } +function BookmarkFolder({ note }: { note: FNote }) { + const [ iconClass ] = useNoteLabel(note, "iconClass"); + const title = useNoteProperty(note, "title"); + const childNotes = useChildNotes(note.noteId); + + return title && iconClass && ( + } + > +
    +
    + +
    + +
      + {childNotes.map(childNote => ( +
    • + +
      • + ))} +
    +
    +     + ) +} + function getHoistedNoteId(noteToOpen: FNote) { return noteToOpen.getRelationValue("hoistedNote") || appContext.tabManager.getActiveContext()?.hoistedNoteId; } diff --git a/apps/client/src/widgets/react/NoteLink.tsx b/apps/client/src/widgets/react/NoteLink.tsx index 758122ed0..c8bcc5065 100644 --- a/apps/client/src/widgets/react/NoteLink.tsx +++ b/apps/client/src/widgets/react/NoteLink.tsx @@ -4,6 +4,7 @@ import { useImperativeSearchHighlighlighting, useTriliumEvent } from "./hooks"; interface NoteLinkOpts { className?: string; + containerClassName?: string; notePath: string | string[]; showNotePath?: boolean; showNoteIcon?: boolean; @@ -17,7 +18,7 @@ interface NoteLinkOpts { noContextMenu?: boolean; } -export default function NoteLink({ className, notePath, showNotePath, showNoteIcon, style, noPreview, noTnLink, highlightedTokens, title, viewScope, noContextMenu }: NoteLinkOpts) { +export default function NoteLink({ className, containerClassName, notePath, showNotePath, showNoteIcon, style, noPreview, noTnLink, highlightedTokens, title, viewScope, noContextMenu }: NoteLinkOpts) { const stringifiedNotePath = Array.isArray(notePath) ? notePath.join("/") : notePath; const noteId = stringifiedNotePath.split("/").at(-1); const ref = useRef(null); @@ -71,6 +72,6 @@ export default function NoteLink({ className, notePath, showNotePath, showNoteIc $linkEl?.addClass(className); } - return + return } diff --git a/packages/commons/src/lib/attribute_names.ts b/packages/commons/src/lib/attribute_names.ts index 767f05872..8b3ec3f37 100644 --- a/packages/commons/src/lib/attribute_names.ts +++ b/packages/commons/src/lib/attribute_names.ts @@ -24,6 +24,9 @@ type Labels = { orderBy: string; orderDirection: string; + // Launch bar + bookmarkFolder: boolean; + // Collection-specific viewType: string; status: string;