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

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

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