chore(options/appearance): improve font description slightly

This commit is contained in:
Elian Doran
2026-04-13 17:21:57 +03:00
parent f9b0a88a4e
commit 19e07bc6fd
2 changed files with 9 additions and 6 deletions

View File

@@ -1192,13 +1192,14 @@
"theme_defined": "Theme defined",
"fonts": "Fonts",
"custom_fonts": "Use custom fonts",
"main_font": "General",
"main_font": "Interface text",
"font_family": "Font family",
"size": "Size",
"preview": "Preview",
"note_tree_font": "Note tree",
"note_detail_font": "Note content",
"monospace_font": "Code notes & blocks",
"note_tree_font": "Note tree text",
"note_detail_font": "Document text",
"monospace_font": "Monospace text",
"monospace_font_description": "Used for code notes and code blocks",
"size_relative_to_general": "Size is relative to the general font size",
"not_all_fonts_available": "Not all listed fonts may be available on your system",
"apply_changes": "Reload to apply changes",

View File

@@ -330,7 +330,7 @@ function Fonts() {
<Font label={t("fonts.main_font")} fontFamilyOption="mainFontFamily" fontSizeOption="mainFontSize" disabled={!isEnabled} />
<Font label={t("fonts.note_tree_font")} sizeDescription={t("fonts.size_relative_to_general")} fontFamilyOption="treeFontFamily" fontSizeOption="treeFontSize" disabled={!isEnabled} />
<Font label={t("fonts.note_detail_font")} sizeDescription={t("fonts.size_relative_to_general")} fontFamilyOption="detailFontFamily" fontSizeOption="detailFontSize" disabled={!isEnabled} />
<Font label={t("fonts.monospace_font")} fontFamilyOption="monospaceFontFamily" fontSizeOption="monospaceFontSize" disabled={!isEnabled} isMonospace />
<Font label={t("fonts.monospace_font")} description={t("fonts.monospace_font_description")} fontFamilyOption="monospaceFontFamily" fontSizeOption="monospaceFontSize" disabled={!isEnabled} isMonospace />
<OptionsRowWithButton
label={t("fonts.apply_changes")}
@@ -343,6 +343,7 @@ function Fonts() {
interface FontProps {
label: string;
description?: string;
sizeDescription?: string;
fontFamilyOption: OptionNames;
fontSizeOption: OptionNames;
@@ -350,7 +351,7 @@ interface FontProps {
isMonospace?: boolean;
}
function Font({ label, sizeDescription, fontFamilyOption, fontSizeOption, disabled, isMonospace }: FontProps) {
function Font({ label, description, sizeDescription, fontFamilyOption, fontSizeOption, disabled, isMonospace }: FontProps) {
const [ fontFamily, setFontFamily ] = useTriliumOption(fontFamilyOption);
const [ fontSize, setFontSize ] = useTriliumOption(fontSizeOption);
const [ showModal, setShowModal ] = useState(false);
@@ -392,6 +393,7 @@ function Font({ label, sizeDescription, fontFamilyOption, fontSizeOption, disabl
>
<div className="option-row-label">
<label style={{ cursor: "pointer" }}>{label}</label>
{description && <small>{description}</small>}
</div>
<div className="option-row-input font-option-preview">
<span style={{ fontFamily: getFontFamily(fontFamily ?? ""), fontSize: `${fontSize}%` }}>{displayLabel}</span>