From cabeb13adb8a2bf1afe1421987d948cfe5545fa0 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 20:30:12 +0300 Subject: [PATCH] chore(react/ribbon): add note types --- apps/client/src/widgets/note_type.ts | 17 ++-------- apps/client/src/widgets/react/Dropdown.tsx | 5 +-- apps/client/src/widgets/react/FormList.tsx | 9 +++-- .../src/widgets/ribbon/BasicPropertiesTab.tsx | 33 +++++++++++++++---- apps/client/src/widgets/ribbon/style.css | 6 ++++ 5 files changed, 44 insertions(+), 26 deletions(-) diff --git a/apps/client/src/widgets/note_type.ts b/apps/client/src/widgets/note_type.ts index 1147d0ba6..cb1d53bb3 100644 --- a/apps/client/src/widgets/note_type.ts +++ b/apps/client/src/widgets/note_type.ts @@ -13,18 +13,10 @@ const NOT_SELECTABLE_NOTE_TYPES = NOTE_TYPES.filter((nt) => nt.reserved || nt.st const TPL = /*html*/`
- -
`; @@ -83,7 +75,7 @@ export default class NoteTypeWidget extends NoteContextAwareWidget { }); } else { this.$noteTypeDropdown.append('
'); - $typeLink = $('').attr("data-note-type", noteType.type).append('✓ ').append($("").text(noteType.title)); + $typeLink = $('').attr("data-note-type", noteType.type).append('✓ ').append($("").text()); } if (this.note.type === noteType.type) { @@ -93,15 +85,10 @@ export default class NoteTypeWidget extends NoteContextAwareWidget { this.$noteTypeDropdown.append($typeLink); } - for (const mimeType of mimeTypesService.getMimeTypes()) { - if (!mimeType.enabled) { - continue; - } - + for (const mimeType of ) { const $mimeLink = $('') .attr("data-mime-type", mimeType.mime) .append('✓ ') - .append($("").text(mimeType.title)) .on("click", (e) => { const $link = $(e.target).closest(".dropdown-item"); diff --git a/apps/client/src/widgets/react/Dropdown.tsx b/apps/client/src/widgets/react/Dropdown.tsx index 4de382f3b..49a1ac228 100644 --- a/apps/client/src/widgets/react/Dropdown.tsx +++ b/apps/client/src/widgets/react/Dropdown.tsx @@ -11,11 +11,12 @@ interface DropdownProps { children: ComponentChildren; title?: string; dropdownContainerStyle?: CSSProperties; + dropdownContainerClassName?: string; hideToggleArrow?: boolean; disabled?: boolean; } -export default function Dropdown({ className, buttonClassName, isStatic, children, title, dropdownContainerStyle, hideToggleArrow, disabled }: DropdownProps) { +export default function Dropdown({ className, buttonClassName, isStatic, children, title, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, disabled }: DropdownProps) { const dropdownRef = useRef(null); const triggerRef = useRef(null); @@ -68,7 +69,7 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre />
diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx index bbb994758..01f16264f 100644 --- a/apps/client/src/widgets/react/FormList.tsx +++ b/apps/client/src/widgets/react/FormList.tsx @@ -75,12 +75,13 @@ interface FormListItemOpts { title?: string; active?: boolean; badges?: FormListBadge[]; + disabled?: boolean; } -export function FormListItem({ children, icon, value, title, active, badges }: FormListItemOpts) { +export function FormListItem({ children, icon, value, title, active, badges, disabled }: FormListItemOpts) { return ( @@ -104,3 +105,7 @@ export function FormListHeader({ text }: FormListHeaderOpts) { ) } + +export function FormDivider() { + return
; +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx index 865898041..e24bec3a8 100644 --- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -1,8 +1,10 @@ import { useCallback, useMemo } from "preact/hooks"; import Dropdown from "../react/Dropdown"; import { NOTE_TYPES } from "../../services/note_types"; -import { FormListBadge, FormListItem } from "../react/FormList"; +import { FormDivider, FormListBadge, FormListItem } from "../react/FormList"; import { t } from "../../services/i18n"; +import { useTriliumOption } from "../react/hooks"; +import mime_types from "../../services/mime_types"; export default function BasicPropertiesTab() { return ( @@ -14,9 +16,11 @@ export default function BasicPropertiesTab() { function NoteTypeWidget() { const noteTypes = useMemo(() => NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static), []); + const [ codeNotesMimeTypes ] = useTriliumOption("codeNotesMimeTypes"); + const mimeTypes = useMemo(() => mime_types.getMimeTypes().filter(mimeType => mimeType.enabled), [ codeNotesMimeTypes ]); return ( - + {noteTypes.map(noteType => { const badges: FormListBadge[] = []; if (noteType.isNew) { @@ -31,12 +35,27 @@ function NoteTypeWidget() { }); } - return ( - {noteType.title} - ); + if (noteType.type !== "code") { + return ( + {noteType.title} + ); + } else { + return ( + <> + + + {noteType.title} + + + ) + } })} + + {mimeTypes.map(mimeType => ( + {mimeType.title} + ))} ) } \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css index 93190578e..5f38712ad 100644 --- a/apps/client/src/widgets/ribbon/style.css +++ b/apps/client/src/widgets/ribbon/style.css @@ -114,4 +114,10 @@ .note-language-container { display: flex; align-items: center; +} + +.note-type-dropdown { + max-height: 500px; + overflow-y: auto; + overflow-x: hidden; } \ No newline at end of file