feat(react/ribbon): improve style of note type modal

This commit is contained in:
Elian Doran 2025-08-27 19:46:26 +03:00
parent 11d908218b
commit 650aa16b89
No known key found for this signature in database
2 changed files with 19 additions and 3 deletions

View file

@ -0,0 +1,16 @@
/* #region CodeMimeTypesList */
.options-mime-types {
list-style-type: none;
column-width: 250px;
padding-left: 0;
}
.options-mime-types > section {
margin-bottom: 1em;
break-inside: avoid-column;
}
.options-mime-types ul {
padding-left: 0;
}
/* #endregion */

View file

@ -13,6 +13,7 @@ import { MimeType } from "@triliumnext/commons";
import mime_types from "../../../services/mime_types";
import CheckboxList from "./components/CheckboxList";
import AutoReadOnlySize from "./components/AutoReadOnlySize";
import "./code_notes.css";
const SAMPLE_MIME = "application/typescript";
@ -132,7 +133,6 @@ function CodeMimeTypes() {
export function CodeMimeTypesList() {
const [ codeNotesMimeTypes, setCodeNotesMimeTypes ] = useTriliumOptionJson<string[]>("codeNotesMimeTypes");
const sectionStyle = useMemo(() => ({ marginBottom: "1em", breakInside: "avoid-column" }), []);
const groupedMimeTypes: Record<string, MimeType[]> = useMemo(() => {
mime_types.loadMimeTypes();
@ -156,9 +156,9 @@ export function CodeMimeTypesList() {
}, [ codeNotesMimeTypes ]);
return (
<ul class="options-mime-types" style={{ listStyleType: "none", columnWidth: "250px" }}>
<ul class="options-mime-types">
{Object.entries(groupedMimeTypes).map(([ initial, mimeTypes ]) => (
<section style={sectionStyle}>
<section>
{ initial && <h5>{initial}</h5> }
<CheckboxList
values={mimeTypes}