Skip to content

Make input use same border stying as readback #105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Apr 30, 2025
Merged

Make input use same border stying as readback #105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5e32c4f
Changed border styling to match readback
NatLeung96 Apr 28, 2025
9120597
Updated snapshot
NatLeung96 Apr 30, 2025
489a348
Removed outlineWidth setting from Mui-focused
NatLeung96 Apr 30, 2025
a6c02bc
Put multiLine back into the TextField component
NatLeung96 Apr 30, 2025
28a79a4
Updated snapshot
NatLeung96 Apr 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/ui/widgets/Input/__snapshots__/input.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`<Input /> > renders an input 1`] = `
<DocumentFragment>
<div
class="MuiFormControl-root MuiTextField-root css-1x2hah6-MuiFormControl-root-MuiTextField-root"
class="MuiFormControl-root MuiTextField-root css-hbvq8u-MuiFormControl-root-MuiTextField-root"
>
<div
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl css-quhxjy-MuiInputBase-root-MuiOutlinedInput-root"
Expand Down
122 changes: 86 additions & 36 deletions src/ui/widgets/Input/input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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",
Expand All @@ -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") {
Expand All @@ -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(() => {
Expand All @@ -130,6 +172,7 @@ export const SmartInputComponent = (
<TextField
disabled={!enabled}
value={inputValue}
maxRows={maxRows}
multiline={multiLine}
variant="outlined"
type="text"
Expand All @@ -142,17 +185,24 @@ export const SmartInputComponent = (
sx={{
"& .MuiInputBase-input": {
textAlign: textAlign,
padding: "4px",
fontFamily: font
font: font
},
"& .MuiInputBase-root": {
alignItems: alignmentV,
color: foregroundColor,
backgroundColor: backgroundColor
},
"& fieldset": {
borderWidth: props.border?.width ?? "0px",
borderColor: props.border?.color.toString() ?? "#0000003B"
"& .MuiOutlinedInput-root": {
"& .MuiOutlinedInput-notchedOutline": {
outlineWidth: borderWidth,
outlineStyle: borderStyle,
outlineColor: borderColor
},
"&.Mui-focused": {
"& .MuiOutlinedInput-notchedOutline": {
borderWidth: "0px"
}
}
}
}}
/>
Expand Down
Loading