diff --git a/markdown/bitburner.istylesettings.fontsize.md b/markdown/bitburner.istylesettings.fontsize.md new file mode 100644 index 000000000..79eba15ee --- /dev/null +++ b/markdown/bitburner.istylesettings.fontsize.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [bitburner](./bitburner.md) > [IStyleSettings](./bitburner.istylesettings.md) > [fontSize](./bitburner.istylesettings.fontsize.md) + +## IStyleSettings.fontSize property + +**Signature:** + +```typescript +fontSize: number; +``` diff --git a/markdown/bitburner.istylesettings.md b/markdown/bitburner.istylesettings.md index 75c364318..2df3eff1a 100644 --- a/markdown/bitburner.istylesettings.md +++ b/markdown/bitburner.istylesettings.md @@ -17,5 +17,7 @@ interface IStyleSettings | Property | Modifiers | Type | Description | | --- | --- | --- | --- | | [fontFamily](./bitburner.istylesettings.fontfamily.md) | | string | | +| [fontSize](./bitburner.istylesettings.fontsize.md) | | number | | | [lineHeight](./bitburner.istylesettings.lineheight.md) | | number | | +| [tailFontSize](./bitburner.istylesettings.tailfontsize.md) | | number | | diff --git a/markdown/bitburner.istylesettings.tailfontsize.md b/markdown/bitburner.istylesettings.tailfontsize.md new file mode 100644 index 000000000..716dbf3cf --- /dev/null +++ b/markdown/bitburner.istylesettings.tailfontsize.md @@ -0,0 +1,11 @@ + + +[Home](./index.md) > [bitburner](./bitburner.md) > [IStyleSettings](./bitburner.istylesettings.md) > [tailFontSize](./bitburner.istylesettings.tailfontsize.md) + +## IStyleSettings.tailFontSize property + +**Signature:** + +```typescript +tailFontSize: number; +``` diff --git a/src/ScriptEditor/NetscriptDefinitions.d.ts b/src/ScriptEditor/NetscriptDefinitions.d.ts index 8d6bca26f..56e9389c9 100644 --- a/src/ScriptEditor/NetscriptDefinitions.d.ts +++ b/src/ScriptEditor/NetscriptDefinitions.d.ts @@ -9562,6 +9562,8 @@ interface UserInterfaceTheme { */ interface IStyleSettings { fontFamily: string; + fontSize: number; + tailFontSize: number; lineHeight: number; } diff --git a/src/Themes/Styles.ts b/src/Themes/Styles.ts index e610639ad..fc82b0354 100644 --- a/src/Themes/Styles.ts +++ b/src/Themes/Styles.ts @@ -2,5 +2,7 @@ import { IStyleSettings } from "@nsdefs"; export const defaultStyles: IStyleSettings = { lineHeight: 1.5, + fontSize: 14, + tailFontSize: 16, fontFamily: `JetBrainsMono, "Courier New", monospace`, }; diff --git a/src/Themes/ui/StyleEditorModal.tsx b/src/Themes/ui/StyleEditorModal.tsx index a4253c243..7755374b3 100644 --- a/src/Themes/ui/StyleEditorModal.tsx +++ b/src/Themes/ui/StyleEditorModal.tsx @@ -20,18 +20,29 @@ interface IProps { onClose: () => void; } -interface FontFamilyProps { - value: React.CSSProperties["fontFamily"]; - onChange: (newValue: React.CSSProperties["fontFamily"], error?: string) => void; +interface StyleFieldProps { + name: string; + type: "string" | "number"; + value: React.CSSProperties[T]; + onChange: (newValue: React.CSSProperties[T], error?: string) => void; } -function FontFamilyField({ value, onChange }: FontFamilyProps): React.ReactElement { +function StyleField({ + value, + onChange, + name, + type, +}: StyleFieldProps): React.ReactElement { const [errorText, setErrorText] = useState(); - const [fontFamily, setFontFamily] = useState(value); + const [fieldValue, setFieldValue] = useState(value); - const update = (newValue: React.CSSProperties["fontFamily"]) => { - const errorText = newValue ? "" : "Must have a value"; - setFontFamily(newValue); + const update = (newValue: React.CSSProperties[T]) => { + const errorText = !newValue + ? "Must have a value" + : type === "number" && Number.isNaN(Number(newValue)) + ? "Must be a number" + : ""; + setFieldValue(newValue); setErrorText(errorText); onChange(newValue, errorText); }; @@ -39,45 +50,16 @@ function FontFamilyField({ value, onChange }: FontFamilyProps): React.ReactEleme return ( update(event.target.value)} + onChange={(event) => update(event.target.value as React.CSSProperties[T])} fullWidth /> ); } -interface LineHeightProps { - value: React.CSSProperties["lineHeight"]; - onChange: (newValue: React.CSSProperties["lineHeight"], error?: string) => void; -} - -function LineHeightField({ value, onChange }: LineHeightProps): React.ReactElement { - const [errorText, setErrorText] = useState(); - const [lineHeight, setLineHeight] = useState(value); - - const update = (newValue: React.CSSProperties["lineHeight"]) => { - const errorText = !newValue ? "Must have a value" : isNaN(Number(newValue)) ? "Must be a number" : ""; - - setLineHeight(newValue); - setErrorText(errorText); - onChange(newValue, errorText); - }; - - return ( - update(event.target.value)} - /> - ); -} - export function StyleEditorModal(props: IProps): React.ReactElement { const [error, setError] = useState(); const [customStyle, setCustomStyle] = useState({ @@ -114,12 +96,37 @@ export function StyleEditorModal(props: IProps): React.ReactElement { NOT recommended. - + name="Font Family" + type="string" value={customStyle.fontFamily} onChange={(value, error) => update({ ...customStyle, fontFamily: value ?? "" }, error)} />
- + name="Font Size" + type="number" + value={customStyle.fontSize * (16 / 14)} + onChange={(value, error) => + // MUI has an internal font size of 14, which then gets translated to 16px inside the typography. + // The font size that "overwrites" the tail font size is directly added by the styling. This value is in pixels. + // The inputs need to match, as two differently scaling inputs are hard to work with. + // To the user, both inputs are in pixels. The value MUI uses to set the font size needs to have this weird + // scaling of 16 to 14, so it will correctly scale back to 16px. + update({ ...customStyle, fontSize: Math.max(5, (Number(value) ?? 8) * (14 / 16)) }, error) + } + /> +
+ + name="Tail Font Size" + type="number" + value={customStyle.tailFontSize} + onChange={(value, error) => update({ ...customStyle, tailFontSize: Number(value) ?? 0 }, error)} + /> +
+ + name="Line Height" + type="number" value={customStyle.lineHeight} onChange={(value, error) => update({ ...customStyle, lineHeight: Number(value) ?? 0 }, error)} /> diff --git a/src/Themes/ui/Theme.tsx b/src/Themes/ui/Theme.tsx index c0ef696b8..c9b9e2cc9 100644 --- a/src/Themes/ui/Theme.tsx +++ b/src/Themes/ui/Theme.tsx @@ -114,6 +114,7 @@ export function refreshTheme(): void { }, typography: { fontFamily: Settings.styles.fontFamily, + fontSize: Settings.styles.fontSize, button: { textTransform: "none", }, diff --git a/src/ui/React/ANSIITypography.tsx b/src/ui/React/ANSIITypography.tsx index 1bc05aba8..6955f365a 100644 --- a/src/ui/React/ANSIITypography.tsx +++ b/src/ui/React/ANSIITypography.tsx @@ -60,6 +60,7 @@ const lineClass = (classes: Record, s: string): string => { type ANSIITypographyProps = { text: unknown; color: "primary" | "error" | "success" | "info" | "warn"; + styles?: React.CSSProperties; }; export const ANSIITypography = React.memo(function ANSIITypography(props: ANSIITypographyProps): React.ReactElement { @@ -94,9 +95,14 @@ export const ANSIITypography = React.memo(function ANSIITypography(props: ANSIIT parts.push({ code: null, text: text }); } return ( - + {parts.map((part, i) => ( - + {part.text} ))} diff --git a/src/ui/React/LogBoxManager.tsx b/src/ui/React/LogBoxManager.tsx index 2ac73898a..0839cdaa4 100644 --- a/src/ui/React/LogBoxManager.tsx +++ b/src/ui/React/LogBoxManager.tsx @@ -407,7 +407,19 @@ function LogWindow({ hidden, script, onClose }: LogWindowProps): React.ReactElem
{script.logs.map( (line: React.ReactNode, i: number): React.ReactNode => - typeof line !== "string" ? line : , + typeof line !== "string" ? ( + line + ) : ( + + ), )}