Update settings.tsx

display the font size number and example by the font size setting.
This commit is contained in:
leo 2023-03-29 21:58:45 +01:00
parent 8b4db412d8
commit b8222f5a1b

View File

@ -251,6 +251,13 @@ export function Settings(props: { closeSettings: () => void }) {
title={Locale.Settings.FontSize.Title}
subTitle={Locale.Settings.FontSize.SubTitle}
>
<>
<span
id="fontSizeDisplay"
style={{ fontSize: `${config.fontSize ?? 14}px` }}
>
{config.fontSize ?? 14}px
</span>
<input
type="range"
title={`${config.fontSize ?? 14}px`}
@ -261,10 +268,20 @@ export function Settings(props: { closeSettings: () => void }) {
onChange={(e) =>
updateConfig(
(config) =>
(config.fontSize = Number.parseInt(e.currentTarget.value)),
(config.fontSize = Number.parseInt(
e.currentTarget.value,
)),
)
}
onMouseMove={(e) => {
const fontSizeDisplay =
document.getElementById("fontSizeDisplay");
if (fontSizeDisplay) {
fontSizeDisplay.innerText = `${e.currentTarget.value}px`;
}
}}
></input>
</>
</SettingItem>
<div className="no-mobile">