djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update savebar design

Browse source
This commit is contained in:
dominik-zeglen 2020-09-03 19:01:32 +02:00
parent eba4ba2edf
commit 203c5ba696
1 changed files with 48 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
src/components/SaveButtonBar/SaveButtonBar.tsx
View file

@ -1,9 +1,10 @@
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import Card from "@material-ui/core/Card";
import CardContent from "@material-ui/core/CardContent";
import Portal from "@material-ui/core/Portal"; import Portal from "@material-ui/core/Portal";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import useWindowScroll from "@saleor/hooks/useWindowScroll"; import useWindowScroll from "@saleor/hooks/useWindowScroll";
import { buttonMessages } from "@saleor/intl"; import { buttonMessages } from "@saleor/intl";
import classNames from "classnames";
import React from "react"; import React from "react";
import { useIntl } from "react-intl"; import { useIntl } from "react-intl";
@ -22,7 +23,10 @@ const useStyles = makeStyles(
cancelButton: { cancelButton: {
marginRight: theme.spacing(2) marginRight: theme.spacing(2)
}, },
container: { content: {
"&:last-child": {
paddingBottom: theme.spacing(2)
},
display: "flex", display: "flex",
paddingBottom: theme.spacing(2), paddingBottom: theme.spacing(2),
paddingTop: theme.spacing(2), paddingTop: theme.spacing(2),
@ -38,20 +42,10 @@ const useStyles = makeStyles(
color: theme.palette.error.contrastText color: theme.palette.error.contrastText
}, },
root: { root: {
background: theme.palette.background.default, height: 120
borderTop: "1px solid transparent",
boxShadow: `0 -5px 5px 0 ${theme.palette.divider}`,
height: 70,
transition: `box-shadow ${theme.transitions.duration.shortest}ms`
}, },
spacer: { spacer: {
flex: "1" flex: "1"
},
stop: {
"&$root": {
borderTopColor: theme.palette.divider,
boxShadow: `0 0 0 0 ${theme.palette.divider}`
}
} }
}), }),
{ name: "SaveButtonBar" } { name: "SaveButtonBar" }
@ -92,13 +86,10 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
{anchor => {anchor =>
anchor ? ( anchor ? (
<Portal container={anchor.current}> <Portal container={anchor.current}>
<div <div className={classes.root} {...rest}>
className={classNames(classes.root, { <Container>
[classes.stop]: scrolledToBottom <Card elevation={scrolledToBottom ? 0 : 16}>
})} <CardContent className={classes.content}>
{...rest}
>
<Container className={classes.container}>
{!!onDelete && ( {!!onDelete && (
<Button <Button
variant="contained" variant="contained"
@ -134,6 +125,8 @@ export const SaveButtonBar: React.FC<SaveButtonBarProps> = props => {
intl.formatMessage(buttonMessages.save) intl.formatMessage(buttonMessages.save)
)} )}
</ConfirmButton> </ConfirmButton>
</CardContent>
</Card>
</Container> </Container>
</div> </div>
</Portal> </Portal>