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

Merge pull request #226 from mirumee/fix/ui-improvements

Browse source 
Fix ui improvements
This commit is contained in:
Marcin Gębala 2019-10-23 21:15:11 +02:00 committed by GitHub
commit e554fe7dfa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 207 additions and 184 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

@ -42,4 +42,6 @@ All notable, unreleased changes to this project will be documented in this file.
- Fix empty attribute values - #218 by @dominik-zeglen - Fix empty attribute values - #218 by @dominik-zeglen
- Add language switch - #213 by @dominik-zeglen - Add language switch - #213 by @dominik-zeglen
- Fix copy - #223, #224 by @dominik-zeglen - Fix copy - #223, #224 by @dominik-zeglen
- Fix ui improvements - #226 by @benekex2
- Fix attribute errors - #216 by @dominik-zeglen - Fix attribute errors - #216 by @dominik-zeglen

2
src/attributes/components/AttributeProperties/AttributeProperties.tsx
View file

@ -74,7 +74,7 @@ const AttributeProperties: React.FC<AttributePropertiesProps> = ({
<ControlledCheckbox <ControlledCheckbox
name={"filterableInStorefront" as keyof FormData} name={"filterableInStorefront" as keyof FormData}
label={intl.formatMessage({ label={intl.formatMessage({
defaultMessage: "Use in faceted navigation", defaultMessage: "Use in Faceted Navigation",
description: "attribute is filterable in storefront" description: "attribute is filterable in storefront"
})} })}
checked={data.filterableInStorefront} checked={data.filterableInStorefront}

228
src/components/AppLayout/AppLayout.tsx
View file

@ -42,15 +42,25 @@ import ThemeSwitch from "./ThemeSwitch";
const styles = (theme: Theme) => const styles = (theme: Theme) =>
createStyles({ createStyles({
appAction: { appAction: {
[theme.breakpoints.down("sm")]: {
left: 0,
width: "100%"
},
bottom: 0, bottom: 0,
gridColumn: 2, gridColumn: 2,
height: 70,
position: "sticky", position: "sticky",
zIndex: 10 zIndex: 10
}, },
appLoader: { appLoader: {
height: appLoaderHeight, height: appLoaderHeight,
marginBottom: theme.spacing.unit * 2,
zIndex: 1201 zIndex: 1201
}, },
appLoaderPlaceholder: {
height: appLoaderHeight,
marginBottom: theme.spacing.unit * 2
},
arrow: { arrow: {
marginLeft: theme.spacing.unit * 2, marginLeft: theme.spacing.unit * 2,
transition: theme.transitions.duration.standard + "ms" transition: theme.transitions.duration.standard + "ms"
@ -75,11 +85,7 @@ const styles = (theme: Theme) =>
header: { header: {
display: "flex", display: "flex",
height: 40, height: 40,
marginBottom: theme.spacing.unit * 3, marginBottom: theme.spacing.unit * 3
marginTop: theme.spacing.unit * 2
},
hide: {
opacity: 0
}, },
isMenuSmall: { isMenuSmall: {
"& path": { "& path": {
@ -256,6 +262,11 @@ const styles = (theme: Theme) =>
[theme.breakpoints.up("sm")]: { [theme.breakpoints.up("sm")]: {
paddingBottom: theme.spacing.unit * 3 paddingBottom: theme.spacing.unit * 3
} }
},
viewContainer: {
minHeight: `calc(100vh - ${theme.spacing.unit * 2 +
appLoaderHeight +
70}px)`
} }
}); });
@ -316,12 +327,6 @@ const AppLayout = withStyles(styles, {
{({ isProgress }) => ( {({ isProgress }) => (
<AppHeaderContext.Provider value={appHeaderAnchor}> <AppHeaderContext.Provider value={appHeaderAnchor}>
<AppActionContext.Provider value={appActionAnchor}> <AppActionContext.Provider value={appActionAnchor}>
<LinearProgress
className={classNames(classes.appLoader, {
[classes.hide]: !isProgress
})}
color="primary"
/>
<div className={classes.root}> <div className={classes.root}>
<div className={classes.sideBar}> <div className={classes.sideBar}>
<ResponsiveDrawer <ResponsiveDrawer
@ -370,106 +375,121 @@ const AppLayout = withStyles(styles, {
[classes.contentToggle]: isMenuSmall [classes.contentToggle]: isMenuSmall
})} })}
> >
<div> {isProgress ? (
<Container> <LinearProgress
<div className={classes.header}> className={classes.appLoader}
<div color="primary"
className={classNames(classes.menuIcon, { />
[classes.menuIconOpen]: isDrawerOpened, ) : (
[classes.menuIconDark]: isDark <div className={classes.appLoaderPlaceholder} />
})} )}
onClick={() => setDrawerState(!isDrawerOpened)} <div className={classes.viewContainer}>
> <div>
<span /> <Container>
<span /> <div className={classes.header}>
<span />
<span />
</div>
<div ref={appHeaderAnchor} />
<div className={classes.spacer} />
<div className={classes.userBar}>
<ThemeSwitch
className={classes.darkThemeSwitch}
checked={isDark}
onClick={toggleTheme}
/>
<div <div
className={classes.userMenuContainer} className={classNames(classes.menuIcon, {
ref={anchor} [classes.menuIconOpen]: isDrawerOpened,
[classes.menuIconDark]: isDark
})}
onClick={() => setDrawerState(!isDrawerOpened)}
> >
<Chip <span />
avatar={ <span />
user.avatar && ( <span />
<Avatar alt="user" src={user.avatar.url} /> <span />
) </div>
} <div ref={appHeaderAnchor} />
className={classes.userChip} <div className={classes.spacer} />
label={ <div className={classes.userBar}>
<> <ThemeSwitch
{user.email} className={classes.darkThemeSwitch}
<ArrowDropdown checked={isDark}
className={classNames(classes.arrow, { onClick={toggleTheme}
[classes.rotate]: isMenuOpened
})}
/>
</>
}
onClick={() => setMenuState(!isMenuOpened)}
/> />
<Popper <div
className={classes.popover} className={classes.userMenuContainer}
open={isMenuOpened} ref={anchor}
anchorEl={anchor.current}
transition
disablePortal
placement="bottom-end"
> >
{({ TransitionProps, placement }) => ( <Chip
<Grow avatar={
{...TransitionProps} user.avatar && (
style={{ <Avatar
transformOrigin: alt="user"
placement === "bottom" src={user.avatar.url}
? "right top" />
: "right bottom" )
}} }
> className={classes.userChip}
<Paper> label={
<ClickAwayListener <>
onClickAway={() => setMenuState(false)} {user.email}
mouseEvent="onClick" <ArrowDropdown
> className={classNames(classes.arrow, {
<Menu> [classes.rotate]: isMenuOpened
<MenuItem })}
className={classes.userMenuItem} />
onClick={handleViewerProfile} </>
> }
<FormattedMessage onClick={() => setMenuState(!isMenuOpened)}
defaultMessage="Account Settings" />
description="button" <Popper
/> className={classes.popover}
</MenuItem> open={isMenuOpened}
<MenuItem anchorEl={anchor.current}
className={classes.userMenuItem} transition
onClick={handleLogout} disablePortal
> placement="bottom-end"
<FormattedMessage >
defaultMessage="Log out" {({ TransitionProps, placement }) => (
description="button" <Grow
/> {...TransitionProps}
</MenuItem> style={{
</Menu> transformOrigin:
</ClickAwayListener> placement === "bottom"
</Paper> ? "right top"
</Grow> : "right bottom"
)} }}
</Popper> >
<Paper>
<ClickAwayListener
onClickAway={() =>
setMenuState(false)
}
mouseEvent="onClick"
>
<Menu>
<MenuItem
className={classes.userMenuItem}
onClick={handleViewerProfile}
>
<FormattedMessage
defaultMessage="Account Settings"
description="button"
/>
</MenuItem>
<MenuItem
className={classes.userMenuItem}
onClick={handleLogout}
>
<FormattedMessage
defaultMessage="Log out"
description="button"
/>
</MenuItem>
</Menu>
</ClickAwayListener>
</Paper>
</Grow>
)}
</Popper>
</div>
</div> </div>
</div> </div>
</div> </Container>
</Container> </div>
<main className={classes.view}>{children}</main>
</div> </div>
<main className={classes.view}>{children}</main>
<div className={classes.appAction} ref={appActionAnchor} /> <div className={classes.appAction} ref={appActionAnchor} />
</div> </div>
</div> </div>

2
src/components/Checkbox/Checkbox.tsx
View file

@ -83,7 +83,7 @@ const styles = (theme: Theme) =>
display: "flex", display: "flex",
height: 30, height: 30,
justifyContent: "center", justifyContent: "center",
margin: 9, margin: "5px 9px",
width: 30 width: 30
} }
}); });

2
src/components/ControlledSwitch.tsx
View file

@ -6,7 +6,7 @@ import React from "react";
const styles = (theme: Theme) => const styles = (theme: Theme) =>
createStyles({ createStyles({
label: { label: {
marginLeft: theme.spacing.unit * 2 marginLeft: theme.spacing.unit * 3.5
}, },
labelText: { labelText: {
fontSize: 14 fontSize: 14

5
src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectField.tsx
View file

@ -93,7 +93,6 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
inputValue, inputValue,
selectedItem, selectedItem,
toggleMenu, toggleMenu,
openMenu,
closeMenu, closeMenu,
highlightedIndex, highlightedIndex,
reset reset
@ -127,13 +126,13 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
}), }),
endAdornment: ( endAdornment: (
<div> <div>
<ArrowDropdownIcon onClick={toggleMenu} /> <ArrowDropdownIcon />
</div> </div>
), ),
error, error,
id: undefined, id: undefined,
onBlur: closeMenu, onBlur: closeMenu,
onFocus: openMenu onClick: toggleMenu
}} }}
error={error} error={error}
disabled={disabled} disabled={disabled}

10
src/components/Timeline/Timeline.tsx
View file

@ -71,6 +71,7 @@ interface TimelineProps extends WithStyles<typeof styles> {
interface TimelineAddNoteProps extends WithStyles<typeof styles> { interface TimelineAddNoteProps extends WithStyles<typeof styles> {
message: string; message: string;
reset: () => void;
onChange(event: React.ChangeEvent<any>); onChange(event: React.ChangeEvent<any>);
onSubmit(event: React.FormEvent<any>); onSubmit(event: React.FormEvent<any>);
} }
@ -82,9 +83,14 @@ export const Timeline = withStyles(styles, { name: "Timeline" })(
); );
export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })( export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })(
({ classes, message, onChange, onSubmit }: TimelineAddNoteProps) => { ({ classes, message, onChange, onSubmit, reset }: TimelineAddNoteProps) => {
const intl = useIntl(); const intl = useIntl();
const submit = e => {
reset();
onSubmit(e);
};
return ( return (
<div className={classes.noteRoot}> <div className={classes.noteRoot}>
<CardContent className={classes.noteTitle}> <CardContent className={classes.noteTitle}>
@ -106,7 +112,7 @@ export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })(
multiline multiline
InputProps={{ InputProps={{
endAdornment: ( endAdornment: (
<Button color="primary" onClick={onSubmit}> <Button color="primary" onClick={e => submit(e)}>
<FormattedMessage <FormattedMessage
defaultMessage="Send" defaultMessage="Send"
description="add order note, button" description="add order note, button"

29
src/components/Timeline/TimelineNote.tsx
View file

@ -14,7 +14,6 @@ import CRC from "crc-32";
import React from "react"; import React from "react";
import { DateTime } from "../Date"; import { DateTime } from "../Date";
import Hr from "../Hr";
const palette = [ const palette = [
colors.amber, colors.amber,
@ -49,20 +48,22 @@ const styles = (theme: Theme) =>
}, },
cardContent: { cardContent: {
"&:last-child": { "&:last-child": {
paddingBottom: 16 padding: 16
} },
}, boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.05)"
content: {
marginTop: theme.spacing.unit * 2
}, },
root: { root: {
position: "relative" position: "relative"
}, },
title: { title: {
"& p": {
fontSize: "14px"
},
alignItems: "center", alignItems: "center",
display: "flex", display: "flex",
justifyContent: "space-between", justifyContent: "space-between",
marginBottom: theme.spacing.unit marginBottom: theme.spacing.unit,
paddingLeft: theme.spacing.unit * 3
} }
}); });
@ -83,17 +84,15 @@ export const TimelineNote = withStyles(styles, { name: "TimelineNote" })(
> >
<PersonIcon /> <PersonIcon />
</Avatar> </Avatar>
<div className={classes.title}>
<Typography>{user.email}</Typography>
<Typography>
<DateTime date={date} />
</Typography>
</div>
<Card className={classes.card}> <Card className={classes.card}>
<CardContent className={classes.cardContent}> <CardContent className={classes.cardContent}>
<div className={classes.title}>
<Typography>{user.email}</Typography>
<Typography>
<DateTime date={date} />
</Typography>
</div>
<Hr />
<Typography <Typography
className={classes.content}
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: message.replace("\n", "<br />") __html: message.replace("\n", "<br />")
}} }}

1
src/home/components/HomeAnalyticsCard/HomeAnalyticsCard.tsx
View file

@ -28,7 +28,6 @@ const styles = (theme: Theme) =>
marginBottom: theme.spacing.unit * 3 marginBottom: theme.spacing.unit * 3
}, },
cardSubtitle: { cardSubtitle: {
color: theme.palette.primary.main,
fontSize: 12, fontSize: 12,
height: "20px", height: "20px",
lineHeight: 0.9 lineHeight: 0.9

3
src/orders/components/OrderHistory/OrderHistory.tsx
View file

@ -207,9 +207,10 @@ const OrderHistory = withStyles(styles, { name: "OrderHistory" })(
{history ? ( {history ? (
<Timeline> <Timeline>
<Form initial={{ message: "" }} onSubmit={onNoteAdd} resetOnSubmit> <Form initial={{ message: "" }} onSubmit={onNoteAdd} resetOnSubmit>
{({ change, data, submit }) => ( {({ change, data, reset, submit }) => (
<TimelineAddNote <TimelineAddNote
message={data.message} message={data.message}
reset={reset}
onChange={change} onChange={change}
onSubmit={submit} onSubmit={submit}
/> />

102
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -6727,37 +6727,34 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
/> />
</svg> </svg>
</div> </div>
<div
class="TimelineNote-title-id"
>
<p
class="MuiTypography-root-id MuiTypography-body2-id"
>
admin@example.com
</p>
<p
class="MuiTypography-root-id MuiTypography-body2-id"
>
<time
class=""
datetime="1525712282000"
title="May 7, 2018 12:58 PM"
>
3 months ago
</time>
</p>
</div>
<div <div
class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id TimelineNote-card-id" class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id TimelineNote-card-id"
> >
<div <div
class="MuiCardContent-root-id TimelineNote-cardContent-id" class="MuiCardContent-root-id TimelineNote-cardContent-id"
> >
<div
class="TimelineNote-title-id"
>
<p
class="MuiTypography-root-id MuiTypography-body2-id"
>
admin@example.com
</p>
<p
class="MuiTypography-root-id MuiTypography-body2-id"
>
<time
class=""
datetime="1525712282000"
title="May 7, 2018 12:58 PM"
>
3 months ago
</time>
</p>
</div>
<hr
class="Hr-root-id"
/>
<p <p
class="MuiTypography-root-id MuiTypography-body2-id TimelineNote-content-id" class="MuiTypography-root-id MuiTypography-body2-id"
> >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
</p> </p>
@ -6787,37 +6784,34 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
/> />
</svg> </svg>
</div> </div>
<div
class="TimelineNote-title-id"
>
<p
class="MuiTypography-root-id MuiTypography-body2-id"
>
ceo@example.com
</p>
<p
class="MuiTypography-root-id MuiTypography-body2-id"
>
<time
class=""
datetime="1525712282000"
title="May 7, 2018 12:58 PM"
>
3 months ago
</time>
</p>
</div>
<div <div
class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id TimelineNote-card-id" class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id TimelineNote-card-id"
> >
<div <div
class="MuiCardContent-root-id TimelineNote-cardContent-id" class="MuiCardContent-root-id TimelineNote-cardContent-id"
> >
<div
class="TimelineNote-title-id"
>
<p
class="MuiTypography-root-id MuiTypography-body2-id"
>
ceo@example.com
</p>
<p
class="MuiTypography-root-id MuiTypography-body2-id"
>
<time
class=""
datetime="1525712282000"
title="May 7, 2018 12:58 PM"
>
3 months ago
</time>
</p>
</div>
<hr
class="Hr-root-id"
/>
<p <p
class="MuiTypography-root-id MuiTypography-body2-id TimelineNote-content-id" class="MuiTypography-root-id MuiTypography-body2-id"
> >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
</p> </p>
@ -8378,7 +8372,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
<span <span
class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id" class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
> >
Use in faceted navigation Use in Faceted Navigation
</span> </span>
</label> </label>
<div <div
@ -9023,7 +9017,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
<span <span
class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id" class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
> >
Use in faceted navigation Use in Faceted Navigation
</span> </span>
</label> </label>
<div <div
@ -9673,7 +9667,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
<span <span
class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id" class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
> >
Use in faceted navigation Use in Faceted Navigation
</span> </span>
</label> </label>
<div <div
@ -10263,7 +10257,7 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
<span <span
class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id" class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
> >
Use in faceted navigation Use in Faceted Navigation
</span> </span>
</label> </label>
<div <div
@ -10915,7 +10909,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
<span <span
class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id" class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
> >
Use in faceted navigation Use in Faceted Navigation
</span> </span>
</label> </label>
<div <div
@ -11488,7 +11482,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
<span <span
class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id" class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
> >
Use in faceted navigation Use in Faceted Navigation
</span> </span>
</label> </label>
<div <div

5
src/theme.ts
View file

@ -60,7 +60,7 @@ export default (colors: IThemeColors): Theme =>
}, },
flat: { flat: {
"& span": { "& span": {
color: colors.font.gray color: colors.font.default
} }
}, },
flatPrimary: { flatPrimary: {
@ -100,6 +100,9 @@ export default (colors: IThemeColors): Theme =>
}, },
MuiDialogContent: { MuiDialogContent: {
root: { root: {
"& label": {
overflowX: "hidden"
},
padding: "5px 24px 24px" padding: "5px 24px 24px"
} }
}, },