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

Merge branch 'master' into add/readonly-mode

Browse source
This commit is contained in:
Marcin Gębala 2019-10-24 14:29:35 +02:00 committed by GitHub
commit c9cf8dcb9b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
13 changed files with 212 additions and 188 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
CHANGELOG.md
View file

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

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

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

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

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

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

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

9
src/components/ColumnPicker/ColumnPickerContent.tsx
View file

@ -87,10 +87,11 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
const anchor = React.useRef<HTMLDivElement>();
const scrollPosition = useElementScroll(anchor);
const dropShadow = anchor.current
? scrollPosition.y + anchor.current.clientHeight <
anchor.current.scrollHeight
: false;
const dropShadow =
anchor.current && scrollPosition
? scrollPosition.y + anchor.current.clientHeight <
anchor.current.scrollHeight
: false;
return (
<Card className={classes.root}>

2
src/components/ControlledSwitch.tsx
View file

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

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

@ -93,7 +93,6 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
inputValue,
selectedItem,
toggleMenu,
openMenu,
closeMenu,
highlightedIndex,
reset
@ -127,13 +126,13 @@ const SingleAutocompleteSelectFieldComponent = withStyles(styles, {
}),
endAdornment: (
<div>
<ArrowDropdownIcon onClick={toggleMenu} />
<ArrowDropdownIcon />
</div>
),
error,
id: undefined,
onBlur: closeMenu,
onFocus: openMenu
onClick: toggleMenu
}}
error={error}
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> {
message: string;
reset: () => void;
onChange(event: React.ChangeEvent<any>);
onSubmit(event: React.FormEvent<any>);
}
@ -82,9 +83,14 @@ export const Timeline = withStyles(styles, { name: "Timeline" })(
);
export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })(
({ classes, message, onChange, onSubmit }: TimelineAddNoteProps) => {
({ classes, message, onChange, onSubmit, reset }: TimelineAddNoteProps) => {
const intl = useIntl();
const submit = e => {
reset();
onSubmit(e);
};
return (
<div className={classes.noteRoot}>
<CardContent className={classes.noteTitle}>
@ -106,7 +112,7 @@ export const TimelineAddNote = withStyles(styles, { name: "TimelineAddNote" })(
multiline
InputProps={{
endAdornment: (
<Button color="primary" onClick={onSubmit}>
<Button color="primary" onClick={e => submit(e)}>
<FormattedMessage
defaultMessage="Send"
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 { DateTime } from "../Date";
import Hr from "../Hr";
const palette = [
colors.amber,
@ -49,20 +48,22 @@ const styles = (theme: Theme) =>
},
cardContent: {
"&:last-child": {
paddingBottom: 16
}
},
content: {
marginTop: theme.spacing.unit * 2
padding: 16
},
boxShadow: "0px 5px 10px rgba(0, 0, 0, 0.05)"
},
root: {
position: "relative"
},
title: {
"& p": {
fontSize: "14px"
},
alignItems: "center",
display: "flex",
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 />
</Avatar>
<div className={classes.title}>
<Typography>{user.email}</Typography>
<Typography>
<DateTime date={date} />
</Typography>
</div>
<Card className={classes.card}>
<CardContent className={classes.cardContent}>
<div className={classes.title}>
<Typography>{user.email}</Typography>
<Typography>
<DateTime date={date} />
</Typography>
</div>
<Hr />
<Typography
className={classes.content}
dangerouslySetInnerHTML={{
__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
},
cardSubtitle: {
color: theme.palette.primary.main,
fontSize: 12,
height: "20px",
lineHeight: 0.9

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

@ -207,9 +207,10 @@ const OrderHistory = withStyles(styles, { name: "OrderHistory" })(
{history ? (
<Timeline>
<Form initial={{ message: "" }} onSubmit={onNoteAdd} resetOnSubmit>
{({ change, data, submit }) => (
{({ change, data, reset, submit }) => (
<TimelineAddNote
message={data.message}
reset={reset}
onChange={change}
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>
</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
class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id TimelineNote-card-id"
>
<div
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
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.
</p>
@ -6787,37 +6784,34 @@ exports[`Storyshots Generics / Timeline with order notes 1`] = `
/>
</svg>
</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
class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiCard-root-id TimelineNote-card-id"
>
<div
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
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.
</p>
@ -8378,7 +8372,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
<span
class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
>
Use in faceted navigation
Use in Faceted Navigation
</span>
</label>
<div
@ -9023,7 +9017,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
<span
class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
>
Use in faceted navigation
Use in Faceted Navigation
</span>
</label>
<div
@ -9673,7 +9667,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
<span
class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
>
Use in faceted navigation
Use in Faceted Navigation
</span>
</label>
<div
@ -10263,7 +10257,7 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
<span
class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
>
Use in faceted navigation
Use in Faceted Navigation
</span>
</label>
<div
@ -10915,7 +10909,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
<span
class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
>
Use in faceted navigation
Use in Faceted Navigation
</span>
</label>
<div
@ -11488,7 +11482,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
<span
class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
>
Use in faceted navigation
Use in Faceted Navigation
</span>
</label>
<div

5
src/theme.ts
View file

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