From 5dc9fb759581633bf6f8e6310a7a7e7fa61e5b3e Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Thu, 15 May 2025 15:46:47 +0100 Subject: [PATCH 1/6] Removed references to diamondTheme and implemented useTheme hook --- src/ui/widgets/ActionButton/actionButton.tsx | 11 +++++------ src/ui/widgets/BoolButton/boolButton.tsx | 10 +++++----- src/ui/widgets/Checkbox/checkbox.tsx | 13 +++++++------ src/ui/widgets/ChoiceButton/choiceButton.tsx | 11 ++++++----- src/ui/widgets/Input/input.tsx | 11 +++++------ src/ui/widgets/Label/label.tsx | 11 +++++------ src/ui/widgets/MenuButton/menuButton.tsx | 9 ++++----- src/ui/widgets/Readback/readback.tsx | 14 +++++++------- src/ui/widgets/SlideControl/slideControl.tsx | 10 +++++----- 9 files changed, 49 insertions(+), 51 deletions(-) diff --git a/src/ui/widgets/ActionButton/actionButton.tsx b/src/ui/widgets/ActionButton/actionButton.tsx index dbf05ce6..4335b5cf 100644 --- a/src/ui/widgets/ActionButton/actionButton.tsx +++ b/src/ui/widgets/ActionButton/actionButton.tsx @@ -20,9 +20,7 @@ import { Font } from "../../../types/font"; import { Border } from "../../../types/border"; import { MacroContext } from "../../../types/macros"; import { ExitFileContext, FileContext } from "../../../misc/fileContext"; -import { styled, Button as MuiButton } from "@mui/material"; - -import { diamondTheme } from "../../../diamondTheme"; +import { styled, Button as MuiButton, useTheme } from "@mui/material"; export interface ActionButtonProps { text: string; @@ -63,17 +61,18 @@ const Button = styled(MuiButton)({ export const ActionButtonComponent = ( props: ActionButtonProps ): JSX.Element => { + const theme = useTheme(); const { enabled = true, - foregroundColor = diamondTheme.palette.primary.contrastText, + foregroundColor = theme.palette.primary.contrastText, rotationStep = 0, transparent = false } = props; const backgroundColor = transparent ? "transparent" - : (props.backgroundColor?.toString() ?? diamondTheme.palette.primary.main); - const font = props.font?.css() ?? diamondTheme.typography; + : (props.backgroundColor?.toString() ?? theme.palette.primary.main); + const font = props.font?.css() ?? theme.typography; const border = props.border?.css() ?? null; return ( diff --git a/src/ui/widgets/BoolButton/boolButton.tsx b/src/ui/widgets/BoolButton/boolButton.tsx index 14adcf8b..a34b6360 100644 --- a/src/ui/widgets/BoolButton/boolButton.tsx +++ b/src/ui/widgets/BoolButton/boolButton.tsx @@ -16,8 +16,7 @@ import classes from "./boolButton.module.css"; import { writePv } from "../../hooks/useSubscription"; import { DType } from "../../../types/dtypes"; import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser"; -import { Button as MuiButton, styled } from "@mui/material"; -import { diamondTheme } from "../../../diamondTheme"; +import { Button as MuiButton, styled, useTheme } from "@mui/material"; // For HTML button, these are the sizes of the buffer on // width and height. Must take into account when allocating @@ -83,11 +82,12 @@ export type BoolButtonComponentProps = InferWidgetProps< export const BoolButtonComponent = ( props: BoolButtonComponentProps ): JSX.Element => { + const theme = useTheme(); const { width = WIDGET_DEFAULT_SIZES["bool_button"][0], height = WIDGET_DEFAULT_SIZES["bool_button"][1], - foregroundColor = diamondTheme.palette.primary.contrastText, - backgroundColor = diamondTheme.palette.primary.main, + foregroundColor = theme.palette.primary.contrastText, + backgroundColor = theme.palette.primary.main, pvName, value, onState = 1, @@ -101,7 +101,7 @@ export const BoolButtonComponent = ( enabled = true } = props; - const font = props.font?.css() ?? diamondTheme.typography; + const font = props.font?.css() ?? theme.typography; // These could be overwritten by PV labels let { onLabel = "On", offLabel = "Off" } = props; diff --git a/src/ui/widgets/Checkbox/checkbox.tsx b/src/ui/widgets/Checkbox/checkbox.tsx index 734c5cf7..5861ec79 100644 --- a/src/ui/widgets/Checkbox/checkbox.tsx +++ b/src/ui/widgets/Checkbox/checkbox.tsx @@ -13,9 +13,9 @@ import { registerWidget } from "../register"; import { FormControlLabel as MuiFormControlLabel, Checkbox as MuiCheckbox, - styled + styled, + useTheme } from "@mui/material"; -import { diamondTheme } from "../../../diamondTheme"; export const CheckboxProps = { label: StringPropOpt, @@ -61,6 +61,7 @@ export type CheckboxComponentProps = InferWidgetProps & export const CheckboxComponent = ( props: CheckboxComponentProps ): JSX.Element => { + const theme = useTheme(); const { enabled = true } = props; const [checked, setChecked] = useState(true); @@ -74,9 +75,9 @@ export const CheckboxComponent = ( sx={{ color: props.foregroundColor?.toString() ?? - diamondTheme.palette.primary.contrastText, + theme.palette.primary.contrastText, ".MuiFormControlLabel-label": { - fontFamily: props.font?.css() ?? diamondTheme.typography + fontFamily: props.font?.css() ?? theme.typography } }} control={ @@ -85,9 +86,9 @@ export const CheckboxComponent = ( onChange={handleChange} sx={{ padding: 0, - color: diamondTheme.palette.primary.main, + color: theme.palette.primary.main, "&.Mui-checked": { - color: diamondTheme.palette.primary.main + color: theme.palette.primary.main } }} /> diff --git a/src/ui/widgets/ChoiceButton/choiceButton.tsx b/src/ui/widgets/ChoiceButton/choiceButton.tsx index 5b61941b..7e0fd920 100644 --- a/src/ui/widgets/ChoiceButton/choiceButton.tsx +++ b/src/ui/widgets/ChoiceButton/choiceButton.tsx @@ -17,9 +17,9 @@ import { writePv } from "../../hooks/useSubscription"; import { ToggleButton as MuiToggleButton, styled, - ToggleButtonGroup + ToggleButtonGroup, + useTheme } from "@mui/material"; -import { diamondTheme } from "../../../diamondTheme"; import { Color } from "../../../types"; const ChoiceButtonProps = { @@ -67,6 +67,7 @@ const ToggleButton = styled(MuiToggleButton)({ export const ChoiceButtonComponent = ( props: ChoiceButtonComponentProps ): JSX.Element => { + const theme = useTheme(); const { width = 100, height = 43, @@ -76,11 +77,11 @@ export const ChoiceButtonComponent = ( pvName, items = ["Item 1", "Item 2"], horizontal = true, - foregroundColor = diamondTheme.palette.primary.contrastText, - backgroundColor = diamondTheme.palette.primary.main, + foregroundColor = theme.palette.primary.contrastText, + backgroundColor = theme.palette.primary.main, selectedColor = Color.fromRgba(200, 200, 200) } = props; - const font = props.font?.css() ?? diamondTheme.typography; + const font = props.font?.css() ?? theme.typography; const [selected, setSelected] = useState(value?.getDoubleValue()); // Use items from file, unless itemsFRomPv set diff --git a/src/ui/widgets/Input/input.tsx b/src/ui/widgets/Input/input.tsx index dba686e6..6b01c88a 100644 --- a/src/ui/widgets/Input/input.tsx +++ b/src/ui/widgets/Input/input.tsx @@ -15,8 +15,7 @@ import { FloatPropOpt } from "../propTypes"; import { AlarmQuality, DType } from "../../../types/dtypes"; -import { TextField as MuiTextField, styled } from "@mui/material"; -import { diamondTheme } from "../../../diamondTheme"; +import { TextField as MuiTextField, styled, useTheme } from "@mui/material"; import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser"; const InputComponentProps = { @@ -73,6 +72,7 @@ const TextField = styled(MuiTextField)({ export const SmartInputComponent = ( props: PVInputComponent & InferWidgetProps ): JSX.Element => { + const theme = useTheme(); const { enabled = true, transparent = false, @@ -84,11 +84,10 @@ export const SmartInputComponent = ( height = WIDGET_DEFAULT_SIZES["textupdate"][1] } = props; - const font = props.font?.css() ?? diamondTheme.typography; + const font = props.font?.css() ?? theme.typography; let foregroundColor = - props.foregroundColor?.toString() ?? - diamondTheme.palette.primary.contrastText; + props.foregroundColor?.toString() ?? theme.palette.primary.contrastText; let borderColor = props.border?.css().borderColor ?? "#000000"; let borderStyle = props.border?.css().borderStyle ?? "solid"; @@ -138,7 +137,7 @@ export const SmartInputComponent = ( .match(/\d+.\d+/) ?.toString() ?? "" ) * 16 - : diamondTheme.typography.fontSize; + : theme.typography.fontSize; const maxRows = multiLine ? Math.floor(height / fontSize) - 1 < 1 diff --git a/src/ui/widgets/Label/label.tsx b/src/ui/widgets/Label/label.tsx index 44d837b8..64c4685c 100644 --- a/src/ui/widgets/Label/label.tsx +++ b/src/ui/widgets/Label/label.tsx @@ -1,5 +1,4 @@ import React from "react"; - import { Widget } from "../widget"; import { WidgetPropType } from "../widgetProps"; import { registerWidget } from "../register"; @@ -14,8 +13,7 @@ import { FloatPropOpt, MacrosPropOpt } from "../propTypes"; -import { Typography as MuiTypography, styled } from "@mui/material"; -import { diamondTheme } from "../../../diamondTheme"; +import { Typography as MuiTypography, styled, useTheme } from "@mui/material"; const LabelProps = { macros: MacrosPropOpt, @@ -49,10 +47,11 @@ const Typography = styled(MuiTypography)({ export const LabelComponent = ( props: InferWidgetProps ): JSX.Element => { + const theme = useTheme(); // Default labels to transparent. const { transparent = true, - foregroundColor = diamondTheme.palette.primary.contrastText, + foregroundColor = theme.palette.primary.contrastText, textAlign = "left", textAlignV = "top", text = "", @@ -61,8 +60,8 @@ export const LabelComponent = ( } = props; const backgroundColor = transparent ? "transparent" - : (props.backgroundColor?.toString() ?? diamondTheme.palette.primary.main); - const font = props.font?.css() ?? diamondTheme.typography; + : (props.backgroundColor?.toString() ?? theme.palette.primary.main); + const font = props.font?.css() ?? theme.typography; const border = props.border?.css() ?? "0px solid #000000"; // Since display is "flex", use "flex-start" and "flex-end" to align diff --git a/src/ui/widgets/MenuButton/menuButton.tsx b/src/ui/widgets/MenuButton/menuButton.tsx index 3f6f7940..e4247c96 100644 --- a/src/ui/widgets/MenuButton/menuButton.tsx +++ b/src/ui/widgets/MenuButton/menuButton.tsx @@ -1,5 +1,4 @@ import React, { useContext, useEffect, useState } from "react"; - import { Widget } from "../widget"; import { PVWidgetPropType } from "../widgetProps"; import { registerWidget } from "../register"; @@ -23,8 +22,7 @@ import { import { FileContext } from "../../../misc/fileContext"; import { Border } from "../../../types/border"; import { Color } from "../../../types/color"; -import { MenuItem, Select, SelectChangeEvent } from "@mui/material"; -import { diamondTheme } from "../../../diamondTheme"; +import { MenuItem, Select, SelectChangeEvent, useTheme } from "@mui/material"; import { Font } from "../../../types"; export interface MenuButtonProps { @@ -59,6 +57,7 @@ const MenuButtonComponentProps = { }; export const MenuButtonComponent = (props: MenuButtonProps): JSX.Element => { + const theme = useTheme(); const { connected, value = null, @@ -67,8 +66,8 @@ export const MenuButtonComponent = (props: MenuButtonProps): JSX.Element => { itemsFromPv = true, pvName, label, - foregroundColor = diamondTheme.palette.primary.contrastText, - backgroundColor = diamondTheme.palette.primary.main, + foregroundColor = theme.palette.primary.contrastText, + backgroundColor = theme.palette.primary.main, items = ["Item 1", "Item 2"] } = props; const fromPv = actionsFromPv && itemsFromPv; diff --git a/src/ui/widgets/Readback/readback.tsx b/src/ui/widgets/Readback/readback.tsx index 96dcfeb0..1136f82b 100644 --- a/src/ui/widgets/Readback/readback.tsx +++ b/src/ui/widgets/Readback/readback.tsx @@ -16,8 +16,7 @@ import { } from "../propTypes"; import { registerWidget } from "../register"; import { AlarmQuality, DType } from "../../../types/dtypes"; -import { TextField as MuiTextField, styled } from "@mui/material"; -import { diamondTheme } from "../../../diamondTheme"; +import { TextField as MuiTextField, styled, useTheme } from "@mui/material"; import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser"; const ReadbackProps = { @@ -76,6 +75,7 @@ export type ReadbackComponentProps = InferWidgetProps & export const ReadbackComponent = ( props: ReadbackComponentProps ): JSX.Element => { + const theme = useTheme(); const { enabled = true, value, @@ -93,6 +93,7 @@ export const ReadbackComponent = ( height = WIDGET_DEFAULT_SIZES["textupdate"][1], width = WIDGET_DEFAULT_SIZES["textupdate"][0] } = props; + // Decide what to display. const display = value?.getDisplay(); const prec = precisionFromPv ? (display?.precision ?? precision) : precision; @@ -137,8 +138,7 @@ export const ReadbackComponent = ( } let foregroundColor = - props.foregroundColor?.toString() ?? - diamondTheme.palette.primary.contrastText; + props.foregroundColor?.toString() ?? theme.palette.primary.contrastText; let borderColor = props.border?.color.toString() ?? "#000000"; let borderStyle = props.border?.css().borderStyle ?? "solid"; let borderWidth = props.border?.width ?? "0px"; @@ -163,11 +163,11 @@ export const ReadbackComponent = ( } } - const font = props.font?.css() ?? diamondTheme.typography; + const font = props.font?.css() ?? theme.typography; const backgroundColor = transparent ? "transparent" - : (props.backgroundColor?.toString() ?? diamondTheme.palette.primary.main); + : (props.backgroundColor?.toString() ?? theme.palette.primary.main); let alignmentV = "center"; if (textAlignV === "top") { @@ -186,7 +186,7 @@ export const ReadbackComponent = ( .match(/\d+.\d+/) ?.toString() ?? "" ) * 16 - : diamondTheme.typography.fontSize; + : theme.typography.fontSize; const inputWidth = rotationStep === 0 || rotationStep === 2 ? width : height; const inputHeight = rotationStep === 0 || rotationStep === 2 ? height : width; diff --git a/src/ui/widgets/SlideControl/slideControl.tsx b/src/ui/widgets/SlideControl/slideControl.tsx index 70c81aba..56434bb8 100644 --- a/src/ui/widgets/SlideControl/slideControl.tsx +++ b/src/ui/widgets/SlideControl/slideControl.tsx @@ -15,8 +15,7 @@ import { } from "../propTypes"; import { registerWidget } from "../register"; import { DType } from "../../../types/dtypes"; -import { Slider } from "@mui/material"; -import { diamondTheme } from "../../../diamondTheme"; +import { Slider, useTheme } from "@mui/material"; export const SliderControlProps = { min: FloatPropOpt, @@ -49,6 +48,7 @@ export const SliderControlProps = { export const SlideControlComponent = ( props: InferWidgetProps & PVInputComponent ): JSX.Element => { + const theme = useTheme(); const { pvName, connected, @@ -56,8 +56,8 @@ export const SlideControlComponent = ( enabled = true, horizontal = true, limitsFromPv = false, - foregroundColor = diamondTheme.palette.primary.contrastText, - backgroundColor = diamondTheme.palette.primary.main, + foregroundColor = theme.palette.primary.contrastText, + backgroundColor = theme.palette.primary.main, levelHihi = 90, levelHigh = 80, levelLow = 20, @@ -72,7 +72,7 @@ export const SlideControlComponent = ( let { min = 0, max = 100 } = props; const disabled = !connected || value === null ? true : !enabled; - const font = props.font?.css() ?? diamondTheme.typography; + const font = props.font?.css() ?? theme.typography; if (limitsFromPv && value?.display.controlRange) { min = value.display.controlRange?.min; From edb6261bb1a4f9f4297539c77b69960b6bf9b0b1 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Thu, 15 May 2025 15:47:09 +0100 Subject: [PATCH 2/6] Updated snapshots --- .../__snapshots__/actionButton.test.tsx.snap | 2 +- .../__snapshots__/boolButton.test.tsx.snap | 6 +++--- .../__snapshots__/choiceButton.test.tsx.snap | 12 ++++++------ .../widgets/Input/__snapshots__/input.test.tsx.snap | 2 +- .../widgets/Label/__snapshots__/label.test.tsx.snap | 4 ++-- .../__snapshots__/menuButton.test.tsx.snap | 2 +- .../Readback/__snapshots__/readback.test.tsx.snap | 2 +- .../Symbol/__snapshots__/symbol.test.tsx.snap | 2 +- 8 files changed, 16 insertions(+), 16 deletions(-) diff --git a/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap b/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap index 07c057d4..c43a1755 100644 --- a/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap +++ b/src/ui/widgets/ActionButton/__snapshots__/actionButton.test.tsx.snap @@ -2,7 +2,7 @@ exports[` > it matches the snapshot 1`] = `