mirror of
https://github.com/zadam/trilium.git
synced 2025-11-01 10:55:55 +01:00
feat(react/settings): port font size
This commit is contained in:
Elian Doran
@@ -1738,7 +1738,7 @@ button.close:hover {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.options-number-input {
|
||||
.options-section input[type="number"] {
|
||||
/* overriding settings from .form-control */
|
||||
width: 10em !important;
|
||||
flex-grow: 0 !important;
|
||||
|
||||
@@ -14,11 +14,11 @@ interface ButtonProps {
|
||||
onClick?: () => void;
|
||||
primary?: boolean;
|
||||
disabled?: boolean;
|
||||
small?: boolean;
|
||||
size: "normal" | "small" | "micro";
|
||||
style?: CSSProperties;
|
||||
}
|
||||
|
||||
const Button = memo(({ buttonRef: _buttonRef, className, text, onClick, keyboardShortcut, icon, primary, disabled, small, style }: ButtonProps) => {
|
||||
const Button = memo(({ buttonRef: _buttonRef, className, text, onClick, keyboardShortcut, icon, primary, disabled, size, style }: ButtonProps) => {
|
||||
// Memoize classes array to prevent recreation
|
||||
const classes = useMemo(() => {
|
||||
const classList: string[] = ["btn"];
|
||||
@@ -30,11 +30,13 @@ const Button = memo(({ buttonRef: _buttonRef, className, text, onClick, keyboard
|
||||
if (className) {
|
||||
classList.push(className);
|
||||
}
|
||||
if (small) {
|
||||
if (size === "small") {
|
||||
classList.push("btn-sm");
|
||||
} else if (size === "micro") {
|
||||
classList.push("btn-micro");
|
||||
}
|
||||
return classList.join(" ");
|
||||
}, [primary, className, small]);
|
||||
}, [primary, className, size]);
|
||||
|
||||
const buttonRef = _buttonRef ?? useRef<HTMLButtonElement>(null);
|
||||
|
||||
|
||||
5
apps/client/src/widgets/react/FormText.tsx
Normal file
5
apps/client/src/widgets/react/FormText.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { ComponentChildren } from "preact";
|
||||
|
||||
export default function FormText({ children }: { children: ComponentChildren }) {
|
||||
return <p className="form-text">{children}</p>
|
||||
}
|
||||
@@ -1,27 +1,31 @@
|
||||
import type { InputHTMLAttributes, RefObject } from "preact/compat";
|
||||
import FormText from "./FormText";
|
||||
|
||||
interface FormTextBoxProps extends Pick<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "autoComplete" | "className" | "type" | "name" | "pattern" | "title" | "style"> {
|
||||
interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
|
||||
id?: string;
|
||||
currentValue?: string;
|
||||
onChange?(newValue: string): void;
|
||||
inputRef?: RefObject<HTMLInputElement>;
|
||||
}
|
||||
|
||||
export default function FormTextBox({ id, type, name, className, currentValue, onChange, autoComplete, inputRef, placeholder, title, pattern, style }: FormTextBoxProps) {
|
||||
export default function FormTextBox({ inputRef, className, type, currentValue, onChange, ...rest}: FormTextBoxProps) {
|
||||
return (
|
||||
<input
|
||||
ref={inputRef}
|
||||
type={type ?? "text"}
|
||||
className={`form-control ${className ?? ""}`}
|
||||
id={id}
|
||||
name={name}
|
||||
type={type ?? "text"}
|
||||
value={currentValue}
|
||||
autoComplete={autoComplete}
|
||||
placeholder={placeholder}
|
||||
title={title}
|
||||
pattern={pattern}
|
||||
onInput={e => onChange?.(e.currentTarget.value)}
|
||||
style={style}
|
||||
{...rest}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function FormTextBoxWithUnit(props: FormTextBoxProps & { unit: string }) {
|
||||
return (
|
||||
<label class="input-group tn-number-unit-pair">
|
||||
<FormTextBox {...props} />
|
||||
<span class="input-group-text">{props.unit}</span>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
@@ -10,6 +10,9 @@ import server from "../../../services/server";
|
||||
import FormCheckbox from "../../react/FormCheckbox";
|
||||
import FormGroup from "../../react/FormGroup";
|
||||
import { FontFamily, OptionNames } from "@triliumnext/commons";
|
||||
import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
|
||||
import FormText from "../../react/FormText";
|
||||
import Button from "../../react/Button";
|
||||
|
||||
interface Theme {
|
||||
val: string;
|
||||
@@ -146,22 +149,30 @@ function ApplicationTheme() {
|
||||
function Fonts() {
|
||||
return (
|
||||
<OptionsSection title={t("fonts.fonts")}>
|
||||
<Font title={t("fonts.main_font")} fontFamilyOption="mainFontFamily" />
|
||||
<Font title={t("fonts.note_tree_font")} fontFamilyOption="treeFontFamily" />
|
||||
<Font title={t("fonts.note_detail_font")} fontFamilyOption="detailFontFamily" />
|
||||
<Font title={t("fonts.monospace_font")} fontFamilyOption="monospaceFontFamily" />
|
||||
<Font title={t("fonts.main_font")} fontFamilyOption="mainFontFamily" fontSizeOption="mainFontSize" />
|
||||
<Font title={t("fonts.note_tree_font")} fontFamilyOption="treeFontFamily" fontSizeOption="treeFontSize" />
|
||||
<Font title={t("fonts.note_detail_font")} fontFamilyOption="detailFontFamily" fontSizeOption="detailFontSize" />
|
||||
<Font title={t("fonts.monospace_font")} fontFamilyOption="monospaceFontFamily" fontSizeOption="monospaceFontSize" />
|
||||
|
||||
<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" />
|
||||
</p>
|
||||
</OptionsSection>
|
||||
);
|
||||
}
|
||||
|
||||
function Font({ title, fontFamilyOption }: { title: string, fontFamilyOption: OptionNames }) {
|
||||
function Font({ title, fontFamilyOption, fontSizeOption }: { title: string, fontFamilyOption: OptionNames, fontSizeOption: OptionNames }) {
|
||||
const [ fontFamily, setFontFamily ] = useTriliumOption(fontFamilyOption);
|
||||
const [ fontSize, setFontSize ] = useTriliumOption(fontSizeOption);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h5>{title}</h5>
|
||||
<FormGroup>
|
||||
<Column>
|
||||
<div className="row">
|
||||
<Column md={4}>
|
||||
<label>{t("fonts.font_family")}</label>
|
||||
<FormSelectWithGroups
|
||||
values={FONT_FAMILIES}
|
||||
@@ -169,7 +180,17 @@ function Font({ title, fontFamilyOption }: { title: string, fontFamilyOption: Op
|
||||
keyProperty="value" titleProperty="label"
|
||||
/>
|
||||
</Column>
|
||||
</FormGroup>
|
||||
|
||||
<Column md={6}>
|
||||
<label>{t("fonts.size")}</label>
|
||||
<FormTextBoxWithUnit
|
||||
name="tree-font-size"
|
||||
type="number" min={50} max={200} step={10}
|
||||
currentValue={fontSize} onChange={setFontSize}
|
||||
unit="%"
|
||||
/>
|
||||
</Column>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,144 +0,0 @@
|
||||
import OptionsWidget from "../options_widget.js";
|
||||
import utils from "../../../../services/utils.js";
|
||||
import { t } from "../../../../services/i18n.js";
|
||||
import type { OptionMap, OptionNames } from "@triliumnext/commons";
|
||||
|
||||
|
||||
|
||||
const TPL = /*html*/`
|
||||
<div class="options-section">
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<select id="main-font-family" class="main-font-family form-select"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<label for="main-font-size">${t("fonts.size")}</label>
|
||||
|
||||
<label class="input-group tn-number-unit-pair main-font-size-input-group">
|
||||
<input id="main-font-size" type="number" class="main-font-size form-control options-number-input" min="50" max="200" step="10"/>
|
||||
<span class="input-group-text">%</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<label for="tree-font-family">${t("fonts.font_family")}</label>
|
||||
<select id="tree-font-family" class="tree-font-family form-select"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<label for="tree-font-size">${t("fonts.size")}</label>
|
||||
|
||||
<label class="input-group tn-number-unit-pair tree-font-size-input-group">
|
||||
<input id="tree-font-size" type="number" class="tree-font-size form-control options-number-input" min="50" max="200" step="10"/>
|
||||
<span class="input-group-text">%</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<label for="detail-font-family">${t("fonts.font_family")}</label>
|
||||
<select id="detail-font-family" class="detail-font-family form-select"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<label for="detail-font-size">${t("fonts.size")}</label>
|
||||
|
||||
<label class="input-group tn-number-unit-pair detail-font-size-input-group">
|
||||
<input id="detail-font-size" type="number" class="detail-font-size form-control options-number-input" min="50" max="200" step="10"/>
|
||||
<span class="input-group-text">%</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group row">
|
||||
<div class="col-4">
|
||||
<label for="monospace-font-family">${t("fonts.font_family")}</label>
|
||||
<select id="monospace-font-family" class="monospace-font-family form-select"></select>
|
||||
</div>
|
||||
|
||||
<div class="col-6">
|
||||
<label for="monospace-font-size">${t("fonts.size")}</label>
|
||||
|
||||
<label class="input-group tn-number-unit-pair monospace-font-size-input-group">
|
||||
<input id="monospace-font-size" type="number" class="monospace-font-size form-control options-number-input" min="50" max="200" step="10"/>
|
||||
<span class="input-group-text">%</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="form-text">${t("fonts.note_tree_and_detail_font_sizing")}</p>
|
||||
|
||||
<p class="form-text">${t("fonts.not_all_fonts_available")}</p>
|
||||
|
||||
<p>
|
||||
${t("fonts.apply_font_changes")}
|
||||
<button class="btn btn-secondary btn-micro reload-frontend-button">${t("fonts.reload_frontend")}</button>
|
||||
</p>
|
||||
</div>`;
|
||||
|
||||
export default class FontsOptions extends OptionsWidget {
|
||||
private $mainFontSize!: JQuery<HTMLElement>;
|
||||
private $mainFontFamily!: JQuery<HTMLElement>;
|
||||
private $treeFontSize!: JQuery<HTMLElement>;
|
||||
private $treeFontFamily!: JQuery<HTMLElement>;
|
||||
private $detailFontSize!: JQuery<HTMLElement>;
|
||||
private $detailFontFamily!: JQuery<HTMLElement>;
|
||||
private $monospaceFontSize!: JQuery<HTMLElement>;
|
||||
private $monospaceFontFamily!: JQuery<HTMLElement>;
|
||||
|
||||
private _isEnabled?: boolean;
|
||||
|
||||
doRender() {
|
||||
this.$widget = $(TPL);
|
||||
|
||||
this.$mainFontSize = this.$widget.find(".main-font-size");
|
||||
this.$mainFontFamily = this.$widget.find(".main-font-family");
|
||||
|
||||
this.$treeFontSize = this.$widget.find(".tree-font-size");
|
||||
this.$treeFontFamily = this.$widget.find(".tree-font-family");
|
||||
|
||||
this.$detailFontSize = this.$widget.find(".detail-font-size");
|
||||
this.$detailFontFamily = this.$widget.find(".detail-font-family");
|
||||
|
||||
this.$monospaceFontSize = this.$widget.find(".monospace-font-size");
|
||||
this.$monospaceFontFamily = this.$widget.find(".monospace-font-family");
|
||||
|
||||
this.$widget.find(".reload-frontend-button").on("click", () => utils.reloadFrontendApp("changes from appearance options"));
|
||||
}
|
||||
|
||||
isEnabled() {
|
||||
return !!this._isEnabled;
|
||||
}
|
||||
|
||||
async optionsLoaded(options: OptionMap) {
|
||||
this._isEnabled = options.overrideThemeFonts === "true";
|
||||
this.toggleInt(this._isEnabled);
|
||||
if (!this._isEnabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.$mainFontSize.val(options.mainFontSize);
|
||||
this.fillFontFamilyOptions(this.$mainFontFamily, options.mainFontFamily);
|
||||
|
||||
this.$treeFontSize.val(options.treeFontSize);
|
||||
this.fillFontFamilyOptions(this.$treeFontFamily, options.treeFontFamily);
|
||||
|
||||
this.$detailFontSize.val(options.detailFontSize);
|
||||
this.fillFontFamilyOptions(this.$detailFontFamily, options.detailFontFamily);
|
||||
|
||||
this.$monospaceFontSize.val(options.monospaceFontSize);
|
||||
this.fillFontFamilyOptions(this.$monospaceFontFamily, options.monospaceFontFamily);
|
||||
|
||||
const optionsToSave: OptionNames[] = ["mainFontSize", "treeFontSize", "monospaceFontSize"];
|
||||
|
||||
for (const optionName of optionsToSave) {
|
||||
const $el = (this as any)[`$${optionName}`];
|
||||
$el.on("change", () => this.updateOption(optionName, $el.val()));
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user