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

redo switches

Browse Source
This commit is contained in:
Sidney Alcantara
2021-08-15 00:43:21 +10:00
parent a5203dc8d1
commit 1c96cce1b8
19 changed files with 187 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
www-v1/src/Theme/colors.ts
View File

@@ -8,8 +8,9 @@ export const PRIMARY = "#421AFD";
// export const PRIMARY = "#0F0";
// export const PRIMARY = "#F15A29";
// export const PRIMARY = "#c4492c";
// export const PRIMARY = "#0070EB";
export const ERROR = "#B00020"; // https://material.io/design/color/dark-theme.html#ui-application
export const SUCCESS = "#27CD41";
export const SUCCESS = "#34c759";
const defaultTheme = createTheme();

123
www-v1/src/Themes.tsx
View File

@@ -3,9 +3,10 @@ import _merge from "lodash/merge";
import { createTheme, ThemeOptions } from "@material-ui/core/styles";
import { lightThemeColors } from "theme/colors";
export const HEADING_FONT = "system-ui, Space Grotesk, system-ui, sans-serif";
export const HEADING_FONT =
"Segoe UI Variable Display, system-ui, Space Grotesk, system-ui, sans-serif";
export const BODY_FONT =
"Segoe UI Variable Small, system-ui, Inter, system-ui, sans-serif";
"Segoe UI Variable Text, system-ui, Inter, system-ui, sans-serif";
export const MONO_FONT = "IBM Plex Mono, ui-monospace, monospace";
export const ANTLER_RED = "#ED4747";
@@ -175,11 +176,22 @@ export const themeBase = {
fontSize: toRem(12),
letterSpacing: toEm(0.4, 12),
lineHeight: 20 / 12,
fontWeight: 500,
},
},
},
MuiSelect: {
styleOverrides: {
select: {
"& > *": {
margin: 0,
paddingTop: 0,
paddingBottom: 0,
},
},
icon: {
transition: "transform 0.2s",
},
iconOpen: {
transform: "rotate(180deg)",
},
@@ -222,6 +234,13 @@ export const themeBase = {
},
},
},
MuiSnackbarContent: {
styleOverrides: {
root: {
borderRadius: 8,
},
},
},
MuiListItem: {
styleOverrides: {
root: {
@@ -294,6 +313,13 @@ export const themeBase = {
},
},
},
MuiIconButton: {
styleOverrides: {
sizeSmall: {
borderRadius: 4,
},
},
},
MuiChip: {
defaultProps: {
size: "small",
@@ -314,71 +340,50 @@ export const themeBase = {
},
},
MuiSwitch: {
defaultProps: {
size: "small",
},
styleOverrides: {
root: {
width: 42,
height: 24,
padding: 0,
sizeMedium: {
width: 42 + (38 - 24),
height: 24 + (38 - 24),
padding: (38 - 24) / 2,
},
sizeSmall: {
width: 36 + (28 - 20),
height: 20 + (28 - 20),
padding: (28 - 20) / 2,
"&:active": {
"& .MuiSwitch-switchBase:not(.Mui-disabled) .MuiSwitch-thumb": {
width: 24,
},
"& .MuiSwitch-switchBase.Mui-checked:not(.Mui-disabled) .MuiSwitch-thumb": {
transform: "translateX(-4px)",
},
"& .MuiSwitch-switchBase": { padding: 6 },
},
track: {
borderRadius: 24 / 2,
".MuiSwitch-switchBase.Mui-checked:not(.Mui-disabled) + &": {
opacity: 1,
},
},
switchBase: {
padding: 0,
margin: 2,
"&.Mui-checked": {
transform: "translateX(18px)",
color: "#fff",
"& + .MuiSwitch-track": {
backgroundColor: "#65C466",
// backgroundColor: theme.palette.mode === 'dark' ? '#2ECA45' : '#65C466',
opacity: 1,
border: 0,
},
"&.Mui-disabled + .MuiSwitch-track": {
opacity: 0.5,
},
},
"&.Mui-focusVisible .MuiSwitch-thumb": {
color: "#33cf4d",
border: "6px solid #fff",
},
"&.Mui-disabled .MuiSwitch-thumb": {
color: "#fff",
// opacity: 0.6,
// color:
// theme.palette.mode === 'light'
// ? theme.palette.grey[100]
// : theme.palette.grey[600],
},
"&.Mui-disabled + .MuiSwitch-track": {
opacity: 0.5,
// opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
},
color: "#000",
"&.Mui-checked": { transform: "translateX(18px)" },
},
thumb: {
width: 20,
height: 20,
borderRadius: 10,
// transition: theme.transitions.create(['width'], {
// duration: 200,
// }),
transition: "width .2s, transform .2s",
},
track: {
background: "#fff",
borderRadius: 24 / 2,
backgroundColor: "#E9E9EA",
// backgroundColor: theme.palette.mode === 'light' ? '#E9E9EA' : '#39393D',
opacity: 1,
// transition: theme.transitions.create(['background-color'], {
// duration: 500,
// }),
transition: "transform .2s, width .2s",
".MuiSwitch-root:active &": { width: 24 },
".MuiSwitch-root.MuiSwitch-sizeSmall:active &": { width: 20 },
"& + .MuiTouchRipple-root": {
borderRadius: 24 / 2,
zIndex: -1,
},
".MuiSwitch-root:active .MuiSwitch-switchBase.Mui-checked:not(.Mui-disabled) &": {
transform: "translateX(-4px)",
"& + .MuiTouchRipple-root": { left: -4 },
},
},
},
},

5
www-v1/src/components/Confirmation.tsx
View File

@@ -28,6 +28,7 @@ export interface IConfirmationProps {
body?: string | React.ReactNode;
cancel?: string;
confirm?: string | JSX.Element;
color?: "error";
};
confirmationCommand?: string;
functionName?: string;
@@ -97,7 +98,7 @@ export default function Confirmation({
</DialogContent>
)}
<DialogActions>
<Button onClick={handleClose} color="primary">
<Button onClick={handleClose} color={message?.color || "primary"}>
{(message && message.cancel) || "Cancel"}
</Button>
<Button
@@ -105,8 +106,8 @@ export default function Confirmation({
confirmHandler();
handleClose();
}}
color="primary"
variant="contained"
color={message?.color || "primary"}
autoFocus
disabled={
confirmationCommand ? dryText !== confirmationCommand : false

34
www-v1/src/components/SideDrawer/Form/FieldWrapper.tsx
View File

@@ -15,22 +15,32 @@ import { projectId } from "../../../firebase";
const useStyles = makeStyles((theme) =>
createStyles({
header: {
marginBottom: theme.spacing(1),
color: theme.palette.text.disabled,
"& svg": { display: "block" },
paddingBottom: theme.spacing(1),
color: theme.palette.text.secondary,
"& svg": {
display: "block",
fontSize: 18,
},
},
iconContainer: {
marginRight: theme.spacing(0.5),
marginRight: theme.spacing(1),
},
label: {
...theme.typography.caption,
lineHeight: "18px",
fontWeight: 500,
},
disabledText: {
paddingLeft: theme.spacing(3 + 0.5),
paddingLeft: theme.spacing(18 / 8 + 1),
color: theme.palette.text.disabled,
whiteSpace: "normal",
wordBreak: "break-all",
},
launchButton: { margin: theme.spacing(-4, 0.5, 0, 0) },
launchButton: { margin: theme.spacing(-3, -1.5, 0, 0) },
})
);
@@ -66,8 +76,8 @@ export default function FieldWrapper({
<Grid item className={classes.iconContainer}>
{type === "debug" ? <DebugIcon /> : getFieldProp("icon", type)}
</Grid>
<Grid item xs>
<Typography variant="subtitle2">{label}</Typography>
<Grid item xs component={Typography} className={classes.label}>
{label}
</Grid>
{disabled && (
<Grid item>
@@ -81,7 +91,7 @@ export default function FieldWrapper({
{children ??
(!debugText && (
<Typography variant="body2" className={classes.disabledText}>
This field can’t be edited here.
This field cannot be edited here
</Typography>
))}
</Suspense>
@@ -90,7 +100,11 @@ export default function FieldWrapper({
{debugText && (
<Grid container spacing={1} wrap="nowrap" alignItems="center">
<Grid item xs>
<Typography variant="body2" className={classes.disabledText}>
<Typography
variant="body2"
className={classes.disabledText}
style={{ userSelect: "all" }}
>
{debugText}
</Typography>
</Grid>

16
www-v1/src/components/SideDrawer/Form/utils.ts
View File

@@ -22,22 +22,16 @@ export const useFieldStyles = makeStyles((theme) =>
createStyles({
root: {
borderRadius: theme.shape.borderRadius,
padding: theme.spacing(1, 1, 1, 1.5),
padding: theme.spacing(0.75, 1, 0.75, 1.5),
// https://github.com/mui-org/material-ui/blob/next/packages/material-ui/src/FilledInput/FilledInput.js#L46
backgroundColor:
theme.palette.mode === "light"
? "rgba(0, 0, 0, 0.06)"
: "rgba(255, 255, 255, 0.09)",
backgroundColor: theme.palette.background.paper,
boxShadow: `0 0 0 1px ${theme.palette.divider} inset`,
"&.Mui-disabled": {
backgroundColor:
theme.palette.mode === "light"
? "rgba(0, 0, 0, 0.12)"
: "rgba(255, 255, 255, 0.12)",
backgroundColor: theme.palette.action.disabledBackground,
},
width: "100%",
minHeight: 36,
minHeight: 32,
display: "flex",
textAlign: "left",

2
www-v1/src/components/SideDrawer/index.tsx
View File

@@ -16,7 +16,7 @@ import { useStyles } from "./useStyles";
import { useFiretableContext } from "contexts/FiretableContext";
import useDoc from "hooks/useDoc";
export const DRAWER_WIDTH = 540;
export const DRAWER_WIDTH = 512;
export const DRAWER_COLLAPSED_WIDTH = 36;
type SelectedCell = { row: number; column: string } | null;

10
www-v1/src/components/SideDrawer/useStyles.ts
View File

@@ -21,7 +21,7 @@ export const useStyles = makeStyles((theme) =>
paper: {
border: "none",
boxShadow: theme.shadows[12].replace(/, 0 (\d+px)/g, ", -$1 0"),
boxShadow: theme.shadows[7].replace(/, 0 (\d+px)/g, ", -$1 0"),
borderTopLeftRadius: `${(theme.shape.borderRadius as number) * 3}px`,
borderBottomLeftRadius: `${(theme.shape.borderRadius as number) * 3}px`,
@@ -63,11 +63,11 @@ export const useStyles = makeStyles((theme) =>
fab: {
display: "flex",
boxShadow: theme.shadows[16],
"&:active": { boxShadow: theme.shadows[16] },
boxShadow: theme.shadows[7],
"&:active": { boxShadow: theme.shadows[7] },
"&.Mui-disabled": {
boxShadow: theme.shadows[16],
boxShadow: theme.shadows[7],
backgroundColor: theme.palette.background.default,
// backgroundColor:
// theme.palette.grey[theme.palette.mode === "light" ? 300 : 800],
@@ -104,7 +104,7 @@ export const useStyles = makeStyles((theme) =>
},
drawerContents: {
padding: theme.spacing(6),
padding: theme.spacing(5),
overflowY: "auto",
},
})

39
www-v1/src/components/Table/ColumnHeader.tsx
View File

@@ -15,6 +15,7 @@ import {
} from "@material-ui/core";
import SortDescIcon from "@material-ui/icons/ArrowDownward";
import DropdownIcon from "@material-ui/icons/MoreHoriz";
import LockIcon from "@material-ui/icons/Lock";
import { FieldType } from "constants/fields";
import { getFieldProp } from "components/fields";
@@ -36,7 +37,7 @@ const useStyles = makeStyles((theme) =>
cursor: "move",
margin: theme.spacing(0, -1.5),
padding: theme.spacing(0, 1.5),
padding: theme.spacing(0, 0.5, 0, 1.5),
width: `calc(100% + ${theme.spacing(1.5 * 2)})`,
},
isDragging: { opacity: 0.5 },
@@ -52,9 +53,14 @@ const useStyles = makeStyles((theme) =>
flexShrink: 1,
overflow: "hidden",
margin: theme.spacing(0, 0.5),
marginRight: -26,
marginRight: -30,
},
columnName: {
...theme.typography.caption,
fontWeight: theme.typography.fontWeightMedium,
lineHeight: "44px",
textOverflow: "clip",
},
columnName: { lineHeight: "44px" },
columnNameTooltip: {
background: theme.palette.background.default,
@@ -68,8 +74,8 @@ const useStyles = makeStyles((theme) =>
sortIconContainer: {
backgroundColor: theme.palette.background.default,
width: 30,
height: 30,
// width: 30,
// height: 30,
opacity: 0,
transition: theme.transitions.create("opacity", {
@@ -89,16 +95,12 @@ const useStyles = makeStyles((theme) =>
},
dropdownButton: {
opacity: 0.5,
transition: theme.transitions.create("opacity", {
transition: theme.transitions.create("color", {
duration: theme.transitions.duration.short,
}),
"&:hover": {
backgroundColor: "transparent",
opacity: 1,
},
padding: 0,
color: theme.palette.text.disabled,
"$root:hover &": { color: theme.palette.text.primary },
},
})
);
@@ -208,13 +210,21 @@ export default function DraggableHeaderRenderer<R>({
navigator.clipboard.writeText(column.key as string);
}}
>
{getFieldProp("icon", (column as any).type)}
{column.editable === false ? (
<LockIcon />
) : (
getFieldProp("icon", (column as any).type)
)}
</Grid>
</Tooltip>
<Grid item xs className={classes.columnNameContainer}>
<Tooltip
title={<Typography variant="subtitle2">{column.name}</Typography>}
title={
<Typography className={classes.columnName} color="inherit">
{column.name}
</Typography>
}
enterDelay={1000}
placement="bottom-start"
disableInteractive
@@ -245,7 +255,6 @@ export default function DraggableHeaderRenderer<R>({
classes={{ tooltip: classes.columnNameTooltip }}
>
<Typography
variant="subtitle2"
noWrap
className={classes.columnName}
component="div"

1
www-v1/src/components/Table/ColumnMenu/FieldsDropdown.tsx
View File

@@ -19,6 +19,7 @@ const useStyles = makeStyles((theme) =>
listItemIcon: {
verticalAlign: "text-bottom",
minWidth: theme.spacing(5),
"& svg": { margin: theme.spacing(-0.5, 0) },
},
})
);

1
www-v1/src/components/Table/ColumnMenu/TypeChange.tsx
View File

@@ -44,6 +44,7 @@ export default function FormDialog({
children: "Cancel",
},
}}
maxWidth="xs"
/>
);
}

20
www-v1/src/components/TableSettings/form.tsx
View File

@@ -34,8 +34,7 @@ export const tableSettings = (
View your Firestore collections
<OpenInNewIcon
aria-label="Open in new tab"
fontSize="small"
style={{ verticalAlign: "bottom", marginLeft: 4 }}
style={{ verticalAlign: "middle", marginLeft: 4, fontSize: "1em" }}
/>
</Link>
) as any,
@@ -87,8 +86,7 @@ export const tableSettings = (
Learn more about collection groups
<OpenInNewIcon
aria-label="Open in new tab"
fontSize="small"
style={{ verticalAlign: "bottom", marginLeft: 4 }}
style={{ verticalAlign: "middle", marginLeft: 4, fontSize: "1em" }}
/>
</Link>
) as any,
@@ -126,8 +124,11 @@ export const tableSettings = (
Read about role-based security rules
<OpenInNewIcon
aria-label="Open in new tab"
fontSize="small"
style={{ verticalAlign: "bottom", marginLeft: 4 }}
style={{
verticalAlign: "middle",
marginLeft: 4,
fontSize: "1em",
}}
/>
</Link>
</>
@@ -162,8 +163,11 @@ export const tableSettings = (
Learn more about this requirement
<OpenInNewIcon
aria-label="Open in new tab"
fontSize="small"
style={{ verticalAlign: "bottom", marginLeft: 4 }}
style={{
verticalAlign: "middle",
marginLeft: 4,
fontSize: "1em",
}}
/>
</Link>
</>

25
www-v1/src/components/TableSettings/index.tsx
View File

@@ -6,7 +6,6 @@ import { makeStyles, createStyles } from "@material-ui/styles";
import { Button, DialogContentText } from "@material-ui/core";
import Confirmation from "components/Confirmation";
import GoIcon from "assets/icons/Go";
import { FormDialog } from "@antlerengineering/form-builder";
import { tableSettings } from "./form";
@@ -224,14 +223,22 @@ export default function TableSettingsDialog({
</>
),
confirm: "Reset",
color: "error",
}}
functionName="onClick"
>
<Button onClick={handleResetStructure} endIcon={<GoIcon />}>
Reset Table Structure
<Button
variant="outlined"
color="error"
onClick={handleResetStructure}
// endIcon={<GoIcon />}
>
Reset Table Structure…
</Button>
</Confirmation>
<br />
<Confirmation
message={{
title: `Are you sure you want to delete the table “${formState.name}”?`,
@@ -250,12 +257,18 @@ export default function TableSettingsDialog({
</DialogContentText>
</>
),
confirm: "DELETE",
confirm: "Delete",
color: "error",
}}
functionName="onClick"
>
<Button onClick={handleDelete} endIcon={<GoIcon />}>
Delete Table
<Button
variant="outlined"
color="error"
onClick={handleDelete}
// endIcon={<GoIcon />}
>
Delete Table…
</Button>
</Confirmation>
</div>

5
www-v1/src/components/fields/Checkbox/SideDrawerField.tsx
View File

@@ -6,7 +6,6 @@ import { makeStyles, createStyles } from "@material-ui/styles";
import { ButtonBase, FormControlLabel, Switch } from "@material-ui/core";
import { useFieldStyles } from "components/SideDrawer/Form/utils";
import { useSwitchStyles } from "./styles";
const useStyles = makeStyles((theme) =>
createStyles({
@@ -17,7 +16,7 @@ const useStyles = makeStyles((theme) =>
width: "100%",
display: "flex",
padding: theme.spacing(0, 0, 0, 1.5),
padding: theme.spacing(0, 0.5, 0, 1.5),
},
label: {
@@ -35,7 +34,6 @@ export default function Checkbox({
}: ISideDrawerFieldProps) {
const classes = useStyles();
const fieldClasses = useFieldStyles();
// const switchClasses = useSwitchStyles();
return (
<Controller
@@ -58,7 +56,6 @@ export default function Checkbox({
onChange={handleChange}
onBlur={onBlur}
disabled={disabled}
// classes={switchClasses}
color="success"
/>
}

8
www-v1/src/components/fields/Checkbox/TableCell.tsx
View File

@@ -5,15 +5,13 @@ import { makeStyles, createStyles } from "@material-ui/styles";
import { FormControlLabel, Switch } from "@material-ui/core";
import Confirmation from "components/Confirmation";
// import { useSwitchStyles } from "./styles";
const useStyles = makeStyles((theme) =>
createStyles({
root: {
paddingLeft: theme.spacing(0),
marginLeft: 0,
marginRight: -4,
width: "calc(100% + 4px)",
marginRight: theme.spacing(-1),
width: `calc(100% + ${theme.spacing(1)})`,
},
label: {
@@ -41,14 +39,12 @@ export default function Checkbox({
disabled,
}: IHeavyCellProps) {
const classes = useStyles();
// const switchClasses = useSwitchStyles();
let component = (
<Switch
checked={!!value}
onChange={() => onSubmit(!value)}
disabled={disabled}
// classes={switchClasses}
color="success"
/>
);

4
www-v1/src/components/fields/Checkbox/index.tsx
View File

@@ -18,12 +18,12 @@ const SideDrawerField = lazy(
export const config: IFieldConfig = {
type: FieldType.checkbox,
name: "Checkbox",
name: "Toggle",
dataType: "boolean",
initialValue: false,
initializable: true,
icon: <CheckboxIcon />,
description: "Either checked or unchecked. Unchecked by default.",
description: "Either toggled on or off. Toggled off by default.",
TableCell: withHeavyCell(BasicCell, TableCell),
TableEditor: NullEditor as any,
csvImportParser: (value: string) => {

13
www-v1/src/components/fields/Checkbox/styles.ts
View File

@@ -1,13 +0,0 @@
import { makeStyles, createStyles } from "@material-ui/styles";
import { green } from "@material-ui/core/colors";
export const useSwitchStyles = makeStyles(() =>
createStyles({
switchBase: {
"&$checked": { color: green["A700"] },
"&$checked + $track": { backgroundColor: green["A700"] },
},
checked: {},
track: {},
})
);

4
www-v1/src/components/fields/Json/SideDrawerField.tsx
View File

@@ -25,12 +25,12 @@ const useStyles = makeStyles((theme) =>
padding: theme.spacing(2),
margin: 0,
overflowX: "auto",
...theme.typography.body2,
...theme.typography.caption,
},
readOnly: {
whiteSpace: "pre-wrap",
...theme.typography.body2,
...theme.typography.caption,
fontFamily: theme.typography.fontFamilyMono,
wordBreak: "break-word",
},

12
www-v1/src/components/fields/LongText/SideDrawerField.tsx
View File

@@ -1,21 +1,13 @@
import { Controller } from "react-hook-form";
import { ISideDrawerFieldProps } from "../types";
import { makeStyles, createStyles } from "@material-ui/styles";
import { TextField } from "@material-ui/core";
const useStyles = makeStyles((theme) =>
createStyles({
multiline: { padding: theme.spacing(2.25, 1.5) },
})
);
export default function LongText({
control,
column,
disabled,
}: ISideDrawerFieldProps) {
const classes = useStyles();
return (
<Controller
control={control}
@@ -35,8 +27,8 @@ export default function LongText({
hiddenLabel
disabled={disabled}
multiline
InputProps={{ classes: { multiline: classes.multiline } }}
inputProps={{ minRows: 5, maxLength: column.config?.maxLength }}
minRows={5}
inputProps={{ maxLength: column.config?.maxLength }}
/>
);
}}

25
www-v1/src/pages/Test.tsx
View File

@@ -315,19 +315,28 @@ export default function TestView() {
{ value: 40, label: 40 },
]}
disabled
defaultValue={30}
/>
<Stack spacing={1} direction="row">
<Switch />
<Switch color="secondary" />
<Switch color="success" />
<Switch disabled />
<Switch size="medium" />
<Switch size="medium" color="secondary" />
<Switch size="medium" color="success" />
<Switch size="medium" disabled />
<Switch size="small" />
<Switch size="small" color="secondary" />
<Switch size="small" color="success" />
<Switch size="small" disabled />
</Stack>
<Stack spacing={1} direction="row">
<Switch checked />
<Switch checked color="secondary" />
<Switch checked color="success" />
<Switch checked disabled />
<Switch size="medium" checked />
<Switch size="medium" checked color="secondary" />
<Switch size="medium" checked color="success" />
<Switch size="medium" checked disabled />
<Switch size="small" checked />
<Switch size="small" checked color="secondary" />
<Switch size="small" checked color="success" />
<Switch size="small" checked disabled />
</Stack>
</Stack>
</Container>