From 2711292315bc999aec814707f3db7bfa55d27d68 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 7 Sep 2020 13:28:59 +0200 Subject: [PATCH 01/20] Add menu skeleton --- assets/images/logo-sidebar-light.svg | 5 + assets/images/logo-white.svg | 1 - src/components/AppLayout/AppLayout.tsx | 107 +++--------------- .../SaveButtonBar/SaveButtonBar.tsx | 2 +- src/components/SideBar/ExpandButton.tsx | 0 src/components/SideBar/MenuItem.tsx | 80 +++++++++++++ src/components/SideBar/SideBar.tsx | 105 +++++++++++++++++ src/components/SideBar/SubMenu.tsx | 0 src/components/SideBar/index.ts | 2 + src/components/SideBar/utils.ts | 14 +++ 10 files changed, 223 insertions(+), 93 deletions(-) create mode 100644 assets/images/logo-sidebar-light.svg delete mode 100644 assets/images/logo-white.svg create mode 100644 src/components/SideBar/ExpandButton.tsx create mode 100644 src/components/SideBar/MenuItem.tsx create mode 100644 src/components/SideBar/SideBar.tsx create mode 100644 src/components/SideBar/SubMenu.tsx create mode 100644 src/components/SideBar/index.ts create mode 100644 src/components/SideBar/utils.ts diff --git a/assets/images/logo-sidebar-light.svg b/assets/images/logo-sidebar-light.svg new file mode 100644 index 000000000..6d186cce1 --- /dev/null +++ b/assets/images/logo-sidebar-light.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/images/logo-white.svg b/assets/images/logo-white.svg deleted file mode 100644 index d01d84844..000000000 --- a/assets/images/logo-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index bbfbf4475..5dccbac04 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -30,6 +30,7 @@ import Container from "../Container"; import ErrorPage from "../ErrorPage"; import Navigator from "../Navigator"; import NavigatorButton from "../NavigatorButton/NavigatorButton"; +import SideBar from "../SideBar"; import AppActionContext from "./AppActionContext"; import AppHeaderContext from "./AppHeaderContext"; import { appLoaderHeight, drawerWidth, drawerWidthExpanded } from "./consts"; @@ -52,12 +53,12 @@ const useStyles = makeStyles( }, appLoader: { height: appLoaderHeight, - marginBottom: theme.spacing(2), + marginBottom: theme.spacing(4), zIndex: 1201 }, appLoaderPlaceholder: { height: appLoaderHeight, - marginBottom: theme.spacing(2) + marginBottom: theme.spacing(4) }, arrow: { marginLeft: theme.spacing(2), @@ -70,18 +71,7 @@ const useStyles = makeStyles( } }, content: { - [theme.breakpoints.down("sm")]: { - paddingLeft: 0 - }, - paddingLeft: drawerWidthExpanded, - transition: "padding-left 0.5s ease", - width: "100%" - }, - contentToggle: { - [theme.breakpoints.down("sm")]: { - paddingLeft: 0 - }, - paddingLeft: drawerWidth + flex: 1 }, darkThemeSwitch: { [theme.breakpoints.down("sm")]: { @@ -98,70 +88,6 @@ const useStyles = makeStyles( height: 40, marginBottom: theme.spacing(3) }, - isMenuSmall: { - "& path": { - fill: theme.palette.primary.main - }, - "& span": { - margin: "0 8px" - }, - "& svg": { - marginTop: 8, - transform: "rotate(180deg)" - }, - "&:hover": { - background: "#E6F3F3" - }, - background: theme.palette.background.paper, - border: `solid 1px #EAEAEA`, - borderRadius: "50%", - cursor: "pointer", - height: 32, - position: "absolute", - right: -16, - top: 65, - transition: `background ${theme.transitions.duration.shorter}ms`, - width: 32, - zIndex: 99 - }, - isMenuSmallDark: { - "&:hover": { - background: `linear-gradient(0deg, rgba(25, 195, 190, 0.1), rgba(25, 195, 190, 0.1)), ${theme.palette.background.paper}` - }, - border: `solid 1px #252728`, - transition: `background ${theme.transitions.duration.shorter}ms` - }, - isMenuSmallHide: { - "& svg": { - marginLeft: "3px", - transform: "rotate(0deg)" - } - }, - logo: { - "& svg": { - left: "50%", - position: "absolute", - top: "50%", - transform: "translate(-50%,-50%)" - }, - background: theme.palette.secondary.main, - display: "block", - height: 80, - position: "relative" - }, - logoDark: { - "& path": { - fill: theme.palette.common.white - }, - background: theme.palette.primary.main - }, - logoSmall: { - "& svg": { - margin: 0, - padding: 0, - width: "80px" - } - }, menu: { background: theme.palette.background.paper, height: "100vh", @@ -238,6 +164,7 @@ const useStyles = makeStyles( zIndex: 1 }, root: { + display: "flex", width: `100%` }, rotate: { @@ -286,7 +213,7 @@ const useStyles = makeStyles( } }, viewContainer: { - minHeight: `calc(100vh - ${theme.spacing(2) + appLoaderHeight + 70}px)` + minHeight: `calc(100vh - ${theme.spacing(4) + appLoaderHeight + 120}px)` } }), { @@ -301,7 +228,6 @@ interface AppLayoutProps { const AppLayout: React.FC = ({ children }) => { const classes = useStyles({}); const { isDark, toggleTheme } = useTheme(); - const [isMenuSmall, setMenuSmall] = useLocalStorage("isMenuSmall", false); const [isDrawerOpened, setDrawerState] = React.useState(false); const [isMenuOpened, setMenuState] = React.useState(false); const appActionAnchor = React.useRef(); @@ -344,10 +270,6 @@ const AppLayout: React.FC = ({ children }) => { navigate(url); }; - const handleIsMenuSmall = () => { - setMenuSmall(!isMenuSmall); - }; - const handleErrorBack = () => { navigate("/"); dispatchAppState({ @@ -367,7 +289,7 @@ const AppLayout: React.FC = ({ children }) => {
-
+ {/*
setDrawerState(false)} open={isDrawerOpened} @@ -404,12 +326,15 @@ const AppLayout: React.FC = ({ children }) => { onMenuItemClick={handleMenuItemClick} /> -
-
+
*/} + +
{appState.loading ? ( ) : ( diff --git a/src/components/SaveButtonBar/SaveButtonBar.tsx b/src/components/SaveButtonBar/SaveButtonBar.tsx index adf2bdcdb..681c75e73 100644 --- a/src/components/SaveButtonBar/SaveButtonBar.tsx +++ b/src/components/SaveButtonBar/SaveButtonBar.tsx @@ -79,7 +79,7 @@ export const SaveButtonBar: React.FC = props => { const intl = useIntl(); const scrollPosition = useWindowScroll(); const scrolledToBottom = - scrollPosition.y + window.innerHeight >= document.body.scrollHeight; + scrollPosition.y + window.innerHeight - document.body.scrollHeight >= -5; return ( diff --git a/src/components/SideBar/ExpandButton.tsx b/src/components/SideBar/ExpandButton.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx new file mode 100644 index 000000000..4d1b7454b --- /dev/null +++ b/src/components/SideBar/MenuItem.tsx @@ -0,0 +1,80 @@ +import ClickAwayListener from "@material-ui/core/ClickAwayListener"; +import Paper from "@material-ui/core/Paper"; +import Popper from "@material-ui/core/Popper"; +import { fade } from "@material-ui/core/styles/colorManipulator"; +import makeStyles from "@material-ui/core/styles/makeStyles"; +import React from "react"; + +import { IMenuItem } from "../AppLayout/menuStructure"; + +export interface MenuItemProps { + menuItem: IMenuItem; + onClick: (url: string, event: React.MouseEvent) => void; +} + +const useStyles = makeStyles( + theme => ({ + paper: { + borderRadius: 16, + padding: theme.spacing(3) + }, + popper: { + marginLeft: theme.spacing(3), + zIndex: 2 + } + }), + { + name: "MenuItem" + } +); + +const MenuItem: React.FC = ({ menuItem, onClick }) => { + const classes = useStyles({}); + const [open, setOpen] = React.useState(false); + const anchor = React.useRef(null); + + const handleClick = (event: React.MouseEvent, menuItem: IMenuItem) => { + if (menuItem.children) { + setOpen(true); + } else { + onClick(menuItem.url, event); + setOpen(false); + } + }; + + return ( +
handleClick(event, menuItem)}> + {menuItem.label} + {menuItem.children && ( + + setOpen(false)} + mouseEvent="onClick" + > + + {menuItem.children.map(subMenuItem => ( +
handleClick(event, subMenuItem)} + data-test="select-option" + > + {subMenuItem.label} +
+ ))} + + + + )} +
+ ); +}; + +MenuItem.displayName = "MenuItem"; +export default MenuItem; diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx new file mode 100644 index 000000000..32019b202 --- /dev/null +++ b/src/components/SideBar/SideBar.tsx @@ -0,0 +1,105 @@ +import logoLight from "@assets/images/logo-sidebar-light.svg"; +import makeStyles from "@material-ui/core/styles/makeStyles"; +import { + configurationMenuUrl, + createConfigurationMenu +} from "@saleor/configuration"; +import { User } from "@saleor/fragments/types/User"; +import useLocalStorage from "@saleor/hooks/useLocalStorage"; +import { sectionNames } from "@saleor/intl"; +import classNames from "classnames"; +import React from "react"; +import SVG from "react-inlinesvg"; +import { useIntl } from "react-intl"; + +import { IMenuItem } from "../AppLayout/menuStructure"; +import MenuItem from "./MenuItem"; +import { isMenuActive } from "./utils"; + +const useStyles = makeStyles( + theme => ({ + logo: { + margin: "36px 0 0 19px" + }, + root: { + transition: "width 0.5s ease", + width: 210 + }, + shrunk: { + "&$root": { + width: 72 + } + } + }), + { + name: "SideBar" + } +); + +export interface SideBarProps { + className?: string; + menuItems: IMenuItem[]; + location: string; + user: User; + renderConfigure: boolean; + onMenuItemClick: (url: string, event: React.MouseEvent) => void; +} + +export interface IActiveSubMenu { + isActive: boolean; + label: string | null; +} + +const SideBar: React.FC = ({ + location, + menuItems, + renderConfigure, + user, + onMenuItemClick +}) => { + const classes = useStyles({}); + const [isShrunk, setShrink] = useLocalStorage("isMenuSmall", false); + const intl = useIntl(); + + return ( +
+
+ +
+ {menuItems.map(menuItem => { + // const isActive = isMenuActive(location, menuItem); + + if ( + menuItem.permission && + !user.userPermissions + .map(perm => perm.code) + .includes(menuItem.permission) + ) { + return null; + } + + return ; + })} + {renderConfigure && ( + + )} + +
+ ); +}; + +SideBar.displayName = "SideBar"; +export default SideBar; diff --git a/src/components/SideBar/SubMenu.tsx b/src/components/SideBar/SubMenu.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/SideBar/index.ts b/src/components/SideBar/index.ts new file mode 100644 index 000000000..df08bddc7 --- /dev/null +++ b/src/components/SideBar/index.ts @@ -0,0 +1,2 @@ +export * from "./SideBar"; +export { default } from "./SideBar"; diff --git a/src/components/SideBar/utils.ts b/src/components/SideBar/utils.ts new file mode 100644 index 000000000..bd894f877 --- /dev/null +++ b/src/components/SideBar/utils.ts @@ -0,0 +1,14 @@ +import { orderDraftListUrl, orderListUrl } from "@saleor/orders/urls"; +import { matchPath } from "react-router"; + +import { IMenuItem } from "../AppLayout/menuStructure"; + +export function isMenuActive(location: string, menuItem: IMenuItem) { + return location.split("?")[0] === orderDraftListUrl().split("?")[0] && + menuItem.url.split("?")[0] === orderListUrl().split("?")[0] + ? false + : !!matchPath(location.split("?")[0], { + exact: menuItem.url.split("?")[0] === "/", + path: menuItem.url.split("?")[0] + }); +} From 7f8ea0f25443a4dd1b74baf88746e162472c246b Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 7 Sep 2020 15:38:44 +0200 Subject: [PATCH 02/20] Update icons --- assets/images/menu-apps-icon.svg | 4 ++-- assets/images/menu-catalog-icon.svg | 4 ++-- assets/images/menu-configure-icon.svg | 4 ++-- assets/images/menu-customers-icon.svg | 4 ++-- assets/images/menu-discounts-icon.svg | 4 ++-- assets/images/menu-home-icon.svg | 4 ++-- assets/images/menu-orders-icon.svg | 4 ++-- assets/images/menu-translation-icon.svg | 4 ++-- 8 files changed, 16 insertions(+), 16 deletions(-) diff --git a/assets/images/menu-apps-icon.svg b/assets/images/menu-apps-icon.svg index 3033691d1..85d36954a 100644 --- a/assets/images/menu-apps-icon.svg +++ b/assets/images/menu-apps-icon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/images/menu-catalog-icon.svg b/assets/images/menu-catalog-icon.svg index 6b67b5aac..159804b6d 100644 --- a/assets/images/menu-catalog-icon.svg +++ b/assets/images/menu-catalog-icon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/images/menu-configure-icon.svg b/assets/images/menu-configure-icon.svg index c1defe727..7a435af97 100644 --- a/assets/images/menu-configure-icon.svg +++ b/assets/images/menu-configure-icon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/images/menu-customers-icon.svg b/assets/images/menu-customers-icon.svg index b46a2fc1e..989bc7b0d 100644 --- a/assets/images/menu-customers-icon.svg +++ b/assets/images/menu-customers-icon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/images/menu-discounts-icon.svg b/assets/images/menu-discounts-icon.svg index 6f15dce79..30ca87a8e 100644 --- a/assets/images/menu-discounts-icon.svg +++ b/assets/images/menu-discounts-icon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/images/menu-home-icon.svg b/assets/images/menu-home-icon.svg index f91bd00a1..2c90eedf3 100644 --- a/assets/images/menu-home-icon.svg +++ b/assets/images/menu-home-icon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/images/menu-orders-icon.svg b/assets/images/menu-orders-icon.svg index 1e97d098d..74603fe7a 100644 --- a/assets/images/menu-orders-icon.svg +++ b/assets/images/menu-orders-icon.svg @@ -1,3 +1,3 @@ - - + + diff --git a/assets/images/menu-translation-icon.svg b/assets/images/menu-translation-icon.svg index 7d034dd68..e869dedd1 100644 --- a/assets/images/menu-translation-icon.svg +++ b/assets/images/menu-translation-icon.svg @@ -1,3 +1,3 @@ - - + + From c1c571359217d726fadf98276652a5760fa85d9e Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 7 Sep 2020 16:34:13 +0200 Subject: [PATCH 03/20] Add styles to menu --- src/components/AppLayout/AppLayout.tsx | 1 - src/components/SideBar/MenuItem.tsx | 100 +++++++++++++++++++++++-- src/components/SideBar/SideBar.tsx | 43 +++++------ src/components/SideBar/utils.ts | 7 ++ src/intl.ts | 2 +- 5 files changed, 123 insertions(+), 30 deletions(-) diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 5dccbac04..bb41391f9 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -203,7 +203,6 @@ const useStyles = makeStyles( textAlign: "right" }, view: { - backgroundColor: theme.palette.background.default, flex: 1, flexGrow: 1, marginLeft: 0, diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx index 4d1b7454b..73a1f9ccb 100644 --- a/src/components/SideBar/MenuItem.tsx +++ b/src/components/SideBar/MenuItem.tsx @@ -1,26 +1,87 @@ import ClickAwayListener from "@material-ui/core/ClickAwayListener"; import Paper from "@material-ui/core/Paper"; import Popper from "@material-ui/core/Popper"; -import { fade } from "@material-ui/core/styles/colorManipulator"; import makeStyles from "@material-ui/core/styles/makeStyles"; +import Typography from "@material-ui/core/Typography"; +import classNames from "classnames"; import React from "react"; +import SVG from "react-inlinesvg"; import { IMenuItem } from "../AppLayout/menuStructure"; export interface MenuItemProps { + active: boolean; + isMenuShrunk: boolean; menuItem: IMenuItem; onClick: (url: string, event: React.MouseEvent) => void; } const useStyles = makeStyles( theme => ({ + hideLabel: { + "&$label": { + opacity: 0 + } + }, + icon: { + "& svg": { + height: 24, + width: 24 + }, + marginRight: theme.spacing(1.5), + transition: theme.transitions.duration.shortest + "ms" + }, + label: { + cursor: "pointer", + fontSize: 16, + fontWeight: "bold", + opacity: 1, + transition: theme.transitions.duration.shortest + "ms" + }, paper: { borderRadius: 16, + cursor: "default", padding: theme.spacing(3) }, popper: { marginLeft: theme.spacing(3), zIndex: 2 + }, + root: { + "&:hover": { + color: theme.palette.primary.main + }, + borderBottomRightRadius: 100, + borderTopRightRadius: 100, + color: theme.palette.text.disabled, + cursor: "pointer", + display: "flex", + height: 56, + marginBottom: theme.spacing(), + overflow: "hidden", + padding: theme.spacing(2, 3), + transition: theme.transitions.duration.shortest + "ms", + width: 72 + }, + rootActive: { + "&$root": { + background: theme.palette.background.paper, + boxShadow: `9px 9px 20px 0 ${theme.palette.grey[300]}`, + color: theme.palette.primary.main + } + }, + rootExpanded: { + width: 210 + }, + subMenuLabel: { + "&$label": { + "&:not(:last-child)": { + marginBottom: theme.spacing(2) + } + }, + "&:hover": { + color: theme.palette.primary.main + } } }), { @@ -28,7 +89,12 @@ const useStyles = makeStyles( } ); -const MenuItem: React.FC = ({ menuItem, onClick }) => { +const MenuItem: React.FC = ({ + active, + menuItem, + isMenuShrunk, + onClick +}) => { const classes = useStyles({}); const [open, setOpen] = React.useState(false); const anchor = React.useRef(null); @@ -43,8 +109,25 @@ const MenuItem: React.FC = ({ menuItem, onClick }) => { }; return ( -
handleClick(event, menuItem)}> - {menuItem.label} +
handleClick(event, menuItem)} + > + {menuItem.icon && } + + {menuItem.label} + {menuItem.children && ( = ({ menuItem, onClick }) => { > {menuItem.children.map(subMenuItem => ( -
handleClick(event, subMenuItem)} - data-test="select-option" + data-test="submenu-item-label" + data-test-id={subMenuItem.testingContextId} + variant="body2" > {subMenuItem.label} -
+ ))} diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx index 32019b202..b298b4a35 100644 --- a/src/components/SideBar/SideBar.tsx +++ b/src/components/SideBar/SideBar.tsx @@ -1,13 +1,10 @@ import logoLight from "@assets/images/logo-sidebar-light.svg"; +import configurationIcon from "@assets/images/menu-configure-icon.svg"; import makeStyles from "@material-ui/core/styles/makeStyles"; -import { - configurationMenuUrl, - createConfigurationMenu -} from "@saleor/configuration"; +import { configurationMenuUrl } from "@saleor/configuration"; import { User } from "@saleor/fragments/types/User"; import useLocalStorage from "@saleor/hooks/useLocalStorage"; import { sectionNames } from "@saleor/intl"; -import classNames from "classnames"; import React from "react"; import SVG from "react-inlinesvg"; import { useIntl } from "react-intl"; @@ -19,16 +16,10 @@ import { isMenuActive } from "./utils"; const useStyles = makeStyles( theme => ({ logo: { - margin: "36px 0 0 19px" + margin: `36px 0 ${theme.spacing(3)}px 19px` }, root: { - transition: "width 0.5s ease", - width: 210 - }, - shrunk: { - "&$root": { - width: 72 - } + transition: "width 0.5s ease" } }), { @@ -62,16 +53,12 @@ const SideBar: React.FC = ({ const intl = useIntl(); return ( -
+
{menuItems.map(menuItem => { - // const isActive = isMenuActive(location, menuItem); + const isActive = isMenuActive(location, menuItem); if ( menuItem.permission && @@ -82,13 +69,27 @@ const SideBar: React.FC = ({ return null; } - return ; + return ( + + ); })} {renderConfigure && ( acc || isMenuActive(location, menuItem), + false + ) + } + isMenuShrunk={isShrunk} menuItem={{ ariaLabel: "configure", - icon: null, + icon: configurationIcon, label: intl.formatMessage(sectionNames.configuration), testingContextId: "configure", url: configurationMenuUrl diff --git a/src/components/SideBar/utils.ts b/src/components/SideBar/utils.ts index bd894f877..5f9856778 100644 --- a/src/components/SideBar/utils.ts +++ b/src/components/SideBar/utils.ts @@ -4,6 +4,13 @@ import { matchPath } from "react-router"; import { IMenuItem } from "../AppLayout/menuStructure"; export function isMenuActive(location: string, menuItem: IMenuItem) { + if (menuItem.children) { + return menuItem.children.reduce( + (acc, subMenuItem) => acc || isMenuActive(location, subMenuItem), + false + ); + } + return location.split("?")[0] === orderDraftListUrl().split("?")[0] && menuItem.url.split("?")[0] === orderListUrl().split("?")[0] ? false diff --git a/src/intl.ts b/src/intl.ts index 1b8042ec8..fa27aa818 100644 --- a/src/intl.ts +++ b/src/intl.ts @@ -196,7 +196,7 @@ export const sectionNames = defineMessages({ description: "draft orders section name" }, home: { - defaultMessage: "Home", + defaultMessage: "Dashboard", description: "home section name" }, navigation: { From da16d8a087bf5b5fb3b2971dcefbd5afcb5a9a9b Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 7 Sep 2020 16:37:58 +0200 Subject: [PATCH 04/20] Remove unused style --- src/components/AppLayout/AppLayout.tsx | 55 +------------------------- 1 file changed, 1 insertion(+), 54 deletions(-) diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index bb41391f9..5358c451a 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -1,11 +1,7 @@ -import saleorDarkLogoSmall from "@assets/images/logo-dark-small.svg"; -import saleorDarkLogo from "@assets/images/logo-dark.svg"; -import menuArrowIcon from "@assets/images/menu-arrow-icon.svg"; import Avatar from "@material-ui/core/Avatar"; import Chip from "@material-ui/core/Chip"; import ClickAwayListener from "@material-ui/core/ClickAwayListener"; import Grow from "@material-ui/core/Grow"; -import Hidden from "@material-ui/core/Hidden"; import LinearProgress from "@material-ui/core/LinearProgress"; import MenuItem from "@material-ui/core/MenuItem"; import Menu from "@material-ui/core/MenuList"; @@ -14,7 +10,6 @@ import Popper from "@material-ui/core/Popper"; import { makeStyles } from "@material-ui/core/styles"; import { createConfigurationMenu } from "@saleor/configuration"; import useAppState from "@saleor/hooks/useAppState"; -import useLocalStorage from "@saleor/hooks/useLocalStorage"; import useNavigator from "@saleor/hooks/useNavigator"; import useTheme from "@saleor/hooks/useTheme"; import useUser from "@saleor/hooks/useUser"; @@ -22,7 +17,6 @@ import ArrowDropdown from "@saleor/icons/ArrowDropdown"; import { staffMemberDetailsUrl } from "@saleor/staff/urls"; import classNames from "classnames"; import React from "react"; -import SVG from "react-inlinesvg"; import { FormattedMessage, useIntl } from "react-intl"; import useRouter from "use-react-router"; @@ -33,10 +27,8 @@ import NavigatorButton from "../NavigatorButton/NavigatorButton"; import SideBar from "../SideBar"; import AppActionContext from "./AppActionContext"; import AppHeaderContext from "./AppHeaderContext"; -import { appLoaderHeight, drawerWidth, drawerWidthExpanded } from "./consts"; -import MenuList from "./MenuList"; +import { appLoaderHeight } from "./consts"; import createMenuStructure from "./menuStructure"; -import ResponsiveDrawer from "./ResponsiveDrawer"; import ThemeSwitch from "./ThemeSwitch"; const useStyles = makeStyles( @@ -170,13 +162,6 @@ const useStyles = makeStyles( rotate: { transform: "rotate(180deg)" }, - sideBar: { - [theme.breakpoints.down("sm")]: { - padding: 0 - }, - background: theme.palette.background.paper, - padding: `0 ${theme.spacing(4)}px` - }, spacer: { flex: 1 }, @@ -288,44 +273,6 @@ const AppLayout: React.FC = ({ children }) => {
- {/*
- setDrawerState(false)} - open={isDrawerOpened} - small={!isMenuSmall} - > -
- -
- -
- -
- - - -
*/} Date: Mon, 7 Sep 2020 17:13:31 +0200 Subject: [PATCH 05/20] Add styles to expand button --- src/components/SideBar/ExpandButton.tsx | 56 +++++++++++++++++++++++++ src/components/SideBar/MenuItem.tsx | 2 +- src/components/SideBar/SideBar.tsx | 12 +++++- 3 files changed, 67 insertions(+), 3 deletions(-) diff --git a/src/components/SideBar/ExpandButton.tsx b/src/components/SideBar/ExpandButton.tsx index e69de29bb..9a9550537 100644 --- a/src/components/SideBar/ExpandButton.tsx +++ b/src/components/SideBar/ExpandButton.tsx @@ -0,0 +1,56 @@ +import { ButtonProps } from "@material-ui/core/Button"; +import ButtonBase from "@material-ui/core/ButtonBase"; +import makeStyles from "@material-ui/core/styles/makeStyles"; +import ArrowIcon from "@material-ui/icons/ArrowBack"; +import classNames from "classnames"; +import React from "react"; + +const useStyles = makeStyles( + theme => ({ + arrow: { + transition: theme.transitions.duration.shortest + "ms" + }, + root: { + "&:hover, &:focus": { + background: "#daedeb" + }, + background: theme.palette.background.paper, + borderRadius: 16, + color: theme.palette.primary.main, + height: 48, + transition: theme.transitions.duration.shortest + "ms", + width: 48 + }, + shrunk: { + transform: "scaleX(-1)" + } + }), + { + name: "ExpandButton" + } +); + +export interface ExpandButtonProps extends ButtonProps { + isShrunk: boolean; +} + +const ExpandButton: React.FC = ({ + className, + isShrunk, + ...rest +}) => { + const classes = useStyles({}); + + return ( + + + + ); +}; + +ExpandButton.displayName = "ExpandButton"; +export default ExpandButton; diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx index 73a1f9ccb..7a583a7e9 100644 --- a/src/components/SideBar/MenuItem.tsx +++ b/src/components/SideBar/MenuItem.tsx @@ -59,7 +59,7 @@ const useStyles = makeStyles( height: 56, marginBottom: theme.spacing(), overflow: "hidden", - padding: theme.spacing(2, 3), + padding: theme.spacing(2, 3, 2, 3.5), transition: theme.transitions.duration.shortest + "ms", width: 72 }, diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx index b298b4a35..6b558d6f4 100644 --- a/src/components/SideBar/SideBar.tsx +++ b/src/components/SideBar/SideBar.tsx @@ -10,13 +10,17 @@ import SVG from "react-inlinesvg"; import { useIntl } from "react-intl"; import { IMenuItem } from "../AppLayout/menuStructure"; +import ExpandButton from "./ExpandButton"; import MenuItem from "./MenuItem"; import { isMenuActive } from "./utils"; const useStyles = makeStyles( theme => ({ + expandButton: { + marginLeft: theme.spacing(2) + }, logo: { - margin: `36px 0 ${theme.spacing(3)}px 19px` + margin: `36px 0 ${theme.spacing(3)}px ${theme.spacing(3)}px` }, root: { transition: "width 0.5s ease" @@ -97,7 +101,11 @@ const SideBar: React.FC = ({ onClick={onMenuItemClick} /> )} - + setShrink(!isShrunk)} + />
); }; From 97c3d06241c01c7f727cc673b9871b793ae95d87 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 7 Sep 2020 17:36:55 +0200 Subject: [PATCH 06/20] Improve accessibility --- src/components/SideBar/MenuItem.tsx | 31 ++++++++++++++++++++--------- 1 file changed, 22 insertions(+), 9 deletions(-) diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx index 7a583a7e9..761115e96 100644 --- a/src/components/SideBar/MenuItem.tsx +++ b/src/components/SideBar/MenuItem.tsx @@ -33,6 +33,7 @@ const useStyles = makeStyles( }, label: { cursor: "pointer", + display: "block", fontSize: 16, fontWeight: "bold", opacity: 1, @@ -41,16 +42,20 @@ const useStyles = makeStyles( paper: { borderRadius: 16, cursor: "default", - padding: theme.spacing(3) + padding: theme.spacing(3), + textAlign: "left" }, popper: { marginLeft: theme.spacing(3), zIndex: 2 }, root: { - "&:hover": { - color: theme.palette.primary.main + "&:hover, &:focus": { + color: theme.palette.primary.main, + outline: 0 }, + background: "none", + border: "none", borderBottomRightRadius: 100, borderTopRightRadius: 100, color: theme.palette.text.disabled, @@ -79,9 +84,11 @@ const useStyles = makeStyles( marginBottom: theme.spacing(2) } }, - "&:hover": { + "&:hover, &:focus": { color: theme.palette.primary.main - } + }, + background: "none", + border: "none" } }), { @@ -97,7 +104,7 @@ const MenuItem: React.FC = ({ }) => { const classes = useStyles({}); const [open, setOpen] = React.useState(false); - const anchor = React.useRef(null); + const anchor = React.useRef(null); const handleClick = (event: React.MouseEvent, menuItem: IMenuItem) => { if (menuItem.children) { @@ -109,7 +116,7 @@ const MenuItem: React.FC = ({ }; return ( -
= ({ > {menuItem.icon && } = ({ {menuItem.children.map(subMenuItem => ( handleClick(event, subMenuItem)} + onClick={event => { + event.preventDefault(); + handleClick(event, subMenuItem); + }} data-test="submenu-item-label" data-test-id={subMenuItem.testingContextId} variant="body2" @@ -158,7 +171,7 @@ const MenuItem: React.FC = ({ )} -
+ ); }; From ac0e8f03fc1d5db2c34f46400d8c73a6cca2e128 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 7 Sep 2020 17:55:44 +0200 Subject: [PATCH 07/20] Remove obsolete files --- src/components/AppLayout/MenuList.tsx | 369 ------------------ src/components/AppLayout/MenuNested.tsx | 194 --------- src/components/AppLayout/ResponsiveDrawer.tsx | 74 ---- 3 files changed, 637 deletions(-) delete mode 100644 src/components/AppLayout/MenuList.tsx delete mode 100644 src/components/AppLayout/MenuNested.tsx delete mode 100644 src/components/AppLayout/ResponsiveDrawer.tsx diff --git a/src/components/AppLayout/MenuList.tsx b/src/components/AppLayout/MenuList.tsx deleted file mode 100644 index 05f6fa971..000000000 --- a/src/components/AppLayout/MenuList.tsx +++ /dev/null @@ -1,369 +0,0 @@ -import configureIcon from "@assets/images/menu-configure-icon.svg"; -import { makeStyles } from "@material-ui/core/styles"; -import Typography from "@material-ui/core/Typography"; -import { User } from "@saleor/fragments/types/User"; -import useTheme from "@saleor/hooks/useTheme"; -import { sectionNames } from "@saleor/intl"; -import classNames from "classnames"; -import React from "react"; -import SVG from "react-inlinesvg"; -import { FormattedMessage, useIntl } from "react-intl"; -import { matchPath } from "react-router"; - -import { - configurationMenuUrl, - createConfigurationMenu -} from "../../configuration"; -import { createHref } from "../../misc"; -import { orderDraftListUrl, orderListUrl } from "../../orders/urls"; -import MenuNested from "./MenuNested"; -import { IMenuItem } from "./menuStructure"; - -const useStyles = makeStyles( - theme => ({ - menuIcon: { - "& svg": { - height: 32, - width: 32 - }, - display: "inline-block", - position: "relative", - top: 8 - }, - menuIconDark: { - "& path": { - fill: theme.palette.common.white - } - }, - menuIconSmall: { - left: -5 - }, - menuIsActive: { - boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)" - }, - menuItemHover: { - "& p": { - fontSize: 14, - transition: "color 0.5s ease, opacity 0.3s ease-out" - }, - "& path": { - transition: "fill 0.5s ease" - }, - "&:hover": { - "& p": { - color: theme.palette.primary.main - }, - "& path": { - fill: theme.palette.primary.main - }, - "&:before": { - borderLeft: `solid 2px ${theme.palette.primary.main}`, - content: "''", - height: 33, - left: -20, - position: "absolute", - top: 8 - }, - color: theme.palette.primary.main - }, - cursor: "pointer", - position: "relative" - }, - menuList: { - display: "flex", - flexDirection: "column", - height: "100%", - marginLeft: theme.spacing(4), - marginTop: theme.spacing(2), - paddingBottom: theme.spacing(3) - }, - menuListItem: { - alignItems: "center", - display: "block", - marginBottom: theme.spacing(5), - paddingLeft: 0, - textDecoration: "none", - transition: theme.transitions.duration.standard + "ms" - }, - menuListItemActive: { - "& $menuListItemText": { - color: theme.palette.primary.main - }, - "& path": { - color: theme.palette.primary.main, - fill: theme.palette.primary.main - } - }, - menuListItemOpen: { - "&:after": { - borderBottom: `10px solid transparent`, - borderLeft: `10px solid ${theme.palette.background.paper}`, - borderTop: `10px solid transparent`, - content: "''", - height: 0, - position: "absolute", - right: -30, - top: 15, - width: 0 - }, - "&:before": { - borderLeft: `solid 2px ${theme.palette.primary.main}`, - content: "''", - height: 33, - left: -20, - position: "absolute", - top: 8 - }, - position: "relative" - }, - menuListItemText: { - "&:hover": { - color: theme.palette.primary.main - }, - bottom: 0, - cursor: "pointer", - fontSize: "1rem", - fontWeight: 500, - left: 30, - opacity: 1, - paddingLeft: 16, - position: "absolute", - textTransform: "uppercase", - transition: "opacity 0.5s ease" - }, - menuListItemTextHide: { - bottom: 0, - left: 30, - opacity: 0, - position: "absolute" - }, - subMenu: { - padding: "0 15px" - }, - subMenuDrawer: { - background: "#000", - cursor: "pointer", - height: "100vh", - left: 0, - opacity: 0.2, - position: "absolute", - top: 0, - width: 0, - zIndex: -2 - }, - subMenuDrawerOpen: { - width: `100vw` - } - }), - { name: "MenuList" } -); - -interface MenuListProps { - className?: string; - menuItems: IMenuItem[]; - isMenuSmall: boolean; - location: string; - user: User; - renderConfigure: boolean; - onMenuItemClick: (url: string, event: React.MouseEvent) => void; -} - -export interface IActiveSubMenu { - isActive: boolean; - label: string | null; -} - -const MenuList: React.FC = props => { - const { - className, - menuItems, - isMenuSmall, - location, - user, - renderConfigure, - onMenuItemClick - } = props; - - const classes = useStyles(props); - - const { isDark } = useTheme(); - const [activeSubMenu, setActiveSubMenu] = React.useState({ - isActive: false, - label: null - }); - const intl = useIntl(); - - const configurationMenu = createConfigurationMenu(intl).map(menu => { - menu.menuItems.map(item => - user.userPermissions.map(perm => perm.code).includes(item.permission) - ); - }); - - const handleSubMenu = itemLabel => { - setActiveSubMenu({ - isActive: - itemLabel === activeSubMenu.label ? !activeSubMenu.isActive : true, - label: itemLabel - }); - }; - - const closeSubMenu = (menuItemUrl, event) => { - setActiveSubMenu({ - isActive: false, - label: null - }); - if (menuItemUrl && event) { - onMenuItemClick(menuItemUrl, event); - event.stopPropagation(); - event.preventDefault(); - } - }; - - return ( -
- {/* FIXME: this .split("?")[0] looks gross */} - {menuItems.map(menuItem => { - const isActive = (menuItem: IMenuItem) => - location.split("?")[0] === orderDraftListUrl().split("?")[0] && - menuItem.url.split("?")[0] === orderListUrl().split("?")[0] - ? false - : !!matchPath(location.split("?")[0], { - exact: menuItem.url.split("?")[0] === "/", - path: menuItem.url.split("?")[0] - }); - - if ( - menuItem.permission && - !user.userPermissions - .map(perm => perm.code) - .includes(menuItem.permission) - ) { - return null; - } - - if (!menuItem.url) { - const isAnyChildActive = menuItem.children.reduce( - (acc, child) => acc || isActive(child), - false - ); - - return ( -
-
handleSubMenu(menuItem.ariaLabel)} - > - - - {menuItem.label} - -
- -
closeSubMenu(null, event)} - className={classNames(classes.subMenuDrawer, { - [classes.subMenuDrawerOpen]: activeSubMenu.isActive - })} - /> -
- ); - } - - return ( - closeSubMenu(menuItem.url, event)} - key={menuItem.label} - data-testid={menuItem.testingContextId} - data-test="menuItemEntry" - > -
- - - {menuItem.label} - -
- - ); - })} - {renderConfigure && configurationMenu.length > 0 && ( - closeSubMenu(configurationMenuUrl, event)} - > -
- - - - -
- - )} -
- ); -}; - -MenuList.displayName = "MenuList"; -export default MenuList; diff --git a/src/components/AppLayout/MenuNested.tsx b/src/components/AppLayout/MenuNested.tsx deleted file mode 100644 index 0a64b1892..000000000 --- a/src/components/AppLayout/MenuNested.tsx +++ /dev/null @@ -1,194 +0,0 @@ -import menuArrowIcon from "@assets/images/menu-arrow-icon.svg"; -import Hidden from "@material-ui/core/Hidden"; -import { makeStyles } from "@material-ui/core/styles"; -import Typography from "@material-ui/core/Typography"; -import useTheme from "@saleor/hooks/useTheme"; -import { createHref } from "@saleor/misc"; -import classNames from "classnames"; -import React from "react"; -import SVG from "react-inlinesvg"; - -import { drawerNestedMenuWidth, drawerWidthExpandedMobile } from "./consts"; -import { IActiveSubMenu } from "./MenuList"; -import { IMenuItem } from "./menuStructure"; - -const useStyles = makeStyles( - theme => ({ - menuListNested: { - background: theme.palette.background.paper, - height: "100vh", - position: "absolute", - right: 0, - top: 0, - transition: `right ${theme.transitions.duration.shorter}ms ease`, - width: drawerNestedMenuWidth, - zIndex: -1 - }, - menuListNestedClose: { - "& svg": { - fill: theme.palette.primary.main, - left: 11, - position: "relative", - top: 1 - }, - border: `solid 1px #EAEAEA`, - borderRadius: "100%", - cursor: "pointer", - height: 32, - position: "absolute", - right: 32, - top: 35, - transform: "rotate(180deg)", - width: 32 - }, - menuListNestedCloseDark: { - border: `solid 1px #252728` - }, - menuListNestedHide: { - opacity: 0 - }, - menuListNestedIcon: { - "& path": { - fill: "initial" - }, - "& svg": { height: 32, position: "relative", top: 7, width: 32 } - }, - menuListNestedIconDark: { - "& path": { - fill: theme.palette.common.white - } - }, - menuListNestedItem: { - "&:hover": { - "& p": { - color: theme.palette.primary.main - } - }, - display: "block", - marginBottom: theme.spacing(2), - padding: "0px 30px", - textDecoration: "none" - }, - menuListNestedOpen: { - [theme.breakpoints.down("sm")]: { - right: 0, - width: drawerWidthExpandedMobile, - zIndex: 2 - }, - right: -drawerNestedMenuWidth, - width: drawerNestedMenuWidth, - zIndex: -1 - }, - subHeader: { - borderBottom: "solid 1px #EAEAEA", - margin: "30px", - marginBottom: 39, - paddingBottom: 22 - }, - subHeaderDark: { - borderBottom: "solid 1px #252728" - }, - subHeaderTitle: { - [theme.breakpoints.up("md")]: { - paddingLeft: 0 - }, - display: "inline", - paddingLeft: 10 - } - }), - { name: "MenuNested" } -); - -export interface MenuNestedProps { - activeItem: IActiveSubMenu; - ariaLabel: string; - closeSubMenu: ({ isActive, label }: IActiveSubMenu) => void; - icon: string; - menuItem: IMenuItem; - title: string; - handleSubMenu: (itemLabel: string) => void; - onMenuItemClick: (url: string, event: React.MouseEvent) => void; -} - -const MenuNested: React.FC = props => { - const { - activeItem, - ariaLabel, - - closeSubMenu, - icon, - menuItem, - onMenuItemClick, - title - } = props; - const classes = useStyles(props); - - const menuItems = menuItem.children; - const { isDark } = useTheme(); - const closeMenu = (menuItemUrl, event) => { - onMenuItemClick(menuItemUrl, event); - closeSubMenu({ - isActive: false, - label: null - }); - event.stopPropagation(); - event.preventDefault(); - }; - return ( - <> -
- - - - -
{title}
- -
- closeSubMenu({ - isActive: false, - label: null - }) - } - > - -
- - - {menuItems.map(item => ( - closeMenu(item.url, event)} - key={item.label} - > - {item.label} - - ))} -
- - ); -}; - -MenuNested.displayName = "MenuNested"; -export default MenuNested; diff --git a/src/components/AppLayout/ResponsiveDrawer.tsx b/src/components/AppLayout/ResponsiveDrawer.tsx deleted file mode 100644 index 49baa1e7f..000000000 --- a/src/components/AppLayout/ResponsiveDrawer.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import Drawer from "@material-ui/core/Drawer"; -import Hidden from "@material-ui/core/Hidden"; -import { makeStyles } from "@material-ui/core/styles"; -import React from "react"; - -import { - drawerWidth, - drawerWidthExpanded, - drawerWidthExpandedMobile -} from "./consts"; - -const useStyles = makeStyles( - theme => ({ - drawerDesktop: { - backgroundColor: theme.palette.background.paper, - border: "none", - height: "100vh", - overflow: "visible", - padding: 0, - position: "fixed" as "fixed", - transition: "width 0.3s ease", - width: drawerWidthExpanded - }, - drawerDesktopSmall: { - overflow: "visible", - transition: "width 0.2s ease", - width: drawerWidth - }, - drawerMobile: { - width: drawerWidthExpandedMobile - } - }), - { name: "ResponsiveDrawer" } -); - -interface ResponsiveDrawerProps { - children?: React.ReactNode; - open: boolean; - small: boolean; - onClose?(); -} - -const ResponsiveDrawer: React.FC = props => { - const { children, onClose, open, small } = props; - - const classes = useStyles(props); - - return ( - <> - - - {children} - - - - - {children} - - - - ); -}; -export default ResponsiveDrawer; From 39425b9f360226c8ac5f25cedb0d3ee3ff872f31 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 7 Sep 2020 17:57:09 +0200 Subject: [PATCH 08/20] Update changelog and messages --- CHANGELOG.md | 1 + locale/defaultMessages.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1f0b762f9..ee6a76da0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -38,6 +38,7 @@ All notable, unreleased changes to this project will be documented in this file. - Add lazyload to locales - #692 by @eaglesemanation - Fix not closed address update modal with two confirmations - #699 by @orzechdev - Update schema with PositiveDecimal type - #695 by @AlicjaSzu +- Restyle side menu - #697 by @dominik-zeglen ## 2.10.1 diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 7ec4f91d5..88ea9ae01 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -2719,7 +2719,7 @@ }, "src_dot_home": { "context": "home section name", - "string": "Home" + "string": "Dashboard" }, "src_dot_home_dot_components_dot_HomeActivityCard_dot_draft": { "string": "Order #{orderId} was placed from draft by {userEmail}" From da0677ca42c408d96fcf8b0a6bb61883b46fdc3e Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Mon, 7 Sep 2020 17:58:29 +0200 Subject: [PATCH 09/20] Fix submenu text color --- src/components/SideBar/MenuItem.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx index 761115e96..4b963a4d5 100644 --- a/src/components/SideBar/MenuItem.tsx +++ b/src/components/SideBar/MenuItem.tsx @@ -88,7 +88,8 @@ const useStyles = makeStyles( color: theme.palette.primary.main }, background: "none", - border: "none" + border: "none", + color: theme.palette.text.disabled } }), { From e8a69cd9fcdb3c7bd0a3b6657ad1f13df08f2aac Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Tue, 8 Sep 2020 11:43:05 +0200 Subject: [PATCH 10/20] Fix sidebar positiion --- src/components/SideBar/MenuItem.tsx | 12 ++-- src/components/SideBar/SideBar.tsx | 102 ++++++++++++++++------------ 2 files changed, 66 insertions(+), 48 deletions(-) diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx index 4b963a4d5..c7c728e76 100644 --- a/src/components/SideBar/MenuItem.tsx +++ b/src/components/SideBar/MenuItem.tsx @@ -1,6 +1,7 @@ import ClickAwayListener from "@material-ui/core/ClickAwayListener"; import Paper from "@material-ui/core/Paper"; import Popper from "@material-ui/core/Popper"; +import { fade } from "@material-ui/core/styles/colorManipulator"; import makeStyles from "@material-ui/core/styles/makeStyles"; import Typography from "@material-ui/core/Typography"; import classNames from "classnames"; @@ -16,6 +17,9 @@ export interface MenuItemProps { onClick: (url: string, event: React.MouseEvent) => void; } +export const menuWidth = 210; +export const shrunkMenuWidth = 72; + const useStyles = makeStyles( theme => ({ hideLabel: { @@ -58,7 +62,7 @@ const useStyles = makeStyles( border: "none", borderBottomRightRadius: 100, borderTopRightRadius: 100, - color: theme.palette.text.disabled, + color: fade(theme.palette.text.primary, 0.6), cursor: "pointer", display: "flex", height: 56, @@ -66,7 +70,7 @@ const useStyles = makeStyles( overflow: "hidden", padding: theme.spacing(2, 3, 2, 3.5), transition: theme.transitions.duration.shortest + "ms", - width: 72 + width: shrunkMenuWidth }, rootActive: { "&$root": { @@ -76,7 +80,7 @@ const useStyles = makeStyles( } }, rootExpanded: { - width: 210 + width: menuWidth }, subMenuLabel: { "&$label": { @@ -89,7 +93,7 @@ const useStyles = makeStyles( }, background: "none", border: "none", - color: theme.palette.text.disabled + color: fade(theme.palette.text.primary, 0.6) } }), { diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx index 6b558d6f4..892a1ae5f 100644 --- a/src/components/SideBar/SideBar.tsx +++ b/src/components/SideBar/SideBar.tsx @@ -5,13 +5,14 @@ import { configurationMenuUrl } from "@saleor/configuration"; import { User } from "@saleor/fragments/types/User"; import useLocalStorage from "@saleor/hooks/useLocalStorage"; import { sectionNames } from "@saleor/intl"; +import classNames from "classnames"; import React from "react"; import SVG from "react-inlinesvg"; import { useIntl } from "react-intl"; import { IMenuItem } from "../AppLayout/menuStructure"; import ExpandButton from "./ExpandButton"; -import MenuItem from "./MenuItem"; +import MenuItem, { menuWidth, shrunkMenuWidth } from "./MenuItem"; import { isMenuActive } from "./utils"; const useStyles = makeStyles( @@ -19,11 +20,18 @@ const useStyles = makeStyles( expandButton: { marginLeft: theme.spacing(2) }, + float: { + position: "fixed" + }, logo: { margin: `36px 0 ${theme.spacing(3)}px ${theme.spacing(3)}px` }, root: { - transition: "width 0.5s ease" + transition: "width 0.5s ease", + width: menuWidth + }, + rootShrink: { + width: shrunkMenuWidth } }), { @@ -57,55 +65,61 @@ const SideBar: React.FC = ({ const intl = useIntl(); return ( -
-
- -
- {menuItems.map(menuItem => { - const isActive = isMenuActive(location, menuItem); +
+
+
+ +
+ {menuItems.map(menuItem => { + const isActive = isMenuActive(location, menuItem); - if ( - menuItem.permission && - !user.userPermissions - .map(perm => perm.code) - .includes(menuItem.permission) - ) { - return null; - } + if ( + menuItem.permission && + !user.userPermissions + .map(perm => perm.code) + .includes(menuItem.permission) + ) { + return null; + } - return ( + return ( + + ); + })} + {renderConfigure && ( acc || isMenuActive(location, menuItem), + false + ) + } isMenuShrunk={isShrunk} - menuItem={menuItem} + menuItem={{ + ariaLabel: "configure", + icon: configurationIcon, + label: intl.formatMessage(sectionNames.configuration), + testingContextId: "configure", + url: configurationMenuUrl + }} onClick={onMenuItemClick} /> - ); - })} - {renderConfigure && ( - acc || isMenuActive(location, menuItem), - false - ) - } - isMenuShrunk={isShrunk} - menuItem={{ - ariaLabel: "configure", - icon: configurationIcon, - label: intl.formatMessage(sectionNames.configuration), - testingContextId: "configure", - url: configurationMenuUrl - }} - onClick={onMenuItemClick} + )} + setShrink(!isShrunk)} /> - )} - setShrink(!isShrunk)} - /> +
); }; From 3d571e3f4f4ab5d00ee2f304fdd8089814fd6258 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Tue, 8 Sep 2020 12:14:13 +0200 Subject: [PATCH 11/20] Visual improvements --- src/components/SaveButtonBar/SaveButtonBar.tsx | 16 +++++++++++++++- src/components/SideBar/MenuItem.tsx | 2 +- src/components/SideBar/SideBar.tsx | 3 ++- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/SaveButtonBar/SaveButtonBar.tsx b/src/components/SaveButtonBar/SaveButtonBar.tsx index 681c75e73..b7a5b6cf0 100644 --- a/src/components/SaveButtonBar/SaveButtonBar.tsx +++ b/src/components/SaveButtonBar/SaveButtonBar.tsx @@ -5,6 +5,7 @@ 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"; @@ -17,12 +18,21 @@ import Container from "../Container"; const useStyles = makeStyles( theme => ({ + applyShadow: { + "&$card": { + boxShadow: "0px 6px 30px rgba(0, 0, 0, 0.16)" + } + }, button: { marginRight: theme.spacing(1) }, cancelButton: { marginRight: theme.spacing(2) }, + card: { + boxShadow: "0px 0px 0px rgba(0, 0, 0, 0.16)", + transition: theme.transitions.duration.shortest + "ms" + }, content: { "&:last-child": { paddingBottom: theme.spacing(2) @@ -88,7 +98,11 @@ export const SaveButtonBar: React.FC = props => {
- + {!!onDelete && ( {menuItem.children && ( = ({ )} - +
); }; diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx index 0f521b9ff..3edd12db8 100644 --- a/src/components/SideBar/SideBar.tsx +++ b/src/components/SideBar/SideBar.tsx @@ -93,6 +93,7 @@ const SideBar: React.FC = ({ isMenuShrunk={isShrunk} menuItem={menuItem} onClick={onMenuItemClick} + key={menuItem.ariaLabel} /> ); })} diff --git a/src/components/SideBar/utils.ts b/src/components/SideBar/utils.ts index 5f9856778..06827a7ac 100644 --- a/src/components/SideBar/utils.ts +++ b/src/components/SideBar/utils.ts @@ -11,11 +11,14 @@ export function isMenuActive(location: string, menuItem: IMenuItem) { ); } - return location.split("?")[0] === orderDraftListUrl().split("?")[0] && - menuItem.url.split("?")[0] === orderListUrl().split("?")[0] + const activeUrl = location.split("?")[0]; + const menuItemUrl = menuItem.url.split("?")[0]; + + return activeUrl === orderDraftListUrl().split("?")[0] && + menuItemUrl === orderListUrl().split("?")[0] ? false - : !!matchPath(location.split("?")[0], { - exact: menuItem.url.split("?")[0] === "/", - path: menuItem.url.split("?")[0] + : !!matchPath(activeUrl, { + exact: menuItemUrl === "/", + path: menuItemUrl }); } From c862cc1eaefd9dbb485f0e8b89a72461158260d9 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 9 Sep 2020 10:56:36 +0200 Subject: [PATCH 13/20] Align text to left --- src/components/SideBar/MenuItem.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx index 51bb6023f..492f68846 100644 --- a/src/components/SideBar/MenuItem.tsx +++ b/src/components/SideBar/MenuItem.tsx @@ -104,7 +104,8 @@ const useStyles = makeStyles( }, background: "none", border: "none", - color: fade(theme.palette.text.primary, 0.6) + color: fade(theme.palette.text.primary, 0.6), + textAlign: "left" } }), { From a1b8cba07b4264b1cbdaf6a89595558ef97a95d5 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 9 Sep 2020 10:59:09 +0200 Subject: [PATCH 14/20] Do not break white space --- src/components/SideBar/MenuItem.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx index 492f68846..fc8c921da 100644 --- a/src/components/SideBar/MenuItem.tsx +++ b/src/components/SideBar/MenuItem.tsx @@ -105,7 +105,8 @@ const useStyles = makeStyles( background: "none", border: "none", color: fade(theme.palette.text.primary, 0.6), - textAlign: "left" + textAlign: "left", + whiteSpace: "nowrap" } }), { From 89c33deb3dfd482167b17a5c5d9f3dbbbfd57453 Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 9 Sep 2020 11:18:33 +0200 Subject: [PATCH 15/20] Fix submenu shadow --- src/components/SideBar/MenuItem.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx index fc8c921da..84f7ddab3 100644 --- a/src/components/SideBar/MenuItem.tsx +++ b/src/components/SideBar/MenuItem.tsx @@ -57,6 +57,7 @@ const useStyles = makeStyles( }, paper: { borderRadius: 16, + boxShadow: "0px 6px 30px rgba(0, 0, 0, 0.16)", cursor: "default", padding: theme.spacing(3), textAlign: "left" @@ -169,7 +170,7 @@ const MenuItem: React.FC = ({ onClickAway={() => setOpen(false)} mouseEvent="onClick" > - + {menuItem.children.map(subMenuItem => ( Date: Wed, 9 Sep 2020 11:55:14 +0200 Subject: [PATCH 16/20] Listen to all clickAways --- src/components/SideBar/MenuItem.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx index 84f7ddab3..6ab7acfc8 100644 --- a/src/components/SideBar/MenuItem.tsx +++ b/src/components/SideBar/MenuItem.tsx @@ -166,10 +166,7 @@ const MenuItem: React.FC = ({ disablePortal placement="right-start" > - setOpen(false)} - mouseEvent="onClick" - > + setOpen(false)}> {menuItem.children.map(subMenuItem => ( Date: Wed, 9 Sep 2020 12:56:43 +0200 Subject: [PATCH 17/20] Fix menu hiding --- src/components/AppLayout/AppLayout.tsx | 83 +------------------------- src/components/SideBar/MenuItem.tsx | 12 ++-- src/components/SideBar/SideBar.tsx | 3 +- 3 files changed, 9 insertions(+), 89 deletions(-) diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 5358c451a..2f6041ee2 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -85,67 +85,6 @@ const useStyles = makeStyles( height: "100vh", padding: "25px 20px" }, - menuIcon: { - "& span": { - "&:nth-child(1)": { - top: 15 - }, - "&:nth-child(2), &:nth-child(3)": { - top: 20 - }, - "&:nth-child(4)": { - top: 25 - }, - background: theme.palette.secondary.light, - display: "block", - height: 1, - left: "20%", - opacity: 1, - position: "absolute", - transform: "rotate(0deg)", - transition: ".25s ease-in-out", - width: "60%" - }, - [theme.breakpoints.up("md")]: { - display: "none" - }, - [theme.breakpoints.down("sm")]: { - left: 0 - }, - background: theme.palette.background.paper, - borderRadius: "50%", - cursor: "pointer", - height: 42, - left: theme.spacing(), - marginRight: theme.spacing(2), - position: "relative", - transform: "rotate(0deg)", - transition: `${theme.transitions.duration.shorter}ms ease-in-out`, - width: 42 - }, - menuIconDark: { - "& span": { - background: theme.palette.common.white - } - }, - menuIconOpen: { - "& span": { - "&:nth-child(1), &:nth-child(4)": { - left: "50%", - top: 20, - width: 0 - }, - "&:nth-child(2)": { - transform: "rotate(45deg)" - }, - "&:nth-child(3)": { - transform: "rotate(-45deg)" - } - }, - left: 280, - position: "absolute", - zIndex: 1999 - }, menuSmall: { background: theme.palette.background.paper, height: "100vh", @@ -212,7 +151,6 @@ interface AppLayoutProps { const AppLayout: React.FC = ({ children }) => { const classes = useStyles({}); const { isDark, toggleTheme } = useTheme(); - const [isDrawerOpened, setDrawerState] = React.useState(false); const [isMenuOpened, setMenuState] = React.useState(false); const appActionAnchor = React.useRef(); const appHeaderAnchor = React.useRef(); @@ -247,13 +185,6 @@ const AppLayout: React.FC = ({ children }) => { navigate(staffMemberDetailsUrl(user.id)); }; - const handleMenuItemClick = (url: string, event: React.MouseEvent) => { - event.stopPropagation(); - event.preventDefault(); - setDrawerState(false); - navigate(url); - }; - const handleErrorBack = () => { navigate("/"); dispatchAppState({ @@ -278,7 +209,7 @@ const AppLayout: React.FC = ({ children }) => { location={location.pathname} user={user} renderConfigure={renderConfigure} - onMenuItemClick={handleMenuItemClick} + onMenuItemClick={navigate} />
{appState.loading ? ( @@ -290,18 +221,6 @@ const AppLayout: React.FC = ({ children }) => {
-
setDrawerState(!isDrawerOpened)} - > - - - - -
diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx index 6ab7acfc8..897a87faf 100644 --- a/src/components/SideBar/MenuItem.tsx +++ b/src/components/SideBar/MenuItem.tsx @@ -4,6 +4,7 @@ import Popper from "@material-ui/core/Popper"; import { fade } from "@material-ui/core/styles/colorManipulator"; import makeStyles from "@material-ui/core/styles/makeStyles"; import Typography from "@material-ui/core/Typography"; +import { UseNavigatorResult } from "@saleor/hooks/useNavigator"; import classNames from "classnames"; import React from "react"; import SVG from "react-inlinesvg"; @@ -14,7 +15,7 @@ export interface MenuItemProps { active: boolean; isMenuShrunk: boolean; menuItem: IMenuItem; - onClick: (url: string, event: React.MouseEvent) => void; + onClick: UseNavigatorResult; } export const menuWidth = 210; @@ -51,6 +52,7 @@ const useStyles = makeStyles( background: "none", border: "none", color: "inherit", + cursor: "pointer", display: "inline-flex", margin: 0, padding: 0 @@ -126,10 +128,11 @@ const MenuItem: React.FC = ({ const anchor = React.useRef(null); const handleClick = (event: React.MouseEvent, menuItem: IMenuItem) => { + event.stopPropagation(); if (menuItem.children) { setOpen(true); } else { - onClick(menuItem.url, event); + onClick(menuItem.url); setOpen(false); } }; @@ -174,10 +177,7 @@ const MenuItem: React.FC = ({ component="button" className={classNames(classes.label, classes.subMenuLabel)} key={subMenuItem.url} - onClick={event => { - event.preventDefault(); - handleClick(event, subMenuItem); - }} + onClick={event => handleClick(event, subMenuItem)} data-test="submenu-item-label" data-test-id={subMenuItem.testingContextId} variant="body2" diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx index 3edd12db8..04570317e 100644 --- a/src/components/SideBar/SideBar.tsx +++ b/src/components/SideBar/SideBar.tsx @@ -4,6 +4,7 @@ import makeStyles from "@material-ui/core/styles/makeStyles"; import { configurationMenuUrl } from "@saleor/configuration"; import { User } from "@saleor/fragments/types/User"; import useLocalStorage from "@saleor/hooks/useLocalStorage"; +import { UseNavigatorResult } from "@saleor/hooks/useNavigator"; import { sectionNames } from "@saleor/intl"; import classNames from "classnames"; import React from "react"; @@ -46,7 +47,7 @@ export interface SideBarProps { location: string; user: User; renderConfigure: boolean; - onMenuItemClick: (url: string, event: React.MouseEvent) => void; + onMenuItemClick: UseNavigatorResult; } export interface IActiveSubMenu { From 14b32db8eced54726aa9d2e7d947b506b0af724e Mon Sep 17 00:00:00 2001 From: dominik-zeglen Date: Wed, 9 Sep 2020 13:15:18 +0200 Subject: [PATCH 18/20] Fix test selectors --- cypress/elements/account/left-menu/left-menu-selectors.js | 2 +- cypress/integration/warehouse.js | 2 +- src/components/SideBar/MenuItem.tsx | 8 +++++--- src/configuration/ConfigurationPage.tsx | 2 +- src/warehouses/components/WarehouseList/WarehouseList.tsx | 2 +- 5 files changed, 9 insertions(+), 7 deletions(-) diff --git a/cypress/elements/account/left-menu/left-menu-selectors.js b/cypress/elements/account/left-menu/left-menu-selectors.js index 453e686ca..fb525ee06 100644 --- a/cypress/elements/account/left-menu/left-menu-selectors.js +++ b/cypress/elements/account/left-menu/left-menu-selectors.js @@ -1,4 +1,4 @@ /* eslint-disable sort-keys */ export const LEFT_MENU_SELECTORS = { - catalog: "[data-testid='catalogue']" + catalog: "[data-test-id='catalogue']" }; diff --git a/cypress/integration/warehouse.js b/cypress/integration/warehouse.js index 7ed06c295..208321164 100644 --- a/cypress/integration/warehouse.js +++ b/cypress/integration/warehouse.js @@ -7,7 +7,7 @@ describe("Warehouse settings", () => { xit("Warehouse section visible in the configuration", () => { cy.visit("/configuration/") .loginUser() - .get("[data-testid=warehouses][data-test=settingsSubsection]") + .get("[data-test-id=warehouses][data-test=settingsSubsection]") .click(); cy.location("pathname").should("eq", "/warehouses/"); }); diff --git a/src/components/SideBar/MenuItem.tsx b/src/components/SideBar/MenuItem.tsx index 897a87faf..77462c507 100644 --- a/src/components/SideBar/MenuItem.tsx +++ b/src/components/SideBar/MenuItem.tsx @@ -146,7 +146,11 @@ const MenuItem: React.FC = ({ ref={anchor} onClick={event => handleClick(event, menuItem)} > -