gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 23:29:02 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

feat(react/ribbon): allow editing code types directly

Browse Source
This commit is contained in:
Elian Doran 2025-08-27 19:42:20 +03:00
parent 3627a7dc93
commit 11d908218b
No known key found for this signature in database
4 changed files with 40 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/client/src/translations/en/translation.json
View File

@ -732,7 +732,8 @@
"note_type": "Note type", "note_type": "Note type",
"editable": "Editable", "editable": "Editable",
"basic_properties": "Basic Properties", "basic_properties": "Basic Properties",
"language": "Language" "language": "Language",
"configure_code_notes": "Configure code notes..."
}, },
"book_properties": { "book_properties": {
"view_type": "View type", "view_type": "View type",

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

@ -18,6 +18,8 @@ import sync from "../../services/sync";
import appContext from "../../components/app_context"; import appContext from "../../components/app_context";
import HelpButton from "../react/HelpButton"; import HelpButton from "../react/HelpButton";
import { TabContext } from "./ribbon-interface"; import { TabContext } from "./ribbon-interface";
import Modal from "../react/Modal";
import { CodeMimeTypesList } from "../type_widgets/options/code_notes";
export default function BasicPropertiesTab({ note }: TabContext) { export default function BasicPropertiesTab({ note }: TabContext) {
return ( return (
@ -41,6 +43,7 @@ function NoteTypeWidget({ note }: { note?: FNote | null }) {
const currentNoteType = useNoteProperty(note, "type") ?? undefined; const currentNoteType = useNoteProperty(note, "type") ?? undefined;
const currentNoteMime = useNoteProperty(note, "mime"); const currentNoteMime = useNoteProperty(note, "mime");
const [ modalShown, setModalShown ] = useState(false);
const changeNoteType = useCallback(async (type: NoteType, mime?: string) => { const changeNoteType = useCallback(async (type: NoteType, mime?: string) => {
if (!note || (type === currentNoteType && mime === currentNoteMime)) { if (!note || (type === currentNoteType && mime === currentNoteMime)) {
@ -111,7 +114,19 @@ function NoteTypeWidget({ note }: { note?: FNote | null }) {
{title} {title}
</FormListItem> </FormListItem>
))} ))}
<FormDropdownDivider />
<FormListItem icon="bx bx-cog" onClick={() => setModalShown(true)}>{t("basic_properties.configure_code_notes")}</FormListItem>
</Dropdown> </Dropdown>
<Modal
className="code-mime-types-modal"
title={t("code_mime_types.title")}
show={modalShown} onHidden={() => setModalShown(false)}
size="xl" scrollable
>
<CodeMimeTypesList />
</Modal>
</div> </div>
) )
} }

38
apps/client/src/widgets/type_widgets/options/code_notes.tsx
View File

@ -123,6 +123,14 @@ function CodeNotePreview({ themeName, wordWrapping }: { themeName: string, wordW
} }
function CodeMimeTypes() { function CodeMimeTypes() {
return (
<OptionsSection title={t("code_mime_types.title")}>
<CodeMimeTypesList />
</OptionsSection>
)
}
export function CodeMimeTypesList() {
const [ codeNotesMimeTypes, setCodeNotesMimeTypes ] = useTriliumOptionJson<string[]>("codeNotesMimeTypes"); const [ codeNotesMimeTypes, setCodeNotesMimeTypes ] = useTriliumOptionJson<string[]>("codeNotesMimeTypes");
const sectionStyle = useMemo(() => ({ marginBottom: "1em", breakInside: "avoid-column" }), []); const sectionStyle = useMemo(() => ({ marginBottom: "1em", breakInside: "avoid-column" }), []);
const groupedMimeTypes: Record<string, MimeType[]> = useMemo(() => { const groupedMimeTypes: Record<string, MimeType[]> = useMemo(() => {
@ -148,20 +156,18 @@ function CodeMimeTypes() {
}, [ codeNotesMimeTypes ]); }, [ codeNotesMimeTypes ]);
return ( return (
<OptionsSection title={t("code_mime_types.title")}> <ul class="options-mime-types" style={{ listStyleType: "none", columnWidth: "250px" }}>
<ul class="options-mime-types" style={{ listStyleType: "none", columnWidth: "250px" }}> {Object.entries(groupedMimeTypes).map(([ initial, mimeTypes ]) => (
{Object.entries(groupedMimeTypes).map(([ initial, mimeTypes ]) => ( <section style={sectionStyle}>
<section style={sectionStyle}> { initial && <h5>{initial}</h5> }
{ initial && <h5>{initial}</h5> } <CheckboxList
<CheckboxList values={mimeTypes}
values={mimeTypes} keyProperty="mime" titleProperty="title"
keyProperty="mime" titleProperty="title" currentValue={codeNotesMimeTypes} onChange={setCodeNotesMimeTypes}
currentValue={codeNotesMimeTypes} onChange={setCodeNotesMimeTypes} columnWidth="inherit"
columnWidth="inherit" />
/> </section>
</section> ))}
))} </ul>
</ul> );
</OptionsSection>
)
} }

2
apps/client/src/widgets/type_widgets/options/components/OptionsSection.tsx
View File

@ -11,7 +11,7 @@ interface OptionsSectionProps {
export default function OptionsSection({ title, children, noCard, className, ...rest }: OptionsSectionProps) { export default function OptionsSection({ title, children, noCard, className, ...rest }: OptionsSectionProps) {
return ( return (
<div className={`options-section ${noCard && "tn-no-card"} ${className ?? ""}`} {...rest}> <div className={`options-section ${noCard ? "tn-no-card" : ""} ${className ?? ""}`} {...rest}>
{title && <h4>{title}</h4>} {title && <h4>{title}</h4>}
{children} {children}
</div> </div>