replaced all instances of the styled toggle with the new buttongroup common component
This commit is contained in:
csawatzky
parent
269417a321
commit
af25036640
5 changed files with 306 additions and 163 deletions
|
|
@ -81,6 +81,7 @@ import { getThemeType } from "theme/themeType";
|
|||
import GrainBagSettings from "grainBag/grainBagSettings";
|
||||
import GrainBagList from "grainBag/grainBagList";
|
||||
import BinYards from "bin/BinYards";
|
||||
import ButtonGroup from "common/ButtonGroup";
|
||||
// import { useHistory } from "react-router";
|
||||
|
||||
const useStyles = makeStyles((theme: Theme) => {
|
||||
|
|
@ -200,56 +201,56 @@ export default function Bins(props: Props) {
|
|||
// fertilizer: 0
|
||||
// });
|
||||
|
||||
const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({
|
||||
'& .MuiToggleButtonGroup-grouped': {
|
||||
// border: 'none' replaces the old 'grouped' border: "none"
|
||||
border: 'none',
|
||||
padding: theme.spacing(1),
|
||||
// Middle buttons
|
||||
'&:not(:first-child):not(:last-child)': {
|
||||
borderRadius: 24,
|
||||
marginRight: theme.spacing(0.5),
|
||||
marginLeft: theme.spacing(0.5),
|
||||
},
|
||||
// First button
|
||||
'&:first-child': {
|
||||
borderRadius: 24,
|
||||
marginLeft: theme.spacing(0.25),
|
||||
},
|
||||
// Last button
|
||||
'&:last-child': {
|
||||
borderRadius: 24,
|
||||
marginRight: theme.spacing(0.25),
|
||||
},
|
||||
},
|
||||
// Root styles
|
||||
backgroundColor: darken(
|
||||
theme.palette.background.paper,
|
||||
getThemeType() === 'light' ? 0.05 : 0.25
|
||||
),
|
||||
borderRadius: 24,
|
||||
boxSizing: 'content-box', // Fixed 'content: "border-box"' typo from original
|
||||
}));
|
||||
// const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }: { theme: Theme }) => ({
|
||||
// '& .MuiToggleButtonGroup-grouped': {
|
||||
// // border: 'none' replaces the old 'grouped' border: "none"
|
||||
// border: 'none',
|
||||
// padding: theme.spacing(1),
|
||||
// // Middle buttons
|
||||
// '&:not(:first-child):not(:last-child)': {
|
||||
// borderRadius: 24,
|
||||
// marginRight: theme.spacing(0.5),
|
||||
// marginLeft: theme.spacing(0.5),
|
||||
// },
|
||||
// // First button
|
||||
// '&:first-child': {
|
||||
// borderRadius: 24,
|
||||
// marginLeft: theme.spacing(0.25),
|
||||
// },
|
||||
// // Last button
|
||||
// '&:last-child': {
|
||||
// borderRadius: 24,
|
||||
// marginRight: theme.spacing(0.25),
|
||||
// },
|
||||
// },
|
||||
// // Root styles
|
||||
// backgroundColor: darken(
|
||||
// theme.palette.background.paper,
|
||||
// getThemeType() === 'light' ? 0.05 : 0.25
|
||||
// ),
|
||||
// borderRadius: 24,
|
||||
// boxSizing: 'content-box', // Fixed 'content: "border-box"' typo from original
|
||||
// }));
|
||||
|
||||
const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({
|
||||
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: {}
|
||||
}));
|
||||
// const StyledToggle = styled(ToggleButton)(({ theme }: { theme: Theme }) => ({
|
||||
// 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: {}
|
||||
// }));
|
||||
|
||||
useEffect(() => {
|
||||
let ebt = sessionStorage.getItem("expandBinTotal");
|
||||
|
|
@ -502,6 +503,17 @@ export default function Bins(props: Props) {
|
|||
}
|
||||
}, [loadBins, props.insert, contentFilter]);
|
||||
|
||||
const determineNodeToggle = () => {
|
||||
switch(cardValDisplay) {
|
||||
case "low":
|
||||
return [0]
|
||||
case "high":
|
||||
return [2]
|
||||
default:
|
||||
return [1]
|
||||
}
|
||||
}
|
||||
|
||||
const duplicateBin = (bin: Bin) => {
|
||||
binAPI.addBin(bin.settings, as).then(resp => {
|
||||
loadBins();
|
||||
|
|
@ -1154,7 +1166,25 @@ export default function Bins(props: Props) {
|
|||
Load All
|
||||
</Button>
|
||||
)}
|
||||
<StyledToggleButtonGroup
|
||||
<ButtonGroup
|
||||
toggle
|
||||
toggledButtons={determineNodeToggle()}
|
||||
buttons={[
|
||||
{
|
||||
title: "Low",
|
||||
function: () => {setCardValDisplay("low")}
|
||||
},
|
||||
{
|
||||
title: "Average",
|
||||
function: () => {setCardValDisplay("average")}
|
||||
},
|
||||
{
|
||||
title: "High",
|
||||
function: () => {setCardValDisplay("high")}
|
||||
}
|
||||
]}
|
||||
/>
|
||||
{/* <StyledToggleButtonGroup
|
||||
id="cardValueDisplay"
|
||||
value={cardValDisplay}
|
||||
exclusive
|
||||
|
|
@ -1184,12 +1214,33 @@ export default function Bins(props: Props) {
|
|||
}}>
|
||||
High
|
||||
</StyledToggle>
|
||||
</StyledToggleButtonGroup>
|
||||
</StyledToggleButtonGroup> */}
|
||||
</Box>
|
||||
</Grid>
|
||||
<Grid >
|
||||
<Box display="flex" paddingY={1} alignContent="center" alignItems="center">
|
||||
<StyledToggleButtonGroup
|
||||
<ButtonGroup
|
||||
toggle
|
||||
buttons={[
|
||||
{
|
||||
title: "Grid",
|
||||
icon: <ViewComfy />,
|
||||
function: () => {
|
||||
setBinView("grid");
|
||||
sessionStorage.setItem("binsView", "grid");
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "List",
|
||||
icon: <ViewList />,
|
||||
function: () => {
|
||||
setBinView("list");
|
||||
sessionStorage.setItem("binsView", "list");
|
||||
}
|
||||
}
|
||||
]}
|
||||
/>
|
||||
{/* <StyledToggleButtonGroup
|
||||
id="tour-graph-tabs"
|
||||
value={binView}
|
||||
exclusive
|
||||
|
|
@ -1203,7 +1254,7 @@ export default function Bins(props: Props) {
|
|||
sessionStorage.setItem("binsView", "grid");
|
||||
}}>
|
||||
<ViewComfy />
|
||||
</StyledToggle>
|
||||
</StyledToggle> */}
|
||||
{/* hidden at dustins request so that grid view and list are the only two */}
|
||||
{/* <StyledToggle
|
||||
value={"scroll"}
|
||||
|
|
@ -1214,7 +1265,7 @@ export default function Bins(props: Props) {
|
|||
}}>
|
||||
<ViewColumn />
|
||||
</StyledToggle> */}
|
||||
<StyledToggle
|
||||
{/* <StyledToggle
|
||||
value={"list"}
|
||||
aria-label="list view"
|
||||
onClick={() => {
|
||||
|
|
@ -1223,7 +1274,7 @@ export default function Bins(props: Props) {
|
|||
}}>
|
||||
<ViewList />
|
||||
</StyledToggle>
|
||||
</StyledToggleButtonGroup>
|
||||
</StyledToggleButtonGroup> */}
|
||||
<MoreVert
|
||||
className={classes.icon}
|
||||
onClick={event => {
|
||||
|
|
@ -1261,7 +1312,28 @@ export default function Bins(props: Props) {
|
|||
</Grid>
|
||||
<Grid >
|
||||
<Box display="flex" paddingY={1} alignContent="center" alignItems="center">
|
||||
<StyledToggleButtonGroup
|
||||
<ButtonGroup
|
||||
toggle
|
||||
buttons={[
|
||||
{
|
||||
title: "Grid",
|
||||
icon: <ViewComfy />,
|
||||
function: () => {
|
||||
setBagView("grid");
|
||||
sessionStorage.setItem("bagsView", "grid");
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "List",
|
||||
icon: <ViewList />,
|
||||
function: () => {
|
||||
setBagView("list");
|
||||
sessionStorage.setItem("bagsView", "list");
|
||||
}
|
||||
}
|
||||
]}
|
||||
/>
|
||||
{/* <StyledToggleButtonGroup
|
||||
id="tour-graph-tabs"
|
||||
value={bagView}
|
||||
exclusive
|
||||
|
|
@ -1275,7 +1347,7 @@ export default function Bins(props: Props) {
|
|||
sessionStorage.setItem("bagsView", "grid");
|
||||
}}>
|
||||
<ViewComfy />
|
||||
</StyledToggle>
|
||||
</StyledToggle> */}
|
||||
{/* hidden at dustins request so that grid view and list are the only two */}
|
||||
{/* <StyledToggle
|
||||
value={"scroll"}
|
||||
|
|
@ -1286,7 +1358,7 @@ export default function Bins(props: Props) {
|
|||
}}>
|
||||
<ViewColumn />
|
||||
</StyledToggle> */}
|
||||
<StyledToggle
|
||||
{/* <StyledToggle
|
||||
value={"list"}
|
||||
aria-label="list view"
|
||||
onClick={() => {
|
||||
|
|
@ -1295,7 +1367,7 @@ export default function Bins(props: Props) {
|
|||
}}>
|
||||
<ViewList />
|
||||
</StyledToggle>
|
||||
</StyledToggleButtonGroup>
|
||||
</StyledToggleButtonGroup> */}
|
||||
<IconButton
|
||||
className={classes.icon}
|
||||
onClick={() => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue