Merge pull request #4491 from mirumee/fix/dashboard-menu-styles

Fix dashboard menu styles
saleor · Jul 19, 2019 · cd63347 · cd63347
2 parents 2a08e86 + 22e39f9
commit cd63347
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 42 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,9 +16,9 @@ All notable, unreleased changes to this project will be documented in this file.
 - New translations:
   - Greek
 - Fix searches and pickers - #4487 by @dominik-zeglen
+- Fix dashboard menu styles - #4491 by @benekex2
 - Do not allow random ids to appear in snapshots - #4495 by @dominik-zeglen
 
-
 ## 2.8.0
 
 ### Core

diff --git a/saleor/static/dashboard-next/components/AppLayout/AppLayout.tsx b/saleor/static/dashboard-next/components/AppLayout/AppLayout.tsx
@@ -91,16 +91,30 @@ const styles = (theme: Theme) =>
         marginTop: 12,
         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": {
         transform: "rotate(0deg)"
@@ -128,7 +142,6 @@ const styles = (theme: Theme) =>
     },
     menu: {
       background: theme.palette.background.paper,
-      boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)",
       height: "100vh",
       padding: 25
     },
@@ -164,7 +177,7 @@ const styles = (theme: Theme) =>
       marginRight: theme.spacing.unit * 2,
       position: "relative",
       transform: "rotate(0deg)",
-      transition: ".2s ease-in-out",
+      transition: `${theme.transitions.duration.shorter}ms ease-in-out`,
       width: 42
     },
     menuIconDark: {
@@ -192,7 +205,6 @@ const styles = (theme: Theme) =>
     },
     menuSmall: {
       background: theme.palette.background.paper,
-      boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)",
       height: "100vh",
       padding: 25
     },
@@ -318,7 +330,8 @@ const AppLayout = withStyles(styles, {
                       <Hidden smDown>
                         <div
                           className={classNames(classes.isMenuSmall, {
-                            [classes.isMenuSmallHide]: isMenuSmall
+                            [classes.isMenuSmallHide]: isMenuSmall,
+                            [classes.isMenuSmallDark]: isDark
                           })}
                           onClick={handleIsMenuSmall}
                         >

diff --git a/saleor/static/dashboard-next/components/AppLayout/MenuList.tsx b/saleor/static/dashboard-next/components/AppLayout/MenuList.tsx
@@ -17,7 +17,6 @@ import { configurationMenu, configurationMenuUrl } from "../../configuration";
 import i18n from "../../i18n";
 import { createHref } from "../../misc";
 import { orderDraftListUrl, orderListUrl } from "../../orders/urls";
-import { drawerWidth, drawerWidthExpanded } from "./consts";
 import MenuNested from "./MenuNested";
 import { IMenuItem } from "./menuStructure";
 
@@ -37,6 +36,9 @@ const styles = (theme: Theme) =>
         fill: theme.palette.common.white
       }
     },
+    menuIsActive: {
+      boxShadow: "0px 0px 12px 1px rgba(0,0,0,0.2)"
+    },
     menuItemHover: {
       "& path": {
         transition: "fill 0.5s ease"
@@ -45,9 +47,18 @@ const styles = (theme: Theme) =>
         "& path": {
           fill: theme.palette.primary.main
         },
+        "&:before": {
+          borderLeft: `solid 2px ${theme.palette.primary.main}`,
+          content: "''",
+          height: 33,
+          left: -25,
+          position: "absolute",
+          top: 8
+        },
         color: theme.palette.primary.main
       },
-      cursor: "pointer"
+      cursor: "pointer",
+      position: "relative"
     },
     menuList: {
       display: "flex",
@@ -60,7 +71,7 @@ const styles = (theme: Theme) =>
     menuListItem: {
       alignItems: "center",
       display: "block",
-      marginTop: theme.spacing.unit * 2,
+      marginBottom: theme.spacing.unit * 5,
       paddingLeft: 0,
       textDecoration: "none",
       transition: theme.transitions.duration.standard + "ms"
@@ -72,18 +83,21 @@ const styles = (theme: Theme) =>
       "& path": {
         color: theme.palette.primary.main,
         fill: theme.palette.primary.main
-      },
-      "&:before": {
-        background: theme.palette.primary.main,
-        content: "''",
-        height: "100%",
-        left: -32,
-        position: "absolute",
-        width: 5
       }
     },
-    menuListItemSmall: {
-      marginTop: theme.spacing.unit * 2
+    menuListItemOpen: {
+      "&:after": {
+        borderBottom: `10px solid transparent`,
+        borderLeft: `10px solid ${theme.palette.background.paper}`,
+        borderTop: `10px solid transparent`,
+        content: "''",
+        height: 0,
+        position: "absolute",
+        right: -35,
+        top: 15,
+        width: 0
+      },
+      position: "relative"
     },
     menuListItemText: {
       "&:hover": {
@@ -96,12 +110,12 @@ const styles = (theme: Theme) =>
       opacity: 1,
       paddingLeft: 16,
       textTransform: "uppercase",
-      transition: "opacity 0.2s ease"
+      transition: `opacity  ${theme.transitions.duration.shorter}ms ease 0.1s`
     },
     menuListItemTextHide: {
       opacity: 0,
       position: "absolute",
-      transition: "opacity 0.2s ease"
+      transition: `opacity  ${theme.transitions.duration.shorter}ms ease`
     },
     subMenu: {
       padding: "0 15px"
@@ -110,23 +124,15 @@ const styles = (theme: Theme) =>
       background: "#000",
       cursor: "pointer",
       height: "100vh",
-      left: drawerWidth,
+      left: 0,
       opacity: 0.2,
       position: "absolute",
       top: 0,
       width: 0,
       zIndex: -2
     },
     subMenuDrawerOpen: {
-      "&$subMenuDrawerSmall": {
-        left: drawerWidth,
-        width: `calc(100vw - ${drawerWidth})px`
-      },
-      width: `calc(100vw - ${drawerWidthExpanded}px)`
-    },
-    subMenuDrawerSmall: {
-      left: drawerWidth,
-      width: `calc(100vw - ${drawerWidth})px`
+      width: `100vw`
     }
   });
 
@@ -183,7 +189,11 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
     };
 
     return (
-      <div className={className}>
+      <div
+        className={classNames(className, {
+          [classes.menuIsActive]: activeSubMenu.isActive
+        })}
+      >
         {/* FIXME: this .split("?")[0] looks gross */}
         {menuItems.map(menuItem => {
           const isActive = (menuItem: IMenuItem) =>
@@ -213,12 +223,15 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
             return (
               <div
                 className={classNames(classes.menuListItem, {
-                  [classes.menuListItemSmall]: !isMenuSmall,
                   [classes.menuListItemActive]: isAnyChildActive
                 })}
               >
                 <div
-                  className={classes.menuItemHover}
+                  className={classNames(classes.menuItemHover, {
+                    [classes.menuListItemOpen]:
+                      menuItem.ariaLabel === activeSubMenu.label &&
+                      activeSubMenu.isActive
+                  })}
                   onClick={() => handleSubMenu(menuItem.ariaLabel)}
                 >
                   <SVG
@@ -249,8 +262,7 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
                 <div
                   onClick={event => closeSubMenu(null, event)}
                   className={classNames(classes.subMenuDrawer, {
-                    [classes.subMenuDrawerOpen]: activeSubMenu.isActive,
-                    [classes.subMenuDrawerSmall]: !isMenuSmall
+                    [classes.subMenuDrawerOpen]: activeSubMenu.isActive
                   })}
                 />
               </div>
@@ -260,7 +272,6 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
           return (
             <a
               className={classNames(classes.menuListItem, {
-                [classes.menuListItemSmall]: !isMenuSmall,
                 [classes.menuListItemActive]: isActive(menuItem)
               })}
               href={createHref(menuItem.url)}
@@ -293,9 +304,7 @@ const MenuList = withStyles(styles, { name: "MenuList" })(
               .includes(menuItem.permission)
           ).length > 0 && (
             <a
-              className={classNames(classes.menuListItem, {
-                [classes.menuListItemSmall]: !isMenuSmall
-              })}
+              className={classes.menuListItem}
               href={createHref(configurationMenuUrl)}
               onClick={event => onMenuItemClick(configurationMenuUrl, event)}
             >

diff --git a/saleor/static/dashboard-next/components/AppLayout/MenuNested.tsx b/saleor/static/dashboard-next/components/AppLayout/MenuNested.tsx
@@ -34,7 +34,7 @@ const styles = (theme: Theme) =>
       position: "absolute",
       right: 0,
       top: 0,
-      transition: "right 1s ease",
+      transition: `right  ${theme.transitions.duration.shorter}ms ease`,
       width: 300,
       zIndex: -1
     },

diff --git a/saleor/static/dashboard-next/components/AppLayout/ResponsiveDrawer.tsx b/saleor/static/dashboard-next/components/AppLayout/ResponsiveDrawer.tsx
@@ -18,12 +18,12 @@ const styles = (theme: Theme) =>
       overflow: "visible",
       padding: 0,
       position: "fixed" as "fixed",
-      transition: "width 0.5s ease",
+      transition: "width 0.2s ease",
       width: drawerWidthExpanded
     },
     drawerDesktopSmall: {
       overflow: "visible",
-      transition: "width 0.5s ease",
+      transition: "width 0.2s ease",
       width: drawerWidth
     },
     drawerMobile: {