From fd0308b405e67485b487b3845f6ccc84dd16f3f1 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Fri, 16 May 2025 11:07:57 +0100 Subject: [PATCH 1/5] Fixed widget rotation --- src/ui/widgets/Label/label.tsx | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/src/ui/widgets/Label/label.tsx b/src/ui/widgets/Label/label.tsx index 44d837b8..0058ee67 100644 --- a/src/ui/widgets/Label/label.tsx +++ b/src/ui/widgets/Label/label.tsx @@ -16,6 +16,7 @@ import { } from "../propTypes"; import { Typography as MuiTypography, styled } from "@mui/material"; import { diamondTheme } from "../../../diamondTheme"; +import { WIDGET_DEFAULT_SIZES } from "../EmbeddedDisplay/bobParser"; const LabelProps = { macros: MacrosPropOpt, @@ -30,7 +31,9 @@ const LabelProps = { backgroundColor: ColorPropOpt, border: BorderPropOpt, rotationStep: FloatPropOpt, - wrapWords: BoolPropOpt + wrapWords: BoolPropOpt, + height: FloatPropOpt, + width: FloatPropOpt }; const LabelWidgetProps = { @@ -57,13 +60,23 @@ export const LabelComponent = ( textAlignV = "top", text = "", rotationStep = 0, - wrapWords = true + wrapWords = true, + height = WIDGET_DEFAULT_SIZES["label"][1], + width = WIDGET_DEFAULT_SIZES["label"][0] } = props; const backgroundColor = transparent ? "transparent" : (props.backgroundColor?.toString() ?? diamondTheme.palette.primary.main); const font = props.font?.css() ?? diamondTheme.typography; - const border = props.border?.css() ?? "0px solid #000000"; + + const inputWidth = rotationStep === 0 || rotationStep === 2 ? width : height; + const inputHeight = rotationStep === 0 || rotationStep === 2 ? height : width; + + const offset = width / 2 - height / 2; + const transform = + rotationStep === 1 || rotationStep === 3 + ? `rotate(${rotationStep * -90}deg) translateY(${-offset}px) translateX(${-offset}px)` + : `rotate(${rotationStep * -90}deg)`; // Since display is "flex", use "flex-start" and "flex-end" to align // the content. @@ -88,14 +101,15 @@ export const LabelComponent = ( sx={{ justifyContent: alignment, alignItems: alignmentV, + height: inputHeight, + width: inputWidth, textAlign: textAlign, wordBreak: wrapWords ? "break-word" : null, whiteSpace: wrapWords ? "break-spaces" : null, color: foregroundColor.toString(), backgroundColor: backgroundColor, fontFamily: font, - transform: `rotate(${rotationStep * -90}deg)`.toString(), - border: border + transform: transform.toString(), }} > {text} From 60267f11bc12de26342755fdfacf3dfd4de30167 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Fri, 16 May 2025 11:08:26 +0100 Subject: [PATCH 2/5] Updated border styling to match phoebus and added rounded corners --- src/ui/widgets/Label/label.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/ui/widgets/Label/label.tsx b/src/ui/widgets/Label/label.tsx index 0058ee67..1659ba93 100644 --- a/src/ui/widgets/Label/label.tsx +++ b/src/ui/widgets/Label/label.tsx @@ -42,10 +42,11 @@ const LabelWidgetProps = { }; const Typography = styled(MuiTypography)({ - width: "100%", - height: "100%", display: "flex", overflow: "hidden", + borderRadius: "4px", + borderWidth: "0px", + lineHeight: 1, padding: 0 }); @@ -68,6 +69,9 @@ export const LabelComponent = ( ? "transparent" : (props.backgroundColor?.toString() ?? diamondTheme.palette.primary.main); const font = props.font?.css() ?? diamondTheme.typography; + const borderWidth = props.border?.css().borderWidth ?? "0px"; + const borderColor = props.border?.css().borderColor ?? "#000000"; + const borderStyle = props.border?.css().borderStyle ?? "solid"; const inputWidth = rotationStep === 0 || rotationStep === 2 ? width : height; const inputHeight = rotationStep === 0 || rotationStep === 2 ? height : width; @@ -110,6 +114,9 @@ export const LabelComponent = ( backgroundColor: backgroundColor, fontFamily: font, transform: transform.toString(), + outlineWidth: borderWidth, + outlineColor: borderColor, + outlineStyle: borderStyle }} > {text} From 7a1ec1ed2c6d5d955f0ced0b0e7f604b12fe3023 Mon Sep 17 00:00:00 2001 From: NatLeung96 Date: Fri, 16 May 2025 11:20:23 +0100 Subject: [PATCH 3/5] Corrected offsets for 90 and -90 deg rotations --- src/ui/widgets/Label/label.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/ui/widgets/Label/label.tsx b/src/ui/widgets/Label/label.tsx index 1659ba93..e9f3b5a7 100644 --- a/src/ui/widgets/Label/label.tsx +++ b/src/ui/widgets/Label/label.tsx @@ -77,10 +77,19 @@ export const LabelComponent = ( const inputHeight = rotationStep === 0 || rotationStep === 2 ? height : width; const offset = width / 2 - height / 2; - const transform = - rotationStep === 1 || rotationStep === 3 - ? `rotate(${rotationStep * -90}deg) translateY(${-offset}px) translateX(${-offset}px)` - : `rotate(${rotationStep * -90}deg)`; + const transform = (function () { + switch (rotationStep) { + case 0: // 0 degrees + case 2: // 180 degrees + return `rotate(${rotationStep * -90}deg)`; + case 1: // 90 degrees + return `rotate(${rotationStep * -90}deg) translateY(${offset}px) translateX(${offset}px)`; + case 3: // -90 degrees + return `rotate(${rotationStep * -90}deg) translateY(${-offset}px) translateX(${-offset}px)`; + default: // Unreachable + return ""; + } + })(); // Since display is "flex", use "flex-start" and "flex-end" to align // the content. From cdb2d02fc623c2d2478ecb8cbb44130d4b424929 Mon Sep 17 00:00:00 2001 From: NatLeung96 <84187731+NatLeung96@users.noreply.github.com> Date: Tue, 20 May 2025 13:07:33 +0100 Subject: [PATCH 4/5] Generalise use of themes (#117) * Removed references to diamondTheme and implemented useTheme hook * Updated snapshots * Added theme prop to embeddedDisplay widget * Renamed diamondTheme to phoebusTheme * Renamed exported theme to phoebusTheme * Use phoebusTheme as default instead of the MUI default --- src/{diamondTheme.ts => phoebusTheme.ts} | 2 +- .../__snapshots__/actionButton.test.tsx.snap | 2 +- src/ui/widgets/ActionButton/actionButton.tsx | 11 +++---- .../__snapshots__/boolButton.test.tsx.snap | 6 ++-- src/ui/widgets/BoolButton/boolButton.tsx | 10 +++--- src/ui/widgets/Checkbox/checkbox.tsx | 13 ++++---- .../__snapshots__/choiceButton.test.tsx.snap | 12 +++---- src/ui/widgets/ChoiceButton/choiceButton.tsx | 11 ++++--- src/ui/widgets/DynamicPage/dynamicPage.tsx | 4 +++ .../EmbeddedDisplay/embeddedDisplay.tsx | 31 ++++++++++++------- .../Input/__snapshots__/input.test.tsx.snap | 2 +- src/ui/widgets/Input/input.tsx | 11 +++---- .../Label/__snapshots__/label.test.tsx.snap | 4 +-- src/ui/widgets/Label/label.tsx | 11 +++---- .../__snapshots__/menuButton.test.tsx.snap | 2 +- src/ui/widgets/MenuButton/menuButton.tsx | 9 +++--- .../__snapshots__/readback.test.tsx.snap | 2 +- src/ui/widgets/Readback/readback.tsx | 14 ++++----- src/ui/widgets/SlideControl/slideControl.tsx | 10 +++--- .../Symbol/__snapshots__/symbol.test.tsx.snap | 2 +- 20 files changed, 90 insertions(+), 79 deletions(-) rename src/{diamondTheme.ts => phoebusTheme.ts} (90%) diff --git a/src/diamondTheme.ts b/src/phoebusTheme.ts similarity index 90% rename from src/diamondTheme.ts rename to src/phoebusTheme.ts index b2d1d83d..5adb0bd4 100644 --- a/src/diamondTheme.ts +++ b/src/phoebusTheme.ts @@ -1,6 +1,6 @@ import { createTheme } from "@mui/material/styles"; -export const diamondTheme = createTheme({ +export const phoebusTheme = createTheme({ palette: { primary: { main: "#D2D2D2", 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`] = `