Merge pull request #635 from mirumee/add/navigator-btn

Add navigator button

CHANGELOG.md

@@ -15,6 +15,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - create Apps - #599 by @AlicjaSzu
 - Refactor authorization - #624 by @dominik-zeglen
 - Fix minor bugs - #628 by @dominik-zeglen
+- Add navigator button - #635 by @dominik-zeglen
 
 ## 2.10.1
 

assets/images/navigator.svg

@@ -0,0 +1 @@
+<svg width="12" height="18" viewBox="0 0 12 18" fill="none" xmlns="http://www.w3.org/2000/svg" ><path d="M0 11.2324L6.99609 0L6.1875 6.78516H11.6895L4.79883 18L5.51953 11.2324H0Z" fill="currentColor" /></svg>

locale/defaultMessages.json

@@ -1512,6 +1512,9 @@
   "src_dot_components_dot_MultiSelectField_dot_4205644805": {
     "string": "No results found"
   },
+  "src_dot_components_dot_NavigatorButton_dot_154826674": {
+    "string": "Navigator"
+  },
   "src_dot_components_dot_Navigator_dot_1116468870": {
     "context": "navigator placeholder",
     "string": "Order Number"

src/components/AppLayout/AppLayout.tsx

@@ -28,6 +28,8 @@ import useRouter from "use-react-router";
 
 import Container from "../Container";
 import ErrorPage from "../ErrorPage";
+import Navigator from "../Navigator";
+import NavigatorButton from "../NavigatorButton/NavigatorButton";
 import AppActionContext from "./AppActionContext";
 import AppHeaderContext from "./AppHeaderContext";
 import { appLoaderHeight, drawerWidth, drawerWidthExpanded } from "./consts";
@@ -310,6 +312,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   const intl = useIntl();
   const [appState, dispatchAppState] = useAppState();
   const { location } = useRouter();
+  const [isNavigatorVisible, setNavigatorVisibility] = React.useState(false);
 
   const menuStructure = createMenuStructure(intl);
   const configurationMenu = createConfigurationMenu(intl);
@@ -356,6 +359,11 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
   };
 
   return (
+    <>
+      <Navigator
+        visible={isNavigatorVisible}
+        setVisibility={setNavigatorVisibility}
+      />
       <AppHeaderContext.Provider value={appHeaderAnchor}>
         <AppActionContext.Provider value={appActionAnchor}>
           <div className={classes.root}>
@@ -371,7 +379,9 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                     [classes.logoDark]: isDark
                   })}
                 >
-                <SVG src={isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo} />
+                  <SVG
+                    src={isMenuSmall ? saleorDarkLogoSmall : saleorDarkLogo}
+                  />
                 </div>
                 <Hidden smDown>
                   <div
@@ -429,6 +439,12 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
                           checked={isDark}
                           onClick={toggleTheme}
                         />
+                        <NavigatorButton
+                          isMac={navigator.platform
+                            .toLowerCase()
+                            .includes("mac")}
+                          onClick={() => setNavigatorVisibility(true)}
+                        />
                         <div className={classes.userMenuContainer} ref={anchor}>
                           <Chip
                             avatar={
@@ -520,6 +536,7 @@ const AppLayout: React.FC<AppLayoutProps> = ({ children }) => {
           </div>
         </AppActionContext.Provider>
       </AppHeaderContext.Provider>
+    </>
   );
 };
 

src/components/Navigator/Navigator.tsx

@@ -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 [query, mode, change, actions] = useQuickSearch(visible, input);
   const intl = useIntl();
@@ -76,7 +80,7 @@ const Navigator: React.FC = () => {
   React.useEffect(() => {
     hotkeys(navigatorHotkey, event => {
       event.preventDefault();
-      setVisible(!visible);
+      setVisibility(!visible);
     });
 
     if (cmp(APP_VERSION, "2.1.0") !== 1 && !notifiedAboutNavigator) {
@@ -110,7 +114,7 @@ const Navigator: React.FC = () => {
     <Modal
       className={classes.modal}
       open={visible}
-      onClose={() => setVisible(false)}
+      onClose={() => setVisibility(false)}
     >
       <Fade appear in={visible} timeout={theme.transitions.duration.short}>
         <div className={classes.root}>
@@ -122,7 +126,7 @@ const Navigator: React.FC = () => {
               onSelect={(item: QuickSearchAction) => {
                 const shouldRemainVisible = item.onClick();
                 if (!shouldRemainVisible) {
-                  setVisible(false);
+                  setVisibility(false);
                 }
               }}
               onInputValueChange={value =>

src/components/NavigatorButton/NavigatorButton.stories.tsx

@@ -0,0 +1,12 @@
+import CardDecorator from "@saleor/storybook/CardDecorator";
+import Decorator from "@saleor/storybook/Decorator";
+import { storiesOf } from "@storybook/react";
+import React from "react";
+
+import NavigatorButton from "./NavigatorButton";
+
+storiesOf("Generics / NavigatorButton", module)
+  .addDecorator(Decorator)
+  .addDecorator(CardDecorator)
+  .add("mac", () => <NavigatorButton isMac={true} />)
+  .add("other", () => <NavigatorButton isMac={false} />);

src/components/NavigatorButton/NavigatorButton.tsx

@@ -0,0 +1,153 @@
+import navigatorIcon from "@assets/images/navigator.svg";
+import Grow from "@material-ui/core/Grow";
+import IconButton, { IconButtonProps } from "@material-ui/core/IconButton";
+import Paper from "@material-ui/core/Paper";
+import Popper from "@material-ui/core/Popper";
+import makeStyles from "@material-ui/core/styles/makeStyles";
+import classNames from "classnames";
+import React from "react";
+import ReactSVG from "react-inlinesvg";
+import { FormattedMessage } from "react-intl";
+
+const useStyles = makeStyles(
+  theme => {
+    const triangle = (color: string, width: number) => ({
+      borderBottom: `${width}px solid ${color}`,
+      borderLeft: `${width}px solid transparent`,
+      borderRight: `${width}px solid transparent`,
+      height: 0,
+      width: 0
+    });
+
+    return {
+      keyTile: {
+        "&:first-child": {
+          marginLeft: theme.spacing()
+        },
+        alignItems: "center",
+        background: theme.palette.background.default,
+        borderRadius: 8,
+        display: "inline-flex",
+        height: 32,
+        justifyContent: "center",
+        marginLeft: theme.spacing(0.5),
+        padding: theme.spacing(),
+        width: 32
+      },
+      keyTileLabel: {
+        verticalAlign: "middle"
+      },
+      paper: {
+        "&:after": {
+          ...triangle(theme.palette.background.paper, 7),
+          content: "''",
+          left: theme.spacing(2) + 2,
+          position: "absolute",
+          top: -theme.spacing() + 1
+        },
+        "&:before": {
+          ...triangle(theme.palette.divider, 8),
+          content: "''",
+          left: theme.spacing(2) + 1,
+          position: "absolute",
+          top: -theme.spacing()
+        },
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: 6,
+        marginTop: theme.spacing(2),
+        padding: theme.spacing(2),
+        position: "relative"
+      },
+
+      root: {
+        "& path": {
+          color: theme.palette.primary.main
+        },
+        "&:not(:hover)": {
+          backgroundColor: theme.palette.background.paper
+        },
+        border: `1px solid ${theme.palette.divider}`,
+        height: 40,
+        marginRight: theme.spacing(2),
+        width: 40
+      }
+    };
+  },
+  {
+    name: "NavigatorButton"
+  }
+);
+
+export interface NavigatorButtonProps extends IconButtonProps {
+  isMac: boolean;
+}
+
+const NavigatorButton: React.FC<NavigatorButtonProps> = ({
+  className,
+  isMac,
+  ...props
+}) => {
+  const classes = useStyles({});
+  const helperTimer = React.useRef(null);
+  const [helperVisibility, setHelperVisibility] = React.useState(false);
+  const anchor = React.useRef<HTMLButtonElement>();
+
+  const setHelper = () => {
+    helperTimer.current = setTimeout(() => setHelperVisibility(true), 2 * 1000);
+  };
+
+  const clearHelper = () => {
+    if (helperTimer.current) {
+      clearTimeout(helperTimer.current);
+      helperTimer.current = null;
+    }
+    setHelperVisibility(false);
+  };
+
+  return (
+    <>
+      <IconButton
+        className={classNames(className, classes.root)}
+        data-test="navigator"
+        onMouseEnter={setHelper}
+        onMouseLeave={clearHelper}
+        {...props}
+        ref={anchor}
+      >
+        <ReactSVG src={navigatorIcon} />
+      </IconButton>
+      <Popper
+        open={helperVisibility}
+        anchorEl={anchor.current}
+        transition
+        disablePortal
+        placement="bottom-start"
+      >
+        {({ TransitionProps, placement }) => (
+          <Grow
+            {...TransitionProps}
+            style={{
+              transformOrigin:
+                placement === "bottom" ? "right top" : "right bottom"
+            }}
+          >
+            <Paper className={classes.paper} elevation={0}>
+              <FormattedMessage defaultMessage="Navigator" />
+              <div className={classes.keyTile}>
+                <span className={classes.keyTileLabel}>
+                  {isMac ? "⌘" : "Ctrl"}
+                </span>
+              </div>
+              <div className={classes.keyTile}>
+                <span className={classes.keyTileLabel}>K</span>
+              </div>
+            </Paper>
+          </Grow>
+        )}
+      </Popper>
+    </>
+  );
+};
+
+NavigatorButton.displayName = "NavigatorButton";
+export default NavigatorButton;

src/index.tsx

@@ -1,4 +1,3 @@
-import Navigator from "@saleor/components/Navigator";
 import useAppState from "@saleor/hooks/useAppState";
 import { defaultDataIdFromObject, InMemoryCache } from "apollo-cache-inmemory";
 import { ApolloClient } from "apollo-client";
@@ -139,7 +138,6 @@ const Routes: React.FC = () => {
       <WindowTitle title={intl.formatMessage(commonMessages.dashboard)} />
       {isAuthenticated && !tokenAuthLoading && !tokenVerifyLoading ? (
         <AppLayout>
-          <Navigator />
           <ErrorBoundary
             onError={() =>
               dispatchAppState({

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -4670,6 +4670,66 @@ exports[`Storyshots Generics / Multiple select with autocomplete no data 1`] = `
 </div>
 `;
 
+exports[`Storyshots Generics / NavigatorButton mac 1`] = `
+<div
+  class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+  style="margin:auto;overflow:visible;position:relative;width:400px"
+>
+  <div
+    class="MuiCardContent-root-id"
+  >
+    <div
+      style="padding:24px"
+    >
+      <button
+        class="MuiButtonBase-root-id MuiIconButton-root-id NavigatorButton-root-id"
+        data-test="navigator"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label-id"
+        >
+          <span
+            class="isvg pending"
+          />
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Generics / NavigatorButton other 1`] = `
+<div
+  class="MuiPaper-root-id MuiPaper-elevation0-id MuiCard-root-id MuiPaper-rounded-id"
+  style="margin:auto;overflow:visible;position:relative;width:400px"
+>
+  <div
+    class="MuiCardContent-root-id"
+  >
+    <div
+      style="padding:24px"
+    >
+      <button
+        class="MuiButtonBase-root-id MuiIconButton-root-id NavigatorButton-root-id"
+        data-test="navigator"
+        tabindex="0"
+        type="button"
+      >
+        <span
+          class="MuiIconButton-label-id"
+        >
+          <span
+            class="isvg pending"
+          />
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Generics / PageHeader with title 1`] = `
 <div
   style="padding:24px"