Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-12-13 03:39:54 +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 Icon from "../react/Icon";
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 InheritedAttributesTab from "../ribbon/InheritedAttributesTab";
import { NoteSizeWidget, useNoteMetadata } from "../ribbon/NoteInfoTab";
@@ -349,6 +349,7 @@ function NotePaths({ note, hoistedNoteId, notePath }: StatusBarContext) {
//#region Code note switcher
function CodeNoteSwitcher({ note }: StatusBarContext) {
const [ modalShown, setModalShown ] = useState(false);
const currentNoteMime = useNoteProperty(note, "mime");
const mimeTypes = useMimeTypes();
const correspondingMimeType = useMemo(() => (
@@ -356,20 +357,26 @@ function CodeNoteSwitcher({ note }: StatusBarContext) {
), [ mimeTypes, currentNoteMime ]);
return (
<StatusBarDropdown
icon="bx bx-code-curly"
text={correspondingMimeType?.title}
title={t("status_bar.code_note_switcher")}
dropdownContainerClassName="dropdown-code-note-switcher"
dropdownOptions={{ autoClose: true }}
>
<NoteTypeCodeNoteList
currentMimeType={currentNoteMime}
mimeTypes={mimeTypes}
changeNoteType={(type, mime) => server.put(`notes/${note.noteId}/type`, { type, mime })}
setModalShown={() => {}}
/>
</StatusBarDropdown>
<>
<StatusBarDropdown
icon="bx bx-code-curly"
text={correspondingMimeType?.title}
title={t("status_bar.code_note_switcher")}
dropdownContainerClassName="dropdown-code-note-switcher"
dropdownOptions={{ autoClose: true }}
>
<NoteTypeCodeNoteList
currentMimeType={currentNoteMime}
mimeTypes={mimeTypes}
changeNoteType={(type, mime) => server.put(`notes/${note.noteId}/type`, { type, mime })}
setModalShown={() => setModalShown(true)}
/>
</StatusBarDropdown>
{createPortal(
<NoteTypeOptionsModal modalShown={modalShown} setModalShown={setModalShown} />,
document.body
)}
</>
);
}
//#endregion

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

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