Mirrors/rowy
1
0
Fork 0
mirror of https://github.com/rowyio/rowy.git synced 2026-07-13 05:48:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

update Add Row, Add Column button icons

Browse Source
This commit is contained in:
Sidney Alcantara
2020-10-21 11:39:48 +11:00
parent 290f08b6c2
commit 6c403dbce7
8 changed files with 45 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
www/src/assets/icons/AddColumn.tsx
View File

@@ -3,8 +3,8 @@ import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
export default function AddColumn(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 32 32" {...props}>
<path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm1 8H7v17h10V8zm-2 12v3H9v-3h6zm9-8h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3zm-9 3v3H9v-3h6zm0-5v3H9v-3h6z" />
<SvgIcon viewBox="0 0 24 24" {...props}>
<path d="M13,4 L3,4 L3,21 L13,21 L13,4 Z M11,16 L11,19 L5,19 L5,16 L11,16 Z M20,8 L18,8 L18,11 L15,11 L15,13 L18,13 L18,16 L20,16 L20,13 L23,13 L23,11 L20,11 L20,8 Z M11,11 L11,14 L5,14 L5,11 L11,11 Z M11,6 L11,9 L5,9 L5,6 L11,6 Z" />
</SvgIcon>
);
}

10
www/src/assets/icons/AddColumnCircle.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from "react";
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
export default function AddColumn(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 32 32" {...props}>
<path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm1 8H7v17h10V8zm-2 12v3H9v-3h6zm9-8h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3zm-9 3v3H9v-3h6zm0-5v3H9v-3h6z" />
</SvgIcon>
);
}

4
www/src/assets/icons/AddRow.tsx
View File

@@ -3,8 +3,8 @@ import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
export default function AddRow(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 32 32" {...props}>
<path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm1 20h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3zm12-9H3v7h26v-7zm-18 2v3H5v-3h6zm8 0v3h-6v-3h6zm8 0v3h-6v-3h6z" />
<SvgIcon viewBox="0 0 26 26" {...props}>
<path d="M14,17 L12,17 L12,20 L9,20 L9,22 L12,22 L12,25 L14,25 L14,22 L17,22 L17,20 L14,20 L14,17 Z M26,8 L0,8 L0,15 L26,15 L26,8 Z M8,10 L8,13 L2,13 L2,10 L8,10 Z M16,10 L16,13 L10,13 L10,10 L16,10 Z M24,10 L24,13 L18,13 L18,10 L24,10 Z" />
</SvgIcon>
);
}

10
www/src/assets/icons/AddRowCircle.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from "react";
import SvgIcon, { SvgIconProps } from "@material-ui/core/SvgIcon";
export default function AddRow(props: SvgIconProps) {
return (
<SvgIcon viewBox="0 0 32 32" {...props}>
<path d="M16 0c8.837 0 16 7.163 16 16s-7.163 16-16 16S0 24.837 0 16 7.163 0 16 0zm1 20h-2v3h-3v2h3v3h2v-3h3v-2h-3v-3zm12-9H3v7h26v-7zm-18 2v3H5v-3h6zm8 0v3h-6v-3h6zm8 0v3h-6v-3h6z" />
</SvgIcon>
);
}

40
www/src/components/Table/FinalColumnHeader.tsx
View File

@@ -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<any>["headerRenderer"] = ({ column }) => {
justify="center"
className={classes.root}
>
<Tooltip title="Add column">
<IconButton
size="small"
className={classes.addColumnButton}
color="primary"
aria-label="Add column"
onClick={handleClick}
>
<AddColumnIcon />
</IconButton>
</Tooltip>
<Button
onClick={handleClick}
variant="contained"
color="primary"
className={classes.button}
startIcon={<AddColumnIcon className={classes.addColumnIcon} />}
>
Add Column
</Button>
</Grid>
);
};

9
www/src/components/Table/TableHeader.tsx
View File

@@ -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={<AddIcon />}
startIcon={<AddRowIcon className={classes.addRowIcon} />}
>
Add Row
</Button>

7
www/src/components/Table/formatters/FinalColumn.tsx
View File

@@ -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%",
},
},
},
})

1
www/src/components/Table/styles.ts
View File

@@ -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,
},