From e56a16d5313cc624f0294325a437d3a130b74c59 Mon Sep 17 00:00:00 2001 From: Sidney Alcantara Date: Mon, 2 Nov 2020 11:39:39 +1100 Subject: [PATCH 1/2] restyle BulkActions --- .../components/Table/BulkActions/index.tsx | 326 +++++++++++------- .../components/Table/TableHeader/index.tsx | 4 +- 2 files changed, 199 insertions(+), 131 deletions(-) diff --git a/www/src/components/Table/BulkActions/index.tsx b/www/src/components/Table/BulkActions/index.tsx index 54676025..b63d2764 100644 --- a/www/src/components/Table/BulkActions/index.tsx +++ b/www/src/components/Table/BulkActions/index.tsx @@ -1,54 +1,112 @@ import React from "react"; -import { Theme, createStyles, makeStyles } from "@material-ui/core/styles"; -import Paper from "@material-ui/core/Paper"; -import Typography from "@material-ui/core/Typography"; -import Tooltip from "@material-ui/core/Tooltip"; +import _find from "lodash/find"; + +import { + createStyles, + makeStyles, + fade, + Grow, + Paper, + Grid, + Tooltip, + IconButton, + Typography, + TextField, + MenuItem, +} from "@material-ui/core"; -import ClickAwayListener from "@material-ui/core/ClickAwayListener"; -import Grow from "@material-ui/core/Grow"; -import Grid from "@material-ui/core/Grid"; -import Popper from "@material-ui/core/Popper"; -import MenuItem from "@material-ui/core/MenuItem"; -import MenuList from "@material-ui/core/MenuList"; -import Button from "@material-ui/core/Button"; -import IconButton from "@material-ui/core/IconButton"; import CopyCellsIcon from "assets/icons/CopyCells"; import ClearSelectionIcon from "@material-ui/icons/IndeterminateCheckBox"; import DeleteIcon from "@material-ui/icons/DeleteForever"; -import DropdownIcon from "@material-ui/icons/ArrowDropDown"; +import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp"; + import { useConfirmation } from "components/ConfirmationDialog/Context"; import { useFiretableContext } from "contexts/firetableContext"; import { useSnackContext } from "contexts/snackContext"; -import { sanitiseRowData } from "utils/fns"; -import { formatPath, asyncForEach } from "../../../utils/fns"; +import { sanitiseRowData, formatPath, asyncForEach } from "utils/fns"; import { cloudFunction } from "firebase/callables"; -import _find from "lodash/find"; -const useStyles = makeStyles((theme: Theme) => + +const useStyles = makeStyles((theme) => createStyles({ root: { - position: "absolute", - bottom: 10, - right: 30, + position: "fixed", + bottom: theme.spacing(2), + left: "50%", + transform: "translateX(-50%)", }, - paper: { - padding: theme.spacing(2), - cornerRadius: 32, + paper: { + height: 64, + borderRadius: 32, + padding: theme.spacing(0, 1), + [theme.breakpoints.up("lg")]: { paddingRight: theme.spacing(2) }, + + zIndex: theme.zIndex.modal, + + backgroundColor: + theme.palette.type === "light" + ? theme.palette.background.default + : undefined, }, + + grid: { + height: "100%", + marginTop: 0, + marginBottom: 0, + }, + spacer: { width: theme.spacing(2) }, + + selected: { + color: theme.palette.text.disabled, + fontFeatureSettings: '"tnum"', + userSelect: "none", + + display: "inline-block", + marginRight: theme.spacing(1), + minWidth: 150, + }, + + dropdown: { + minWidth: 120, + margin: 0, + }, + inputBaseRoot: { + borderRadius: theme.shape.borderRadius, + backgroundColor: + theme.palette.type === "dark" + ? fade(theme.palette.text.primary, 0.06) + : undefined, + }, + dropdownLabel: { + left: theme.spacing(1.5), + top: "50%", + transform: "translateY(-50%) !important", + + ...theme.typography.body1, + }, + dropdownLabelFocused: { + "$dropdownLabel&": { color: theme.palette.text.primary }, + }, + select: { + paddingTop: "6px !important", + paddingBottom: "7px !important", + }, + dropdownMenu: { marginTop: theme.spacing(-3) }, }) ); export default function BulkActions({ selectedRows, columns, clearSelection }) { - const { requestConfirmation } = useConfirmation(); - const { tableActions, tableState } = useFiretableContext(); - const snack = useSnackContext(); const classes = useStyles(); + + const { tableActions, tableState } = useFiretableContext(); + + const { requestConfirmation } = useConfirmation(); + const snack = useSnackContext(); + const [open, setOpen] = React.useState(false); const anchorRef = React.useRef(null); - const handleToggle = () => { - setOpen((prevOpen) => !prevOpen); - }; + const handleToggle = () => setOpen((prevOpen) => !prevOpen); const handleClose = (event: React.MouseEvent) => { if ( @@ -78,7 +136,7 @@ export default function BulkActions({ selectedRows, columns, clearSelection }) { prevOpen.current = open; }, [open]); - const actionColumns = columns + const actionColumns: { name: string; key: string; config: any }[] = columns .filter((column) => column.type === "ACTION") .map((column) => ({ name: column.name, @@ -109,7 +167,10 @@ export default function BulkActions({ selectedRows, columns, clearSelection }) { clearSelection(); }; - const executeAction = async (actionColumn, actionType) => { + const executeAction = async (key: string, actionType: string) => { + const actionColumn = _find(actionColumns, { key }); + if (!actionColumn) return; + console.log({ actionColumn, selectedRows, actionType }); const callableName = actionColumn.config.callableName ?? "actionScript"; @@ -148,109 +209,116 @@ export default function BulkActions({ selectedRows, columns, clearSelection }) { ); }); }; - const numberOfSelectedRows = selectedRows.length; - if (numberOfSelectedRows === 0) return null; + + const numSelected = selectedRows.length; + return (
- - - - - - - {numberOfSelectedRows} rows selected - + 0}> + + + + + + + + - -
- - - {({ TransitionProps, placement }) => ( - - - - - {actionColumns.map((action) => ( - { - executeAction(action, "run"); - handleClose(e); - }} - > - {action.name} - - ))} - - - - - )} - -
+ {actionColumns.map((action) => ( + {action.name} + ))} + + + + + + + + { + requestConfirmation({ + title: "Duplicate Rows?", + body: `Are you sure you want to duplicate the ${numSelected} selected row${ + numSelected !== 1 ? "s" : "" + }?`, + confirm: "Duplicate Rows", + handleConfirm: handleDuplicate, + }); + }} + aria-label="Duplicate selected rows" + > + + + + + + + + { + requestConfirmation({ + title: "Delete Rows?", + body: `Are you sure you want to delete the ${numSelected} select row${ + numSelected !== 1 ? "s" : "" + }?`, + confirm: "Delete Rows", + handleConfirm: handleDelete, + }); + }} + aria-label="Delete selected rows" + > + + + + - - { - requestConfirmation({ - title: "Duplicate Rows", - body: `Are you sure you want to create duplicate of the ${numberOfSelectedRows} select rows?`, - confirm: "Duplicate", - handleConfirm: handleDuplicate, - }); - }} - aria-label="Duplicate selected rows" - > - - - - { - requestConfirmation({ - title: "Delete Rows", - body: `Are you sure you want to delete the ${numberOfSelectedRows} select rows?`, - confirm: "Delete", - handleConfirm: handleDelete, - }); - }} - aria-label="Delete selected rows" - > - - - - + +
); } diff --git a/www/src/components/Table/TableHeader/index.tsx b/www/src/components/Table/TableHeader/index.tsx index 5a3b2f19..ac5b2080 100644 --- a/www/src/components/Table/TableHeader/index.tsx +++ b/www/src/components/Table/TableHeader/index.tsx @@ -48,7 +48,7 @@ const useStyles = makeStyles((theme) => spacer: { minWidth: theme.spacing(8) }, - formControl: { + dropdown: { minWidth: 120, margin: theme.spacing(0, 0, 0, -1), }, @@ -139,7 +139,7 @@ export default function TableHeader({ { updateConfig("rowHeight", event.target.value); From a245df5b89c1b059132425928265d45ada48bae7 Mon Sep 17 00:00:00 2001 From: Sidney Alcantara Date: Mon, 2 Nov 2020 12:13:15 +1100 Subject: [PATCH 2/2] fix mobile styling --- www/src/components/Navigation/UserMenu.tsx | 5 +- www/src/components/SideDrawer/index.tsx | 1 + .../components/Table/BulkActions/index.tsx | 53 ++++++------------- www/src/components/Table/styles.ts | 2 + 4 files changed, 22 insertions(+), 39 deletions(-) diff --git a/www/src/components/Navigation/UserMenu.tsx b/www/src/components/Navigation/UserMenu.tsx index f63e4999..24644de8 100644 --- a/www/src/components/Navigation/UserMenu.tsx +++ b/www/src/components/Navigation/UserMenu.tsx @@ -37,10 +37,9 @@ const useStyles = makeStyles((theme) => // divider: { margin: theme.spacing(1, 2) }, + secondaryAction: { pointerEvents: "none" }, secondaryIcon: { display: "block", - pointerEvents: "none", - color: theme.palette.action.active, }, }) @@ -114,7 +113,7 @@ export default function UserMenu(props: IconButtonProps) { Dark Theme - + {theme === "light" ? ( ) : ( diff --git a/www/src/components/SideDrawer/index.tsx b/www/src/components/SideDrawer/index.tsx index e8082920..5745c3d8 100644 --- a/www/src/components/SideDrawer/index.tsx +++ b/www/src/components/SideDrawer/index.tsx @@ -16,6 +16,7 @@ import { useStyles } from "./useStyles"; import { useFiretableContext } from "contexts/firetableContext"; import { FieldType } from "constants/fields"; import useDoc from "hooks/useDoc"; + export const DRAWER_WIDTH = 600; export const DRAWER_COLLAPSED_WIDTH = 36; diff --git a/www/src/components/Table/BulkActions/index.tsx b/www/src/components/Table/BulkActions/index.tsx index b63d2764..1bb9c4bd 100644 --- a/www/src/components/Table/BulkActions/index.tsx +++ b/www/src/components/Table/BulkActions/index.tsx @@ -46,7 +46,12 @@ const useStyles = makeStyles((theme) => backgroundColor: theme.palette.type === "light" ? theme.palette.background.default - : undefined, + : theme.palette.background.elevation?.[12] ?? + theme.palette.background.default, + + width: 470, + maxWidth: "100vw", + overflowX: "auto", }, grid: { @@ -56,6 +61,10 @@ const useStyles = makeStyles((theme) => }, spacer: { width: theme.spacing(2) }, + selectedContainer: { + flexBasis: 206, + flexShrink: 0, + }, selected: { color: theme.palette.text.disabled, fontFeatureSettings: '"tnum"', @@ -103,39 +112,6 @@ export default function BulkActions({ selectedRows, columns, clearSelection }) { const { requestConfirmation } = useConfirmation(); const snack = useSnackContext(); - const [open, setOpen] = React.useState(false); - const anchorRef = React.useRef(null); - - const handleToggle = () => setOpen((prevOpen) => !prevOpen); - - const handleClose = (event: React.MouseEvent) => { - if ( - anchorRef.current && - anchorRef.current.contains(event.target as HTMLElement) - ) { - return; - } - - setOpen(false); - }; - - function handleListKeyDown(event: React.KeyboardEvent) { - if (event.key === "Tab") { - event.preventDefault(); - setOpen(false); - } - } - - // return focus to the button when we transitioned from !open -> open - const prevOpen = React.useRef(open); - React.useEffect(() => { - if (prevOpen.current === true && open === false) { - anchorRef.current!.focus(); - } - - prevOpen.current = open; - }, [open]); - const actionColumns: { name: string; key: string; config: any }[] = columns .filter((column) => column.type === "ACTION") .map((column) => ({ @@ -216,8 +192,13 @@ export default function BulkActions({ selectedRows, columns, clearSelection }) {
0}> - - + + height: `calc(100vh - ${APP_BAR_HEIGHT}px)`, "& > .rdg": { flex: 1 }, + + [theme.breakpoints.down("sm")]: { width: "100%" }, }, loadingContainer: {