From 5e32c4fb3e0c5a7a9f2b217f112a15427c1c6aef Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Mon, 28 Apr 2025 10:42:12 +0100 Subject: [PATCH 1/5] Changed border styling to match readback --- src/ui/widgets/Input/input.tsx | 124 +++++++++++++++++++++++---------- 1 file changed, 87 insertions(+), 37 deletions(-) diff --git a/src/ui/widgets/Input/input.tsx b/src/ui/widgets/Input/input.tsx index 8cdc0a2c..d3883741 100644 --- a/src/ui/widgets/Input/input.tsx +++ b/src/ui/widgets/Input/input.tsx @@ -11,11 +11,13 @@ import { ColorPropOpt, BoolPropOpt, BorderPropOpt, - StringPropOpt + StringPropOpt, + FloatPropOpt } from "../propTypes"; import { AlarmQuality, DType } from "../../../types/dtypes"; import { TextField as MuiTextField, styled } from "@mui/material"; import { diamondTheme } from "../../../diamondTheme"; +import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser"; const InputComponentProps = { pvName: StringPropOpt, @@ -28,27 +30,38 @@ const InputComponentProps = { textAlign: ChoicePropOpt(["left", "center", "right"]), textAlignV: ChoicePropOpt(["top", "center", "bottom"]), border: BorderPropOpt, - multiLine: BoolPropOpt + multiLine: BoolPropOpt, + height: FloatPropOpt }; const TextField = styled(MuiTextField)({ + // MUI Textfield contains a fieldset with a legend that needs to be removed + "& .css-w4cd9x": { + lineHeight: "0px" + }, "&.MuiFormControl-root": { height: "100%", width: "100%", - display: "block" + display: "flex" }, "& .MuiInputBase-root": { + height: "100%", + width: "100%", + padding: "0px 4px" + }, + "& .MuiInputBase-input": { + padding: "0px", + lineHeight: 1, + textOverflow: "ellipsis", + whiteSpace: "pre-wrap", height: "100%", width: "100%" }, "& .MuiOutlinedInput-root": { - "&:hover fieldset": { - borderWidth: "1px", - borderColor: "#1976D2" - }, - "&.Mui-focused fieldset": { - borderWidth: "2px", - borderColor: "#1976D2" + "& .MuiOutlinedInput-notchedOutline": { + borderRadius: "4px", + borderWidth: "0px", + inset: "0px" }, "&.Mui-disabled": { cursor: "not-allowed", @@ -66,32 +79,43 @@ export const SmartInputComponent = ( textAlign = "left", textAlignV = "center", value = null, - multiLine = false + multiLine = false, + alarmSensitive = true, + height = WIDGET_DEFAULT_SIZES["textupdate"][1] } = props; const font = props.font?.css() ?? diamondTheme.typography; + let foregroundColor = + props.foregroundColor?.toString() ?? + diamondTheme.palette.primary.contrastText; + + let borderColor = props.border?.css().borderColor ?? "#000000"; + let borderStyle = props.border?.css().borderStyle ?? "solid"; + let borderWidth = props.border?.width ?? "0px"; + const alarmQuality = props.value?.getAlarm().quality ?? AlarmQuality.VALID; - const foregroundColor = props.alarmSensitive - ? function () { - switch (alarmQuality) { - case AlarmQuality.UNDEFINED: - case AlarmQuality.INVALID: - case AlarmQuality.CHANGING: - return "var(--invalid)"; - case AlarmQuality.WARNING: - return "var(--alarm)"; - case AlarmQuality.ALARM: - return "var(--alarm)"; - case AlarmQuality.VALID: - return ( - props.foregroundColor?.toString() ?? - diamondTheme.palette.primary.contrastText - ); - } - } - : (props.foregroundColor?.toString() ?? - diamondTheme.palette.primary.contrastText); + if (alarmSensitive) { + switch (alarmQuality) { + case AlarmQuality.UNDEFINED: + case AlarmQuality.INVALID: + case AlarmQuality.CHANGING: + foregroundColor = "var(--invalid)"; + borderColor = "var(--invalid)"; + borderStyle = "solid"; + borderWidth = "1px"; + break; + case AlarmQuality.ALARM: + case AlarmQuality.WARNING: + foregroundColor = "var(--alarm)"; + borderColor = "var(--alarm)"; + borderStyle = "solid"; + borderWidth = "2px"; + break; + default: + break; + } + } let alignmentV = "center"; if (textAlignV === "top") { @@ -104,6 +128,24 @@ export const SmartInputComponent = ( ? "transparent" : (props.backgroundColor?.toString() ?? "#80FFFF"); + // If props.font exists, extracts the font size in rem and returns is back to size in px + // using the default browser size of 16px, as used in ../../../types/font.ts + const fontSize = props.font?.css().fontSize + ? parseFloat( + props.font + .css() + .fontSize?.toString() + .match(/\d+.\d+/) + ?.toString() ?? "" + ) * 16 + : diamondTheme.typography.fontSize; + + const maxRows = multiLine + ? Math.floor(height / fontSize) - 1 < 1 + ? 1 + : Math.floor(height / fontSize) - 1 + : 1; + const [inputValue, setInputValue] = useState(value?.getStringValue() ?? ""); useEffect(() => { @@ -130,7 +172,7 @@ export const SmartInputComponent = ( From 9120597673aa9217cdbc130854328fb77a748332 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Wed, 30 Apr 2025 11:09:54 +0100 Subject: [PATCH 2/5] Updated snapshot --- src/ui/widgets/Input/__snapshots__/input.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/widgets/Input/__snapshots__/input.test.tsx.snap b/src/ui/widgets/Input/__snapshots__/input.test.tsx.snap index 8c4ef680..97639785 100644 --- a/src/ui/widgets/Input/__snapshots__/input.test.tsx.snap +++ b/src/ui/widgets/Input/__snapshots__/input.test.tsx.snap @@ -3,7 +3,7 @@ exports[` > renders an input 1`] = `
Date: Wed, 30 Apr 2025 14:19:39 +0100 Subject: [PATCH 3/5] Removed outlineWidth setting from Mui-focused --- src/ui/widgets/Input/input.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/ui/widgets/Input/input.tsx b/src/ui/widgets/Input/input.tsx index d3883741..d96935c2 100644 --- a/src/ui/widgets/Input/input.tsx +++ b/src/ui/widgets/Input/input.tsx @@ -199,7 +199,6 @@ export const SmartInputComponent = ( }, "&.Mui-focused": { "& .MuiOutlinedInput-notchedOutline": { - outlineWidth: "2px", borderWidth: "0px" } } From a6c02bc4bbfc1c80437b2bfeeb51e89d48ab0362 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Wed, 30 Apr 2025 14:23:11 +0100 Subject: [PATCH 4/5] Put multiLine back into the TextField component --- src/ui/widgets/Input/input.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/ui/widgets/Input/input.tsx b/src/ui/widgets/Input/input.tsx index d96935c2..dba686e6 100644 --- a/src/ui/widgets/Input/input.tsx +++ b/src/ui/widgets/Input/input.tsx @@ -173,6 +173,7 @@ export const SmartInputComponent = ( disabled={!enabled} value={inputValue} maxRows={maxRows} + multiline={multiLine} variant="outlined" type="text" slotProps={{ From 28a79a467133d032344a44484678c8946c215f0e Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Wed, 30 Apr 2025 14:26:42 +0100 Subject: [PATCH 5/5] Updated snapshot --- src/ui/widgets/Input/__snapshots__/input.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ui/widgets/Input/__snapshots__/input.test.tsx.snap b/src/ui/widgets/Input/__snapshots__/input.test.tsx.snap index 97639785..75db05ba 100644 --- a/src/ui/widgets/Input/__snapshots__/input.test.tsx.snap +++ b/src/ui/widgets/Input/__snapshots__/input.test.tsx.snap @@ -3,7 +3,7 @@ exports[` > renders an input 1`] = `