Add mobile ObjectMenu styling

Hubs-Foundation · Oct 15, 2020 · 275cbdc · 275cbdc
1 parent 1ab451c
commit 275cbdc
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 16 deletions.
diff --git a/src/react-components/icons/ArrowBack.svg b/src/react-components/icons/ArrowBack.svg
diff --git a/src/react-components/icons/ArrowForward.svg b/src/react-components/icons/ArrowForward.svg
diff --git a/src/react-components/layout/RoomLayout.js b/src/react-components/layout/RoomLayout.js
@@ -15,10 +15,11 @@ export function RoomLayout({
   toolbarClassName,
   modal,
   viewport,
+  objectFocused,
   ...rest
 }) {
   return (
-    <div className={classNames(styles.roomLayout, className)} {...rest}>
+    <div className={classNames(styles.roomLayout, { [styles.objectFocused]: objectFocused }, className)} {...rest}>
       {sidebar && <div className={classNames(styles.sidebar, sidebarClassName)}>{sidebar}</div>}
       <div className={classNames(styles.modalContainer, styles.viewport)}>{modal}</div>
       <Toolbar
@@ -42,5 +43,6 @@ RoomLayout.propTypes = {
   toolbarRight: PropTypes.node,
   toolbarClassName: PropTypes.string,
   modal: PropTypes.node,
-  viewport: PropTypes.node
+  viewport: PropTypes.node,
+  objectFocused: PropTypes.bool
 };
diff --git a/src/react-components/layout/RoomLayout.scss b/src/react-components/layout/RoomLayout.scss
@@ -75,3 +75,13 @@
     right: 450px;
   }
 }
+
+:local(.object-focused) {
+  @media(max-width: theme.$breakpoint-md - 1) {
+    background-color: theme.$black;
+
+    :local(.toolbar) {
+      display: none;
+    }
+  }
+}
diff --git a/src/react-components/room/ObjectMenu.js b/src/react-components/room/ObjectMenu.js
@@ -5,6 +5,9 @@ import { joinChildren } from "../misc/joinChildren";
 import styles from "./ObjectMenu.scss";
 import { IconButton } from "../input/IconButton";
 import { ReactComponent as CloseIcon } from "../icons/Close.svg";
+import { ReactComponent as ChevronBackIcon } from "../icons/ChevronBack.svg";
+import { ReactComponent as ArrowBackIcon } from "../icons/ArrowBack.svg";
+import { ReactComponent as ArrowForwardIcon } from "../icons/ArrowForward.svg";
 
 export function ObjectMenuButton({ children, className, ...rest }) {
   return (
@@ -18,22 +21,54 @@ ObjectMenuButton.propTypes = {
   children: PropTypes.node
 };
 
-export function ObjectMenu({ children, title, onClose }) {
+export function ObjectMenu({
+  children,
+  title,
+  onClose,
+  onBack,
+  onPrevObject,
+  onNextObject,
+  currentObjectIndex,
+  objectCount
+}) {
   return (
-    <div className={styles.objectMenu}>
-      <div className={styles.header}>
-        <IconButton className={styles.closeButton} onClick={onClose}>
-          <CloseIcon width={16} height={16} />
-        </IconButton>
-        <h1>{title}</h1>
+    <>
+      <IconButton className={styles.backButton} onClick={onBack}>
+        <ChevronBackIcon width={24} height={24} />
+      </IconButton>
+      <div className={styles.objectMenuContainer}>
+        <div className={styles.objectMenu}>
+          <div className={styles.header}>
+            <IconButton className={styles.closeButton} onClick={onClose}>
+              <CloseIcon width={16} height={16} />
+            </IconButton>
+            <h1>{title}</h1>
+          </div>
+          <div className={styles.menu}>{joinChildren(children, () => <div className={styles.separator} />)}</div>
+        </div>
+        <div className={styles.pagination}>
+          <IconButton onClick={onPrevObject}>
+            <ArrowBackIcon width={24} height={24} />
+          </IconButton>
+          <p>
+            {currentObjectIndex}/{objectCount}
+          </p>
+          <IconButton onClick={onNextObject}>
+            <ArrowForwardIcon width={24} height={24} />
+          </IconButton>
+        </div>
       </div>
-      <div className={styles.menu}>{joinChildren(children, () => <div className={styles.separator} />)}</div>
-    </div>
+    </>
   );
 }
 
 ObjectMenu.propTypes = {
+  currentObjectIndex: PropTypes.number.isRequired,
+  objectCount: PropTypes.number.isRequired,
+  onPrevObject: PropTypes.func,
+  onNextObject: PropTypes.func,
   children: PropTypes.node,
   title: PropTypes.node,
-  onClose: PropTypes.func
+  onClose: PropTypes.func,
+  onBack: PropTypes.func
 };
diff --git a/src/react-components/room/ObjectMenu.scss b/src/react-components/room/ObjectMenu.scss
@@ -1,14 +1,40 @@
 @use "../styles/theme.scss";
 
-:local(.object-menu) {
+:local(.back-button) {
+  position: absolute;
+  top: 16px;
+  left: 8px;
+  pointer-events: auto;
+
+  svg {
+    *[stroke=\#000] {
+      stroke: theme.$white;
+    }
+
+    *[fill=\#000] {
+      fill: theme.$white;
+    }
+  }
+
+  @media(min-width: theme.$breakpoint-md) {
+    display: none;
+  }
+}
+
+:local(.object-menu-container) {
   position: absolute;
   bottom: 16px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
-  background-color: rgba(0, 0, 0, 0.7);
   pointer-events: auto;
+}
+
+:local(.object-menu) {
+  display: flex;
+  flex-direction: column;
+  background-color: rgba(255, 255, 255, 0.3);
   width: max-content;
   color: theme.$white;
   border-radius: 12px;
@@ -22,6 +48,10 @@
       fill: theme.$white;
     }
   }
+
+  @media(min-width: theme.$breakpoint-md) {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
 }
 
 :local(.header) {
@@ -63,4 +93,31 @@
   width: 1px;
   margin: 0 4px;
   background-color: theme.$grey;
+}
+
+:local(.pagination) {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: theme.$white;
+  margin-top: 24px;
+  padding: 0 4px;
+
+  svg {
+    *[stroke=\#000] {
+      stroke: theme.$white;
+    }
+
+    *[fill=\#000] {
+      fill: theme.$white;
+    }
+  }
+}
+
+@media(max-width: theme.$breakpoint-md - 1) {
+  :global(.keyboard-user)  {
+    :local(.back-button):focus, :local(.pagination) :focus {
+      box-shadow: 0 0 0 3px theme.$white;
+    }
+  }
 }
diff --git a/src/react-components/room/ObjectMenu.stories.js b/src/react-components/room/ObjectMenu.stories.js
@@ -13,8 +13,9 @@ export default {
 
 export const Base = () => (
   <RoomLayout
+    objectFocused
     viewport={
-      <ObjectMenu title="Object">
+      <ObjectMenu title="Object" currentObjectIndex={1} objectCount={12}>
         <ObjectMenuButton>
           <PinIcon />
           <span>Pin</span>
@@ -38,8 +39,9 @@ export const Base = () => (
 
 export const WithSidebarOpen = () => (
   <RoomLayout
+    objectFocused
     viewport={
-      <ObjectMenu title="Object">
+      <ObjectMenu title="Object" currentObjectIndex={1} objectCount={12}>
         <ObjectMenuButton>
           <PinIcon />
           <span>Pin</span>