From 6c403dbce7aece3fc206fc08685748aba6c12827 Mon Sep 17 00:00:00 2001 From: Sidney Alcantara Date: Wed, 21 Oct 2020 11:39:48 +1100 Subject: [PATCH] update Add Row, Add Column button icons --- www/src/assets/icons/AddColumn.tsx | 4 +- www/src/assets/icons/AddColumnCircle.tsx | 10 +++++ www/src/assets/icons/AddRow.tsx | 4 +- www/src/assets/icons/AddRowCircle.tsx | 10 +++++ .../components/Table/FinalColumnHeader.tsx | 40 ++++++------------- www/src/components/Table/TableHeader.tsx | 9 +++-- .../Table/formatters/FinalColumn.tsx | 7 +--- www/src/components/Table/styles.ts | 1 + 8 files changed, 45 insertions(+), 40 deletions(-) create mode 100644 www/src/assets/icons/AddColumnCircle.tsx create mode 100644 www/src/assets/icons/AddRowCircle.tsx diff --git a/www/src/assets/icons/AddColumn.tsx b/www/src/assets/icons/AddColumn.tsx index 7b893680..117d5760 100644 --- a/www/src/assets/icons/AddColumn.tsx +++ b/www/src/assets/icons/AddColumn.tsx @@ -3,8 +3,8 @@ import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"; export default function AddColumn(props: SvgIconProps) { return ( - - + + ); } diff --git a/www/src/assets/icons/AddColumnCircle.tsx b/www/src/assets/icons/AddColumnCircle.tsx new file mode 100644 index 00000000..7b893680 --- /dev/null +++ b/www/src/assets/icons/AddColumnCircle.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"; + +export default function AddColumn(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/www/src/assets/icons/AddRow.tsx b/www/src/assets/icons/AddRow.tsx index a6ffe119..000650f3 100644 --- a/www/src/assets/icons/AddRow.tsx +++ b/www/src/assets/icons/AddRow.tsx @@ -3,8 +3,8 @@ import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"; export default function AddRow(props: SvgIconProps) { return ( - - + + ); } diff --git a/www/src/assets/icons/AddRowCircle.tsx b/www/src/assets/icons/AddRowCircle.tsx new file mode 100644 index 00000000..a6ffe119 --- /dev/null +++ b/www/src/assets/icons/AddRowCircle.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon"; + +export default function AddRow(props: SvgIconProps) { + return ( + + + + ); +} diff --git a/www/src/components/Table/FinalColumnHeader.tsx b/www/src/components/Table/FinalColumnHeader.tsx index b8fb91b0..2c9344ca 100644 --- a/www/src/components/Table/FinalColumnHeader.tsx +++ b/www/src/components/Table/FinalColumnHeader.tsx @@ -6,7 +6,7 @@ import { createStyles, Tooltip, Grid, - IconButton, + Button, } from "@material-ui/core"; import AddColumnIcon from "assets/icons/AddColumn"; @@ -16,23 +16,11 @@ const useStyles = makeStyles((theme) => createStyles({ root: { height: "100%", - "& svg, & button": { display: "block" }, + width: "auto", }, - addColumnButton: { - backgroundColor: theme.palette.primary.contrastText, - padding: 0, - "& svg": { width: 32, height: 32 }, - - opacity: 0.5, - transition: theme.transitions.create("opacity", { - duration: theme.transitions.duration.short, - }), - "&:hover": { - backgroundColor: theme.palette.primary.contrastText, - opacity: 1, - }, - }, + button: { zIndex: 1 }, + addColumnIcon: { fontSize: "24px !important" }, }) ); @@ -57,17 +45,15 @@ const FinalColumnHeader: Column["headerRenderer"] = ({ column }) => { justify="center" className={classes.root} > - - - - - + ); }; diff --git a/www/src/components/Table/TableHeader.tsx b/www/src/components/Table/TableHeader.tsx index 6c1501f4..e5c10160 100644 --- a/www/src/components/Table/TableHeader.tsx +++ b/www/src/components/Table/TableHeader.tsx @@ -10,8 +10,8 @@ import { Button, } from "@material-ui/core"; -import { isCollectionGroup } from "../../util/fns"; -import AddIcon from "@material-ui/icons/Add"; +import { isCollectionGroup } from "util/fns"; +import AddRowIcon from "assets/icons/AddRow"; import Filters from "./Filters"; import ImportCSV from "./ImportCSV"; @@ -43,7 +43,8 @@ const useStyles = makeStyles((theme) => paddingRight: theme.spacing(1), }, }, - collectionName: { textTransform: "uppercase" }, + + addRowIcon: { fontSize: "26px !important" }, spacer: { minWidth: theme.spacing(8) }, @@ -103,7 +104,7 @@ export default function TableHeader({ }} variant="contained" color="primary" - startIcon={} + startIcon={} > Add Row diff --git a/www/src/components/Table/formatters/FinalColumn.tsx b/www/src/components/Table/formatters/FinalColumn.tsx index e4faceaf..8ff2784d 100644 --- a/www/src/components/Table/formatters/FinalColumn.tsx +++ b/www/src/components/Table/formatters/FinalColumn.tsx @@ -10,10 +10,12 @@ import { } from "@material-ui/core"; import CopyCellsIcon from "assets/icons/CopyCells"; import DeleteIcon from "@material-ui/icons/Cancel"; + import { SnackContext } from "../../../contexts/snackContext"; import { useConfirmation } from "components/ConfirmationDialog/Context"; import { useFiretableContext } from "contexts/firetableContext"; import useKeyPress from "../../../hooks/useKeyPress"; + export const useFinalColumnStyles = makeStyles((theme) => createStyles({ cell: { @@ -33,11 +35,6 @@ export const useFinalColumnStyles = makeStyles((theme) => width: "46px !important", overflow: "visible", borderWidth: "1px !important", - - "& > div": { - position: "absolute", - right: "-50%", - }, }, }, }) diff --git a/www/src/components/Table/styles.ts b/www/src/components/Table/styles.ts index 0dc90e0e..93f7237c 100644 --- a/www/src/components/Table/styles.ts +++ b/www/src/components/Table/styles.ts @@ -10,6 +10,7 @@ export const useStyles = makeStyles((theme) => lineHeight: "inherit !important", }, + "& .rdg-header": { overflow: "visible" }, "& .rdg-header, & .rdg-header .rdg-cell": { backgroundColor: theme.palette.background.default, },