setDrawerState(!isDrawerOpened)}
- >
-
-
-
-
-
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 (
-
- );
-};
-
-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 (
- <>
-
-
- );
-};
-
-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;
diff --git a/src/components/SaveButtonBar/SaveButtonBar.tsx b/src/components/SaveButtonBar/SaveButtonBar.tsx
index adf2bdcdb..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)
@@ -79,7 +89,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 (
@@ -88,7 +98,11 @@ export const SaveButtonBar: React.FC = props => {
-
+
{!!onDelete && (