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

Fix layout

Browse source
This commit is contained in:
dominik-zeglen 2019-10-23 17:10:46 +02:00
parent 7376c5e84d
commit ae7bad925c
1 changed files with 125 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -48,15 +48,19 @@ const styles = (theme: Theme) =>
}, },
bottom: 0, bottom: 0,
gridColumn: 2, gridColumn: 2,
left: 210, height: 70,
position: "fixed", position: "sticky",
width: "calc(100% - 210px)",
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"
@ -81,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": {
@ -258,7 +258,15 @@ const styles = (theme: Theme) =>
flex: 1, flex: 1,
flexGrow: 1, flexGrow: 1,
marginLeft: 0, marginLeft: 0,
paddingBottom: theme.spacing.unit * 10 paddingBottom: theme.spacing.unit,
[theme.breakpoints.up("sm")]: {
paddingBottom: theme.spacing.unit * 3
}
},
viewContainer: {
minHeight: `calc(100vh - ${theme.spacing.unit * 2 +
appLoaderHeight +
70}px)`
} }
}); });
@ -319,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
@ -373,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>