Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2026-05-07 04:47:40 +02:00
Code Issues Packages Projects Releases Activity

feat(options/appearance): improve font selection further

Browse Source
This commit is contained in:
Elian Doran
2026-04-13 16:52:22 +03:00
parent 80f40a439c
commit 8e56585575
3 changed files with 27 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1191,16 +1191,16 @@
"fonts": {
"theme_defined": "Theme defined",
"fonts": "Fonts",
"main_font": "Main Font",
"custom_fonts": "Use custom fonts",
"main_font": "General",
"font_family": "Font family",
"size": "Size",
"note_tree_font": "Note Tree Font",
"note_detail_font": "Note Detail Font",
"monospace_font": "Monospace (code) Font",
"note_tree_and_detail_font_sizing": "Note that tree and detail font sizing is relative to the main font size setting.",
"not_all_fonts_available": "Not all listed fonts may be available on your system.",
"apply_font_changes": "To apply font changes, click on",
"reload_frontend": "reload frontend",
"note_tree_font": "Note tree",
"note_detail_font": "Note content",
"monospace_font": "Code notes & 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",
"generic-fonts": "Generic fonts",
"sans-serif-system-fonts": "Sans-serif system fonts",
"serif-system-fonts": "Serif system fonts",

4
apps/client/src/widgets/type_widgets/options/appearance.css
View File

@@ -11,6 +11,10 @@
.input-with-unit {
width: 100px;
}
.tn-number-unit-pair {
margin-bottom: 0 !important;
}
}
.orientation-illustration {

28
apps/client/src/widgets/type_widgets/options/appearance.tsx
View File

@@ -17,7 +17,7 @@ import FormText from "../../react/FormText";
import { FormTextBoxWithUnit } from "../../react/FormTextBox";
import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
import Icon from "../../react/Icon";
import OptionsRow from "./components/OptionsRow";
import OptionsRow, { OptionsRowWithButton, OptionsRowWithToggle } from "./components/OptionsRow";
import OptionsSection from "./components/OptionsSection";
import PlatformIndicator from "./components/PlatformIndicator";
import RadioWithIllustration from "./components/RadioWithIllustration";
@@ -314,23 +314,24 @@ function Fonts() {
return (
<OptionsSection title={t("fonts.fonts")}>
<FormCheckbox
label={t("theme.override_theme_fonts_label")}
<OptionsRowWithToggle
name="override-theme-fonts"
label={t("fonts.custom_fonts")}
description={t("fonts.not_all_fonts_available")}
currentValue={overrideThemeFonts}
onChange={setOverrideThemeFonts}
/>
<Font name="main-font" label={t("fonts.main_font")} fontFamilyOption="mainFontFamily" fontSizeOption="mainFontSize" disabled={!isEnabled} />
<Font name="tree-font" label={t("fonts.note_tree_font")} fontFamilyOption="treeFontFamily" fontSizeOption="treeFontSize" disabled={!isEnabled} />
<Font name="detail-font" label={t("fonts.note_detail_font")} fontFamilyOption="detailFontFamily" fontSizeOption="detailFontSize" disabled={!isEnabled} />
<Font name="tree-font" label={t("fonts.note_tree_font")} description={t("fonts.size_relative_to_general")} fontFamilyOption="treeFontFamily" fontSizeOption="treeFontSize" disabled={!isEnabled} />
<Font name="detail-font" label={t("fonts.note_detail_font")} description={t("fonts.size_relative_to_general")} fontFamilyOption="detailFontFamily" fontSizeOption="detailFontSize" disabled={!isEnabled} />
<Font name="monospace-font" label={t("fonts.monospace_font")} fontFamilyOption="monospaceFontFamily" fontSizeOption="monospaceFontSize" disabled={!isEnabled} />
<FormText>{t("fonts.note_tree_and_detail_font_sizing")}</FormText>
<FormText>{t("fonts.not_all_fonts_available")}</FormText>
<p>
{t("fonts.apply_font_changes")} <Button text={t("fonts.reload_frontend")} size="micro" onClick={reloadFrontendApp} />
</p>
<OptionsRowWithButton
label={t("fonts.apply_changes")}
icon="bx bx-refresh"
onClick={reloadFrontendApp}
/>
</OptionsSection>
);
}
@@ -338,17 +339,18 @@ function Fonts() {
interface FontProps {
name: string;
label: string;
description?: string;
fontFamilyOption: OptionNames;
fontSizeOption: OptionNames;
disabled?: boolean;
}
function Font({ name, label, fontFamilyOption, fontSizeOption, disabled }: FontProps) {
function Font({ name, label, description, fontFamilyOption, fontSizeOption, disabled }: FontProps) {
const [ fontFamily, setFontFamily ] = useTriliumOption(fontFamilyOption);
const [ fontSize, setFontSize ] = useTriliumOption(fontSizeOption);
return (
<OptionsRow name={name} label={label}>
<OptionsRow name={name} label={label} description={description}>
<div className="font-options">
<FormSelectWithGroups
values={FONT_FAMILIES}