Add navigator button
This commit is contained in:
dominik-zeglen
parent
1eb3ec7b2d
commit
3816ebb0a5
3 changed files with 175 additions and 160 deletions
|
|
@ -28,6 +28,7 @@ import useRouter from "use-react-router";
|
||||||
|
|
||||||
import Container from "../Container";
|
import Container from "../Container";
|
||||||
import ErrorPage from "../ErrorPage";
|
import ErrorPage from "../ErrorPage";
|
||||||
|
import Navigator from "../Navigator";
|
||||||
import AppActionContext from "./AppActionContext";
|
import AppActionContext from "./AppActionContext";
|
||||||
import AppHeaderContext from "./AppHeaderContext";
|
import AppHeaderContext from "./AppHeaderContext";
|
||||||
import { appLoaderHeight, drawerWidth, drawerWidthExpanded } from "./consts";
|
import { appLoaderHeight, drawerWidth, drawerWidthExpanded } from "./consts";
|
||||||
|
|
@ -310,6 +311,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
const [appState, dispatchAppState] = useAppState();
|
const [appState, dispatchAppState] = useAppState();
|
||||||
const { location } = useRouter();
|
const { location } = useRouter();
|
||||||
|
const [isNavigatorVisible, setNavigatorVisibility] = React.useState(false);
|
||||||
|
|
||||||
const menuStructure = createMenuStructure(intl);
|
const menuStructure = createMenuStructure(intl);
|
||||||
const configurationMenu = createConfigurationMenu(intl);
|
const configurationMenu = createConfigurationMenu(intl);
|
||||||
|
|
@ -356,170 +358,181 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AppHeaderContext.Provider value={appHeaderAnchor}>
|
<>
|
||||||
<AppActionContext.Provider value={appActionAnchor}>
|
<Navigator
|
||||||
<div className={classes.root}>
|
visible={isNavigatorVisible}
|
||||||
<div className={classes.sideBar}>
|
setVisibility={setNavigatorVisibility}
|
||||||
<ResponsiveDrawer
|
/>
|
||||||
onClose={() => setDrawerState(false)}
|
<AppHeaderContext.Provider value={appHeaderAnchor}>
|
||||||
open={isDrawerOpened}
|
<AppActionContext.Provider value={appActionAnchor}>
|
||||||
small={!isMenuSmall}
|
<div className={classes.root}>
|
||||||
>
|
<div className={classes.sideBar}>
|
||||||
<div
|
<ResponsiveDrawer
|
||||||
className={classNames(classes.logo, {
|
onClose={() => setDrawerState(false)}
|
||||||
[classes.logoSmall]: isMenuSmall,
|
open={isDrawerOpened}
|
||||||
[classes.logoDark]: isDark
|
small={!isMenuSmall}
|
||||||
})}
|
|
||||||
>
|
>
|
||||||
<SVG src={isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo} />
|
|
||||||
</div>
|
|
||||||
<Hidden smDown>
|
|
||||||
<div
|
<div
|
||||||
className={classNames(classes.isMenuSmall, {
|
className={classNames(classes.logo, {
|
||||||
[classes.isMenuSmallHide]: isMenuSmall,
|
[classes.logoSmall]: isMenuSmall,
|
||||||
[classes.isMenuSmallDark]: isDark
|
[classes.logoDark]: isDark
|
||||||
})}
|
})}
|
||||||
onClick={handleIsMenuSmall}
|
|
||||||
>
|
>
|
||||||
<SVG src={menuArrowIcon} />
|
<SVG
|
||||||
|
src={isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Hidden>
|
<Hidden smDown>
|
||||||
<MenuList
|
<div
|
||||||
className={isMenuSmall ? classes.menuSmall : classes.menu}
|
className={classNames(classes.isMenuSmall, {
|
||||||
menuItems={menuStructure}
|
[classes.isMenuSmallHide]: isMenuSmall,
|
||||||
isMenuSmall={!isMenuSmall}
|
[classes.isMenuSmallDark]: isDark
|
||||||
location={location.pathname}
|
})}
|
||||||
user={user}
|
onClick={handleIsMenuSmall}
|
||||||
renderConfigure={renderConfigure}
|
>
|
||||||
onMenuItemClick={handleMenuItemClick}
|
<SVG src={menuArrowIcon} />
|
||||||
/>
|
</div>
|
||||||
</ResponsiveDrawer>
|
</Hidden>
|
||||||
</div>
|
<MenuList
|
||||||
<div
|
className={isMenuSmall ? classes.menuSmall : classes.menu}
|
||||||
className={classNames(classes.content, {
|
menuItems={menuStructure}
|
||||||
[classes.contentToggle]: isMenuSmall
|
isMenuSmall={!isMenuSmall}
|
||||||
})}
|
location={location.pathname}
|
||||||
>
|
user={user}
|
||||||
{appState.loading ? (
|
renderConfigure={renderConfigure}
|
||||||
<LinearProgress className={classes.appLoader} color="primary" />
|
onMenuItemClick={handleMenuItemClick}
|
||||||
) : (
|
/>
|
||||||
<div className={classes.appLoaderPlaceholder} />
|
</ResponsiveDrawer>
|
||||||
)}
|
</div>
|
||||||
<div className={classes.viewContainer}>
|
<div
|
||||||
<div>
|
className={classNames(classes.content, {
|
||||||
<Container>
|
[classes.contentToggle]: isMenuSmall
|
||||||
<div className={classes.header}>
|
})}
|
||||||
<div
|
>
|
||||||
className={classNames(classes.menuIcon, {
|
{appState.loading ? (
|
||||||
[classes.menuIconOpen]: isDrawerOpened,
|
<LinearProgress className={classes.appLoader} color="primary" />
|
||||||
[classes.menuIconDark]: isDark
|
) : (
|
||||||
})}
|
<div className={classes.appLoaderPlaceholder} />
|
||||||
onClick={() => setDrawerState(!isDrawerOpened)}
|
)}
|
||||||
>
|
<div className={classes.viewContainer}>
|
||||||
<span />
|
<div>
|
||||||
<span />
|
<Container>
|
||||||
<span />
|
<div className={classes.header}>
|
||||||
<span />
|
<div
|
||||||
</div>
|
className={classNames(classes.menuIcon, {
|
||||||
<div ref={appHeaderAnchor} />
|
[classes.menuIconOpen]: isDrawerOpened,
|
||||||
<div className={classes.spacer} />
|
[classes.menuIconDark]: isDark
|
||||||
<div className={classes.userBar}>
|
})}
|
||||||
<ThemeSwitch
|
onClick={() => setDrawerState(!isDrawerOpened)}
|
||||||
className={classes.darkThemeSwitch}
|
>
|
||||||
checked={isDark}
|
<span />
|
||||||
onClick={toggleTheme}
|
<span />
|
||||||
/>
|
<span />
|
||||||
<div className={classes.userMenuContainer} ref={anchor}>
|
<span />
|
||||||
<Chip
|
</div>
|
||||||
avatar={
|
<div ref={appHeaderAnchor} />
|
||||||
user.avatar && (
|
<div className={classes.spacer} />
|
||||||
<Avatar alt="user" src={user.avatar.url} />
|
<div className={classes.userBar}>
|
||||||
)
|
<ThemeSwitch
|
||||||
}
|
className={classes.darkThemeSwitch}
|
||||||
classes={{
|
checked={isDark}
|
||||||
avatar: classes.avatar
|
onClick={toggleTheme}
|
||||||
}}
|
|
||||||
className={classes.userChip}
|
|
||||||
label={
|
|
||||||
<>
|
|
||||||
{user.email}
|
|
||||||
<ArrowDropdown
|
|
||||||
className={classNames(classes.arrow, {
|
|
||||||
[classes.rotate]: isMenuOpened
|
|
||||||
})}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
onClick={() => setMenuState(!isMenuOpened)}
|
|
||||||
data-test="userMenu"
|
|
||||||
/>
|
/>
|
||||||
<Popper
|
<button onClick={() => setNavigatorVisibility(true)}>
|
||||||
className={classes.popover}
|
naviigator
|
||||||
open={isMenuOpened}
|
</button>
|
||||||
anchorEl={anchor.current}
|
<div className={classes.userMenuContainer} ref={anchor}>
|
||||||
transition
|
<Chip
|
||||||
placement="bottom-end"
|
avatar={
|
||||||
>
|
user.avatar && (
|
||||||
{({ TransitionProps, placement }) => (
|
<Avatar alt="user" src={user.avatar.url} />
|
||||||
<Grow
|
)
|
||||||
{...TransitionProps}
|
}
|
||||||
style={{
|
classes={{
|
||||||
transformOrigin:
|
avatar: classes.avatar
|
||||||
placement === "bottom"
|
}}
|
||||||
? "right top"
|
className={classes.userChip}
|
||||||
: "right bottom"
|
label={
|
||||||
}}
|
<>
|
||||||
>
|
{user.email}
|
||||||
<Paper>
|
<ArrowDropdown
|
||||||
<ClickAwayListener
|
className={classNames(classes.arrow, {
|
||||||
onClickAway={() => setMenuState(false)}
|
[classes.rotate]: isMenuOpened
|
||||||
mouseEvent="onClick"
|
})}
|
||||||
>
|
/>
|
||||||
<Menu>
|
</>
|
||||||
<MenuItem
|
}
|
||||||
className={classes.userMenuItem}
|
onClick={() => setMenuState(!isMenuOpened)}
|
||||||
onClick={handleViewerProfile}
|
data-test="userMenu"
|
||||||
data-test="accountSettingsButton"
|
/>
|
||||||
>
|
<Popper
|
||||||
<FormattedMessage
|
className={classes.popover}
|
||||||
defaultMessage="Account Settings"
|
open={isMenuOpened}
|
||||||
description="button"
|
anchorEl={anchor.current}
|
||||||
/>
|
transition
|
||||||
</MenuItem>
|
placement="bottom-end"
|
||||||
<MenuItem
|
>
|
||||||
className={classes.userMenuItem}
|
{({ TransitionProps, placement }) => (
|
||||||
onClick={handleLogout}
|
<Grow
|
||||||
data-test="logOutButton"
|
{...TransitionProps}
|
||||||
>
|
style={{
|
||||||
<FormattedMessage
|
transformOrigin:
|
||||||
defaultMessage="Log out"
|
placement === "bottom"
|
||||||
description="button"
|
? "right top"
|
||||||
/>
|
: "right bottom"
|
||||||
</MenuItem>
|
}}
|
||||||
</Menu>
|
>
|
||||||
</ClickAwayListener>
|
<Paper>
|
||||||
</Paper>
|
<ClickAwayListener
|
||||||
</Grow>
|
onClickAway={() => setMenuState(false)}
|
||||||
)}
|
mouseEvent="onClick"
|
||||||
</Popper>
|
>
|
||||||
|
<Menu>
|
||||||
|
<MenuItem
|
||||||
|
className={classes.userMenuItem}
|
||||||
|
onClick={handleViewerProfile}
|
||||||
|
data-test="accountSettingsButton"
|
||||||
|
>
|
||||||
|
<FormattedMessage
|
||||||
|
defaultMessage="Account Settings"
|
||||||
|
description="button"
|
||||||
|
/>
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem
|
||||||
|
className={classes.userMenuItem}
|
||||||
|
onClick={handleLogout}
|
||||||
|
data-test="logOutButton"
|
||||||
|
>
|
||||||
|
<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}>
|
||||||
|
{appState.error
|
||||||
|
? appState.error === "unhandled" && (
|
||||||
|
<ErrorPage onBack={handleErrorBack} />
|
||||||
|
)
|
||||||
|
: children}
|
||||||
|
</main>
|
||||||
</div>
|
</div>
|
||||||
<main className={classes.view}>
|
<div className={classes.appAction} ref={appActionAnchor} />
|
||||||
{appState.error
|
|
||||||
? appState.error === "unhandled" && (
|
|
||||||
<ErrorPage onBack={handleErrorBack} />
|
|
||||||
)
|
|
||||||
: children}
|
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
<div className={classes.appAction} ref={appActionAnchor} />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</AppActionContext.Provider>
|
||||||
</AppActionContext.Provider>
|
</AppHeaderContext.Provider>
|
||||||
</AppHeaderContext.Provider>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -60,8 +60,12 @@ const useStyles = makeStyles(
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
const Navigator: React.FC = () => {
|
export interface NavigatorProps {
|
||||||
const [visible, setVisible] = React.useState(false);
|
visible: boolean;
|
||||||
|
setVisibility: (state: boolean) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Navigator: React.FC<NavigatorProps> = ({ visible, setVisibility }) => {
|
||||||
const input = React.useRef(null);
|
const input = React.useRef(null);
|
||||||
const [query, mode, change, actions] = useQuickSearch(visible, input);
|
const [query, mode, change, actions] = useQuickSearch(visible, input);
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
@ -76,7 +80,7 @@ const Navigator: React.FC = () => {
|
||||||
React.useEffect(() => {
|
React.useEffect(() => {
|
||||||
hotkeys(navigatorHotkey, event => {
|
hotkeys(navigatorHotkey, event => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
setVisible(!visible);
|
setVisibility(!visible);
|
||||||
});
|
});
|
||||||
|
|
||||||
if (cmp(APP_VERSION, "2.1.0") !== 1 && !notifiedAboutNavigator) {
|
if (cmp(APP_VERSION, "2.1.0") !== 1 && !notifiedAboutNavigator) {
|
||||||
|
|
@ -110,7 +114,7 @@ const Navigator: React.FC = () => {
|
||||||
<Modal
|
<Modal
|
||||||
className={classes.modal}
|
className={classes.modal}
|
||||||
open={visible}
|
open={visible}
|
||||||
onClose={() => setVisible(false)}
|
onClose={() => setVisibility(false)}
|
||||||
>
|
>
|
||||||
<Fade appear in={visible} timeout={theme.transitions.duration.short}>
|
<Fade appear in={visible} timeout={theme.transitions.duration.short}>
|
||||||
<div className={classes.root}>
|
<div className={classes.root}>
|
||||||
|
|
@ -122,7 +126,7 @@ const Navigator: React.FC = () => {
|
||||||
onSelect={(item: QuickSearchAction) => {
|
onSelect={(item: QuickSearchAction) => {
|
||||||
const shouldRemainVisible = item.onClick();
|
const shouldRemainVisible = item.onClick();
|
||||||
if (!shouldRemainVisible) {
|
if (!shouldRemainVisible) {
|
||||||
setVisible(false);
|
setVisibility(false);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
onInputValueChange={value =>
|
onInputValueChange={value =>
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,3 @@
|
||||||
import Navigator from "@saleor/components/Navigator";
|
|
||||||
import useAppState from "@saleor/hooks/useAppState";
|
import useAppState from "@saleor/hooks/useAppState";
|
||||||
import { defaultDataIdFromObject, InMemoryCache } from "apollo-cache-inmemory";
|
import { defaultDataIdFromObject, InMemoryCache } from "apollo-cache-inmemory";
|
||||||
import { ApolloClient } from "apollo-client";
|
import { ApolloClient } from "apollo-client";
|
||||||
|
|
@ -139,7 +138,6 @@ const Routes: React.FC = () => {
|
||||||
<WindowTitle title={intl.formatMessage(commonMessages.dashboard)} />
|
<WindowTitle title={intl.formatMessage(commonMessages.dashboard)} />
|
||||||
{isAuthenticated && !tokenAuthLoading && !tokenVerifyLoading ? (
|
{isAuthenticated && !tokenAuthLoading && !tokenVerifyLoading ? (
|
||||||
<AppLayout>
|
<AppLayout>
|
||||||
<Navigator />
|
|
||||||
<ErrorBoundary
|
<ErrorBoundary
|
||||||
onError={() =>
|
onError={() =>
|
||||||
dispatchAppState({
|
dispatchAppState({
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue