brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

replaced all instances of the styled toggle with the new buttongroup common component

Browse source
This commit is contained in:
csawatzky 2025-05-13 11:55:13 -06:00
parent 269417a321
commit af25036640
5 changed files with 306 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

115
src/bin/BinSVGV2.tsx
View file

@ -1,5 +1,6 @@
import { Box, Theme, ToggleButton, ToggleButtonGroup, darken } from "@mui/material";
import { makeStyles, withStyles } from "@mui/styles";
import ButtonGroup from "common/ButtonGroup";
import { ExtractMoisture } from "grain";
import { GrainCable } from "models/GrainCable";
import { describeMeasurement } from "pbHelpers/MeasurementDescriber";
@ -212,54 +213,54 @@ export default function BinSVGV2(props: Props) {
const [extraDetails, setExtraDetails] = useState<"temps" | "hums">("temps");
const [nodeWarning, setNodeWarning] = useState(false);
const StyledToggleButtonGroup = withStyles(theme => ({
grouped: {
margin: theme.spacing(-0.5),
border: "none",
padding: theme.spacing(1),
"&:not(:first-child):not(:last-child)": {
borderRadius: 24,
marginRight: theme.spacing(0.5),
marginLeft: theme.spacing(0.5)
},
"&:first-child": {
borderRadius: 24,
marginLeft: theme.spacing(0.25)
},
"&:last-child": {
borderRadius: 24,
marginRight: theme.spacing(0.25)
}
},
root: {
backgroundColor: darken(
theme.palette.background.paper,
getThemeType() === "light" ? 0.05 : 0.25
),
borderRadius: 24,
content: "border-box"
}
}))(ToggleButtonGroup);
// const StyledToggleButtonGroup = withStyles(theme => ({
// grouped: {
// margin: theme.spacing(-0.5),
// border: "none",
// padding: theme.spacing(1),
// "&:not(:first-child):not(:last-child)": {
// borderRadius: 24,
// marginRight: theme.spacing(0.5),
// marginLeft: theme.spacing(0.5)
// },
// "&:first-child": {
// borderRadius: 24,
// marginLeft: theme.spacing(0.25)
// },
// "&:last-child": {
// borderRadius: 24,
// marginRight: theme.spacing(0.25)
// }
// },
// root: {
// backgroundColor: darken(
// theme.palette.background.paper,
// getThemeType() === "light" ? 0.05 : 0.25
// ),
// borderRadius: 24,
// content: "border-box"
// }
// }))(ToggleButtonGroup);
const StyledToggle = withStyles({
root: {
backgroundColor: "transparent",
overflow: "visible",
content: "content-box",
"&$selected": {
backgroundColor: "gold",
color: "black",
borderRadius: 24,
fontWeight: "bold"
},
"&$selected:hover": {
backgroundColor: "rgb(255, 255, 0)",
color: "black",
borderRadius: 24
}
},
selected: {}
})(ToggleButton);
// const StyledToggle = withStyles({
// root: {
// backgroundColor: "transparent",
// overflow: "visible",
// content: "content-box",
// "&$selected": {
// backgroundColor: "gold",
// color: "black",
// borderRadius: 24,
// fontWeight: "bold"
// },
// "&$selected:hover": {
// backgroundColor: "rgb(255, 255, 0)",
// color: "black",
// borderRadius: 24
// }
// },
// selected: {}
// })(ToggleButton);
const gradients = () => {
const burning = "#8a1f0d";
@ -1047,10 +1048,26 @@ export default function BinSVGV2(props: Props) {
<React.Fragment>
{showTempHum && (
<Box
display="flex"
alignContent="center"
justifyContent="center"
textAlign="center"
//visibility={showTempHum ? "visible" : "hidden"}
className={!isFullScreen ? classes.smallToggle : classes.fullToggle}>
<StyledToggleButtonGroup
<ButtonGroup
buttons={[
{
title: isFullScreen ? "Temperature" : "Temp",
function: () => setExtraDetails("temps")
},
{
title: grainType ? (isFullScreen ? "Moisture" : "EMC") : isFullScreen ? "Humidity" : "Hum",
function: () => setExtraDetails("hums")
}
]}
toggle
/>
{/* <StyledToggleButtonGroup
value={extraDetails}
exclusive
size="small"
@ -1067,7 +1084,7 @@ export default function BinSVGV2(props: Props) {
aria-label="Node Humidity">
{grainType ? (isFullScreen ? "Moisture" : "EMC") : isFullScreen ? "Humidity" : "Hum"}
</StyledToggle>
</StyledToggleButtonGroup>
</StyledToggleButtonGroup> */}
</Box>
)}
<Box