Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2025-12-29 00:16:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

restyle ToggleButton to match Button

Browse Source
This commit is contained in:
Sidney Alcantara
2021-11-10 18:56:19 +11:00
parent f5a3ebfb7f
commit 7ccd47ddfe
5 changed files with 260 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
src/components/Table/TableHeader/CloudLogs/CloudLogsModal.tsx
View File

@@ -3,15 +3,13 @@ import { useAtom } from "jotai";
import {
LinearProgress,
Tab,
ToggleButtonGroup,
ToggleButton,
Stack,
Typography,
TextField,
InputAdornment,
} from "@mui/material";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import TabPanel from "@mui/lab/TabPanel";
import RefreshIcon from "@mui/icons-material/Refresh";
import LogsIcon from "@src/assets/icons/CloudLogs";
@@ -53,7 +51,7 @@ export default function CloudLogsModal(props: IModalProps) {
fullHeight
ScrollableDialogContentProps={{ disableBottomDivider: true }}
header={
<TabContext value={cloudLogFilters.type}>
<>
<Stack
direction="row"
spacing={2}
@@ -67,33 +65,31 @@ export default function CloudLogsModal(props: IModalProps) {
ml: { md: 18 },
mr: { md: 40 / 8 + 3 },
minHeight: 56,
minHeight: 32,
boxSizing: "content-box",
overflowX: "auto",
overflowY: "hidden",
py: 0,
px: { xs: "var(--dialog-spacing)", md: 0 },
pb: { xs: 1, md: 0 },
"& .MuiTabPanel-root": { padding: 0 },
"& > *": { flexShrink: 0 },
}}
>
<TabList
<ToggleButtonGroup
value={cloudLogFilters.type}
exclusive
onChange={(_, v) =>
setCloudLogFilters((c) => ({ type: v, timeRange: c.timeRange }))
}
aria-label="Filter by log type"
// centered
sx={{}}
>
{/* {!Array.isArray(tableState?.config.webhooks) ||
tableState?.config.webhooks?.length === 0 ? ( */}
<Tab label="Webhooks" value="webhook" />
{/* {table?.audit === false ? ( */}
<Tab label="Audit" value="audit" />
<Tab label="Build" value="build" />
</TabList>
<ToggleButton value="webhook">Webhooks</ToggleButton>
<ToggleButton value="audit">Audit</ToggleButton>
<ToggleButton value="build">Build</ToggleButton>
</ToggleButtonGroup>
<TabPanel value="webhook">
{cloudLogFilters.type === "webhook" && (
<MultiSelect
multiple
label="Webhook:"
@@ -112,12 +108,9 @@ export default function CloudLogsModal(props: IModalProps) {
}
TextFieldProps={{
id: "webhook",
sx: {
flexDirection: "row",
alignItems: "center",
"& .MuiInputLabel-root": { pr: 1 },
"& .MuiInputBase-root": { minWidth: 180 },
},
className: "labelHorizontal",
sx: { "& .MuiInputBase-root": { width: 180 } },
fullWidth: false,
}}
itemRenderer={(option) => (
<>
@@ -125,8 +118,8 @@ export default function CloudLogsModal(props: IModalProps) {
</>
)}
/>
</TabPanel>
<TabPanel value="audit">
)}
{cloudLogFilters.type === "audit" && (
<TextField
id="auditRowId"
label="Row ID:"
@@ -144,11 +137,8 @@ export default function CloudLogsModal(props: IModalProps) {
</InputAdornment>
),
}}
className="labelHorizontal"
sx={{
flexDirection: "row",
alignItems: "center",
"& .MuiInputLabel-root": { pr: 1 },
"& .MuiInputBase-root, & .MuiInputBase-input": {
typography: "body2",
fontFamily: "mono",
@@ -160,7 +150,7 @@ export default function CloudLogsModal(props: IModalProps) {
"& .MuiInputBase-input": { pl: 0 },
}}
/>
</TabPanel>
)}
{/* Spacer */}
<div style={{ flexGrow: 1 }} />
@@ -208,7 +198,7 @@ export default function CloudLogsModal(props: IModalProps) {
)}
{/* <code>{logQueryUrl}</code> */}
</TabContext>
</>
}
>
{cloudLogFilters.type === "build" ? (

19
src/components/Table/TableHeader/CloudLogs/TimeRangeSelect.tsx
View File

@@ -61,16 +61,19 @@ export default function TimeRangeSelect({
id="timeRangeSelect.type"
value={value?.type || "days"}
{...props}
sx={
value?.type === "range"
? props.sx
: {
"& .MuiInputBase-root": {
sx={{
"& .MuiInputBase-root":
value?.type !== "range"
? {
borderTopLeftRadius: 0,
borderBottomLeftRadius: 0,
},
}
}
}
: {},
"& .MuiInputBase-input": { minHeight: 20 },
...props.sx,
}}
onChange={(e) => {
const newValue: any = { type: e.target.value };

1
src/pages/Home.tsx
View File

@@ -232,6 +232,7 @@ export default function HomePage() {
<ToggleButtonGroup
value={view}
size="large"
exclusive
onChange={(_, v) => {
if (v !== null) setView(v);

84
src/pages/Test.tsx
View File

@@ -14,6 +14,8 @@ import {
TableCell,
Typography,
Button,
ToggleButtonGroup,
ToggleButton,
IconButton,
Fab,
Chip,
@@ -38,6 +40,10 @@ import {
LinearProgress,
} from "@mui/material";
import SparkIcon from "@mui/icons-material/OfflineBoltOutlined";
import FormatAlignLeftIcon from "@mui/icons-material/FormatAlignLeft";
import FormatAlignCenterIcon from "@mui/icons-material/FormatAlignCenter";
import FormatAlignRightIcon from "@mui/icons-material/FormatAlignRight";
import FormatAlignJustifyIcon from "@mui/icons-material/FormatAlignJustify";
import { useConfirmation } from "@src/components/ConfirmationDialog";
import SnackbarProgress, {
@@ -74,6 +80,32 @@ export default function TestView() {
const snackbarProgressRef = useRef<ISnackbarProgressRef>();
const [alignment, setAlignment] = useState("left");
const handleChangeAlignment = (_, v) => setAlignment(v);
const toggleButtonProps = {
value: alignment,
onChange: handleChangeAlignment,
exclusive: true,
children: [
<ToggleButton value="left" key="left">
<FormatAlignLeftIcon />
{/* Left */}
</ToggleButton>,
<ToggleButton value="center" key="center">
<FormatAlignCenterIcon />
{/* Center */}
</ToggleButton>,
<ToggleButton value="right" key="right">
<FormatAlignRightIcon />
{/* Right */}
</ToggleButton>,
<ToggleButton value="justify" key="justify">
<FormatAlignJustifyIcon />
{/* Justify */}
</ToggleButton>,
],
};
return (
<Navigation title="Theme Test">
<Container style={{ margin: "24px 0 200px", width: "100%" }}>
@@ -448,6 +480,58 @@ export default function TestView() {
</Button>
</Stack>
<Stack spacing={1} direction="row" alignItems="center">
<ToggleButtonGroup
color="standard"
size="small"
{...toggleButtonProps}
/>
<ToggleButtonGroup
color="primary"
size="medium"
{...toggleButtonProps}
/>
<ToggleButtonGroup
color="secondary"
size="large"
{...toggleButtonProps}
/>
<ToggleButtonGroup
color="primary"
size="large"
{...toggleButtonProps}
disabled
/>
</Stack>
<Stack spacing={1} direction="row" alignItems="center">
<ToggleButtonGroup
orientation="vertical"
color="standard"
size="small"
{...toggleButtonProps}
/>
<ToggleButtonGroup
orientation="vertical"
color="primary"
size="medium"
{...toggleButtonProps}
/>
<ToggleButtonGroup
orientation="vertical"
color="secondary"
size="large"
{...toggleButtonProps}
/>
<ToggleButtonGroup
orientation="vertical"
color="primary"
size="large"
{...toggleButtonProps}
disabled
/>
</Stack>
<Stack spacing={1} direction="row" alignItems="center">
<IconButton size="small">
<SparkIcon />

142
src/theme/components.tsx
View File

@@ -245,6 +245,16 @@ export const components = (theme: Theme): ThemeOptions => {
variant: "filled",
size: "small",
},
styleOverrides: {
root: {
"&.labelHorizontal": {
flexDirection: "row",
alignItems: "center",
"& .MuiInputLabel-root": { paddingRight: theme.spacing(1) },
},
},
},
},
MuiInputBase: {
styleOverrides: {
@@ -540,6 +550,138 @@ export const components = (theme: Theme): ThemeOptions => {
},
},
MuiToggleButtonGroup: {
defaultProps: {
color: "primary",
},
styleOverrides: {
groupedHorizontal: {
"&:not(:first-of-type)": {
borderLeft: 0,
"&.Mui-disabled": { clipPath: "inset(0 0 0 1px)" },
},
},
groupedVertical: {
"&:not(:first-of-type)": {
borderTop: 0,
"&.Mui-disabled": { clipPath: "inset(1px 0 0 0)" },
},
},
},
},
MuiToggleButton: {
styleOverrides: {
root: {
"&, &.Mui-selected": {
backgroundColor: theme.palette.action.input,
},
transition: theme.transitions.create(
["background-color", "color"],
{ duration: theme.transitions.duration.short }
),
border: 0,
boxShadow: `0 0 0 1px ${theme.palette.action.inputOutline} inset,
0 ${theme.palette.mode === "dark" ? "" : "-"}1px 0 0 ${
theme.palette.action.inputOutline
} inset`,
".MuiToggleButtonGroup-vertical &:not(:last-of-type)": {
boxShadow: `0 0 0 1px ${theme.palette.action.inputOutline} inset`,
},
"&:not(.Mui-disabled):hover": {
backgroundColor: colord(theme.palette.action.input)
.mix(
theme.palette.action.hover,
theme.palette.action.hoverOpacity
)
.toHslString(),
zIndex: 1,
},
"&.Mui-selected:hover": {
".MuiToggleButton-standard&": {
backgroundColor: colord(theme.palette.action.input)
.mix(
theme.palette.action.hover,
theme.palette.action.hoverOpacity
)
.toHslString(),
},
".MuiToggleButton-primary&": {
backgroundColor: colord(theme.palette.action.input)
.mix(
theme.palette.primary.main,
theme.palette.action.hoverOpacity
)
.toHslString(),
},
".MuiToggleButton-secondary&": {
backgroundColor: colord(theme.palette.action.input)
.mix(
theme.palette.secondary.main,
theme.palette.action.hoverOpacity
)
.toHslString(),
},
},
"&.Mui-disabled": {
boxShadow: `0 0 0 1px ${theme.palette.divider} inset`,
backgroundColor: "transparent",
border: 0,
},
"&.Mui-selected::after": {
content: "''",
display: "block",
position: "absolute",
bottom: 0,
left: "50%",
transform: "translateX(-50%)",
maxWidth: 32,
width: `calc(100% - 16px)`,
height: 3,
borderRadius: 1.5,
backgroundColor: "currentColor",
".MuiToggleButtonGroup-vertical &": {
left: 0,
top: "50%",
transform: "translateY(-50%)",
maxHeight: 32,
height: `calc(100% - 16px)`,
width: 3,
},
},
},
sizeSmall: {
minHeight: 24,
minWidth: 24,
padding: `${(24 - 18) / 2}px 10px`,
"& .MuiSvgIcon-root": {
margin: `0 ${-(10 - (24 - 18) / 2)}px`,
fontSize: 18,
},
},
sizeMedium: {
minHeight: 32,
minWidth: 32,
padding: `${(32 - 24) / 2}px 16px`,
"& .MuiSvgIcon-root": { margin: `0 ${-(16 - (32 - 24) / 2)}px` },
},
sizeLarge: {
minHeight: 48,
minWidth: 48,
padding: `${(48 - 24) / 2}px 22px`,
"& .MuiSvgIcon-root": { margin: `0 ${-(22 - (48 - 24) / 2)}px` },
},
},
},
MuiIconButton: {
defaultProps: {
TouchRippleProps: { center: false },