Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-15 12:49:53 +01:00
Code Issues Packages Projects Releases Activity

feat(status_bar): modal for configuring list of code languages

Browse Source
This commit is contained in:
Elian Doran
2025-12-13 01:19:20 +02:00
parent 40fcf79778
commit 7d2a1bb2e5
2 changed files with 23 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
apps/client/src/widgets/layout/StatusBar.tsx
View File

@@ -20,7 +20,7 @@ import { FormDropdownDivider, FormListItem } from "../react/FormList";
import { useActiveNoteContext, useLegacyImperativeHandlers, useNoteProperty, useStaticTooltip, useTriliumEvent, useTriliumEvents } from "../react/hooks"; import { useActiveNoteContext, useLegacyImperativeHandlers, useNoteProperty, useStaticTooltip, useTriliumEvent, useTriliumEvents } from "../react/hooks";
import Icon from "../react/Icon"; import Icon from "../react/Icon";
import { ParentComponent } from "../react/react_utils"; import { ParentComponent } from "../react/react_utils";
import { ContentLanguagesModal, NoteTypeCodeNoteList, useLanguageSwitcher, useMimeTypes } from "../ribbon/BasicPropertiesTab"; import { ContentLanguagesModal, NoteTypeCodeNoteList, NoteTypeOptionsModal, useLanguageSwitcher, useMimeTypes } from "../ribbon/BasicPropertiesTab";
import AttributeEditor, { AttributeEditorImperativeHandlers } from "../ribbon/components/AttributeEditor"; import AttributeEditor, { AttributeEditorImperativeHandlers } from "../ribbon/components/AttributeEditor";
import InheritedAttributesTab from "../ribbon/InheritedAttributesTab"; import InheritedAttributesTab from "../ribbon/InheritedAttributesTab";
import { NoteSizeWidget, useNoteMetadata } from "../ribbon/NoteInfoTab"; import { NoteSizeWidget, useNoteMetadata } from "../ribbon/NoteInfoTab";
@@ -349,6 +349,7 @@ function NotePaths({ note, hoistedNoteId, notePath }: StatusBarContext) {
//#region Code note switcher //#region Code note switcher
function CodeNoteSwitcher({ note }: StatusBarContext) { function CodeNoteSwitcher({ note }: StatusBarContext) {
const [ modalShown, setModalShown ] = useState(false);
const currentNoteMime = useNoteProperty(note, "mime"); const currentNoteMime = useNoteProperty(note, "mime");
const mimeTypes = useMimeTypes(); const mimeTypes = useMimeTypes();
const correspondingMimeType = useMemo(() => ( const correspondingMimeType = useMemo(() => (
@@ -356,20 +357,26 @@ function CodeNoteSwitcher({ note }: StatusBarContext) {
), [ mimeTypes, currentNoteMime ]); ), [ mimeTypes, currentNoteMime ]);
return ( return (
<StatusBarDropdown <>
icon="bx bx-code-curly" <StatusBarDropdown
text={correspondingMimeType?.title} icon="bx bx-code-curly"
title={t("status_bar.code_note_switcher")} text={correspondingMimeType?.title}
dropdownContainerClassName="dropdown-code-note-switcher" title={t("status_bar.code_note_switcher")}
dropdownOptions={{ autoClose: true }} dropdownContainerClassName="dropdown-code-note-switcher"
> dropdownOptions={{ autoClose: true }}
<NoteTypeCodeNoteList >
currentMimeType={currentNoteMime} <NoteTypeCodeNoteList
mimeTypes={mimeTypes} currentMimeType={currentNoteMime}
changeNoteType={(type, mime) => server.put(`notes/${note.noteId}/type`, { type, mime })} mimeTypes={mimeTypes}
setModalShown={() => {}} changeNoteType={(type, mime) => server.put(`notes/${note.noteId}/type`, { type, mime })}
/> setModalShown={() => setModalShown(true)}
</StatusBarDropdown> />
</StatusBarDropdown>
{createPortal(
<NoteTypeOptionsModal modalShown={modalShown} setModalShown={setModalShown} />,
document.body
)}
</>
); );
} }
//#endregion //#endregion

2
apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
View File

@@ -164,7 +164,7 @@ export function useMimeTypes() {
return mimeTypes; return mimeTypes;
} }
function NoteTypeOptionsModal({ modalShown, setModalShown }: { modalShown: boolean, setModalShown: (shown: boolean) => void }) { export function NoteTypeOptionsModal({ modalShown, setModalShown }: { modalShown: boolean, setModalShown: (shown: boolean) => void }) {
return ( return (
<Modal <Modal
className="code-mime-types-modal" className="code-mime-types-modal"