Merge pull request #1757 from cozy/feat/viewer-mobile-footer

Add mobile actions footer on Viewer
cozy · Mar 4, 2021 · 28ea51c · 28ea51c
2 parents 9c1ae4b + ef728d4
commit 28ea51c
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 31 deletions.
diff --git a/assets/icons/ui/reply.svg b/assets/icons/ui/reply.svg
diff --git a/assets/icons/ui/share-ios.svg b/assets/icons/ui/share-ios.svg
diff --git a/docs/README.md b/docs/README.md
@@ -79,9 +79,8 @@ yarn watch:doc # Run the styleguide in watch mode
 If you want to add a new icon to cozy-ui, you must follow these steps:
 
 * Add the SVG in the `assets/icons` folder
-* Generate the react component, simply by running `scripts/generate-svgr-icon.sh`
-* Update this README by adding your icon in the list
-* Update the tests by running `yarn test --updateSnapshot`
+* Generate the react component, simply by running `yarn makeSvgr assets/icons/[new icon folder]/[new icon file name]`
+* Update the tests by running `yarn test -u`
 
 ### Develop inside an app
 

diff --git a/react/Icons/Reply.jsx b/react/Icons/Reply.jsx
@@ -0,0 +1,15 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/reply.svg` to regenerate;
+import React from 'react'
+
+function SvgReply(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        d="M10.054 4.266c-5.39.75-8.705 4.012-10.021 7.685-.184.513.45.912.851.542 2.155-2 5.465-2.93 9.17-2.93v2.496a.5.5 0 00.849.358l4.752-4.634a1.15 1.15 0 00.021-1.626l-4.773-4.655a.5.5 0 00-.849.358v2.406z"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+export default SvgReply
diff --git a/react/Icons/ShareIos.jsx b/react/Icons/ShareIos.jsx
@@ -0,0 +1,15 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/share-ios.svg` to regenerate;
+import React from 'react'
+
+function SvgShareIos(props) {
+  return (
+    <svg viewBox="0 0 16 16" {...props}>
+      <path
+        d="M5 6v2H3v6h10V8h-2V6h2a2 2 0 012 2v6a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h2zM8.707.293L11.5 3.086A1 1 0 0110.086 4.5L9 3.414V11a1 1 0 01-2 0V3.414L6 4.5a1 1 0 01-1.414-1.414L7.293.293a1 1 0 011.414 0z"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}
+
+export default SvgShareIos
diff --git a/react/Viewer/Footer.jsx b/react/Viewer/Footer.jsx
@@ -0,0 +1,14 @@
+import React from 'react'
+
+import useBreakpoints from '../hooks/useBreakpoints'
+
+import styles from './styles.styl'
+
+const Footer = ({ children }) => {
+  const { isMobile } = useBreakpoints()
+
+  if (!isMobile) return null
+  return <div className={styles['viewer-footer']}>{children}</div>
+}
+
+export default Footer
diff --git a/react/Viewer/Readme.md b/react/Viewer/Readme.md
@@ -5,23 +5,26 @@ Once rendered, the `Viewer` will take up all the available space in it's contain
 The `Viewer` can display an **information panel** to show additional information about the current file (e.g. whether a file is certified).
 
 ```jsx
-import Variants from 'docs/components/Variants';
-import Card from 'cozy-ui/transpiled/react/Card';
-import Checkbox from 'cozy-ui/transpiled/react/Checkbox';
-import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme';
-import Viewer from 'cozy-ui/transpiled/react/Viewer';
-import Stack from 'cozy-ui/transpiled/react/Stack';
-import Paper from 'cozy-ui/transpiled/react/Paper';
-import Typography from 'cozy-ui/transpiled/react/Typography';
-import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media';
-import Icon from 'cozy-ui/transpiled/react/Icon';
-import CarbonCopyIcon from 'cozy-ui/transpiled/react/Icons/CarbonCopy';
+import Variants from 'docs/components/Variants'
+import Card from 'cozy-ui/transpiled/react/Card'
+import Checkbox from 'cozy-ui/transpiled/react/Checkbox'
+import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme'
+import Viewer from 'cozy-ui/transpiled/react/Viewer'
+import Stack from 'cozy-ui/transpiled/react/Stack'
+import Paper from 'cozy-ui/transpiled/react/Paper'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import { Media, Img, Bd } from 'cozy-ui/transpiled/react/Media'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import CarbonCopyIcon from 'cozy-ui/transpiled/react/Icons/CarbonCopy'
 // The DemoProvider inserts a fake cozy-client in the React context.
-import DemoProvider from './docs/DemoProvider';
-import Overlay from 'cozy-ui/transpiled/react/Overlay';
+import DemoProvider from './docs/DemoProvider'
+import Overlay from 'cozy-ui/transpiled/react/Overlay'
 import {
   BreakpointsProvider
-} from 'cozy-ui/transpiled/react/hooks/useBreakpoints';
+} from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import Button from 'cozy-ui/transpiled/react/Button'
+import DownloadIcon from 'cozy-ui/transpiled/react/Icons/Download'
+import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
 
 // We provide a collection of (fake) io.cozy.files to be rendered
 const files = [
@@ -64,22 +67,22 @@ const files = [
     name: 'Unsupported file type',
     mime: '???/???'
   }
-];
+]
 
 // The host app will usually need a small wrapper to display the Viewer. This is a very small example of such a wrapper that handles opening, closing, and navigating between files.
 initialState = {
   viewerOpened: isTesting(),
   currentIndex: 0,
   showToolbarCloseButton: true
-};
+}
 
 const initialVariants = [
   { navigation: true, toolbar: true }
-];
+]
 
-const toggleViewer = () => setState({ viewerOpened: !state.viewerOpened });
-const handleToggleToolbarClose = () => setState({ showToolbarCloseButton: !state.showToolbarCloseButton });
-const onFileChange = (file, nextIndex) => setState({ currentIndex: nextIndex });
+const toggleViewer = () => setState({ viewerOpened: !state.viewerOpened })
+const handleToggleToolbarClose = () => setState({ showToolbarCloseButton: !state.showToolbarCloseButton })
+const onFileChange = (file, nextIndex) => setState({ currentIndex: nextIndex })
 
 const PanelContent = ({ file }) => {
   return (
@@ -108,7 +111,29 @@ const PanelContent = ({ file }) => {
       </Paper>
     </Stack>
   )
-};
+}
+
+const FooterContent = () => {
+  return (
+    <>
+      <Button
+        className="u-mr-half"
+        extension="full"
+        theme="secondary"
+        icon={ShareIcon}
+        label="Share"
+      />
+      <Button
+        extension="full"
+        theme="secondary"
+        icon={DownloadIcon}
+        label="Download"
+      />
+    </>
+  )
+}
+
+;
 
 <MuiCozyTheme>
   <BreakpointsProvider>
@@ -144,6 +169,9 @@ const PanelContent = ({ file }) => {
                       showPanel: ({ file }) => file.class === "pdf" || file.class === "audio",
                       PanelContent
                     }}
+                    footerProps={{
+                      FooterContent
+                    }}
                   />
                 </Overlay>
               )}

diff --git a/react/Viewer/controls.styl b/react/Viewer/controls.styl
@@ -4,6 +4,7 @@
 
 $toolbarHeight = 4rem
 $toolbarHeightMedium = 3rem
+$footerHeight = 3.5rem
 
 .viewer-controls
     position relative
@@ -77,5 +78,19 @@ $toolbarHeightMedium = 3rem
         height $toolbarHeightMedium
 
     +small-screen()
-        background var(--white)
-        border-bottom 1px solid var(--silver)
+        background var(--paperColor)
+        border-bottom 1px solid var(--dividerColor)
+
+.viewer-footer
+    position fixed
+    bottom 0
+    z-index $modal-index + 1
+    display flex
+    flex-shrink 0
+    justify-content flex-start
+    align-items center
+    width calc(100% - 2rem)
+    height $footerHeight
+    padding 0 1rem env(safe-area-inset-bottom)
+    background var(--paperColor)
+    border-top 1px solid var(--dividerColor)
diff --git a/react/Viewer/index.jsx b/react/Viewer/index.jsx
@@ -17,6 +17,7 @@ import PdfMobileViewer from './PdfMobileViewer'
 import NoViewer from './NoViewer'
 import ShortcutViewer from './ShortcutViewer'
 import InformationPanel from './InformationPanel'
+import Footer from './Footer'
 
 const KEY_CODE_LEFT = 37
 const KEY_CODE_RIGHT = 39
@@ -113,7 +114,8 @@ export class Viewer extends Component {
       toolbarProps,
       panelInfoProps,
       showNavigation,
-      breakpoints: { isDesktop }
+      breakpoints: { isDesktop },
+      footerProps
     } = this.props
     const currentFile = files[currentIndex]
     const fileCount = files.length
@@ -142,6 +144,11 @@ export class Viewer extends Component {
         >
           {this.renderViewer(currentFile, isDesktop)}
         </ViewerControls>
+        {footerProps && (
+          <Footer>
+            <footerProps.FooterContent file={currentFile} />
+          </Footer>
+        )}
         {showInfoPanel && (
           <InformationPanel>
             <panelInfoProps.PanelContent file={currentFile} />
@@ -179,6 +186,10 @@ Viewer.propTypes = {
     showPanel: PropTypes.func,
     /** Content to be shown  */
     PanelContent: PropTypes.func
+  }),
+  /** File actions on mobile (to share or download the file, for example) */
+  footerProps: PropTypes.shape({
+    footerContent: PropTypes.elementType
   })
 }
 

diff --git a/react/Viewer/styles.styl b/react/Viewer/styles.styl
@@ -3,6 +3,9 @@
 @require 'settings/z-index.styl'
 @require './controls.styl'
 
+$viewerHeightMedium = $toolbarHeightMedium + $footerHeight
+$viewerMarginTopMedium = $toolbarHeightMedium - $footerHeight
+
 .viewer-wrapper
     position        absolute
     left            0
@@ -40,8 +43,8 @@
     +medium-screen()
         margin-left      0
         width            100%
-        max-height       'calc(100% - %s)' % $toolbarHeightMedium
-        margin-top       $toolbarHeightMedium
+        max-height       'calc(100% - %s)' % $viewerHeightMedium
+        margin-top       $viewerMarginTopMedium
 
 // rules for specific viewers below
 
@@ -96,8 +99,8 @@
 
 .viewer-pdfMobile
     width 100%
-    height 'calc(100% - %s)' % $toolbarHeightMedium
-    margin-top $toolbarHeightMedium
+    height 'calc(100% - %s)' % $viewerHeightMedium
+    margin-top $viewerMarginTopMedium
 
     &--image
         width 100%
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
@@ -3253,6 +3253,11 @@ exports[`Icon should render examples: Icon 1`] = `
         <symbol id=\\"repare\\" viewBox=\\"0 0 16 16\\">
           <path fill-rule=\\"evenodd\\" d=\\"M15.493 2.49L13 5h-2V3L13.556.501c-1.722-.88-3.914-.601-5.356.84a4.587 4.587 0 0 0-.854 5.327l-6.93 6.926a1.408 1.408 0 1 0 1.989 1.993l6.922-6.924a4.582 4.582 0 0 0 6.166-6.173z\\"></path>
         </symbol>
+        <symbol id=\\"reply\\" viewBox=\\"0 0 16 16\\">
+          <g fill-rule=\\"evenodd\\">
+            <path id=\\"w2s7pgbo5a\\" d=\\"M10.054 4.266c-5.39.75-8.705 4.012-10.021 7.685-.184.513.45.912.851.542 2.155-2 5.465-2.93 9.17-2.93v2.496c0 .276.224.5.5.5.13 0 .255-.051.349-.142l4.752-4.634c.455-.443.464-1.171.021-1.626l-4.773-4.655c-.198-.193-.514-.189-.707.009-.091.093-.142.219-.142.349v2.406z\\"></path>
+          </g>
+        </symbol>
         <symbol id=\\"restore\\" viewBox=\\"0 0 16 16\\">
           <g fill-rule=\\"evenodd\\" transform=\\"translate(1 2)\\">
             <path d=\\"M-1.33226763e-14,13 L6.02479339,13 L8,13 C12.0522847,13 15,10.0522847 15,6 C15,1.94771525 12.0522847,-1 8,-1 C3.94771525,-1 1,1.94771525 1,6 C1,6.55228475 1.44771525,7 2,7 C2.55228475,7 3,6.55228475 3,6 C3,3.05228475 5.05228475,1 8,1 C10.9477153,1 13,3.05228475 13,6 C13,8.94771525 10.9477153,11 8,11 L-1.57651669e-14,11 C-0.55228475,11 -1,11.4477153 -1,12 C-1,12.5522847 -0.55228475,13 -1.33226763e-14,13 Z\\"></path>
@@ -3286,6 +3291,11 @@ exports[`Icon should render examples: Icon 1`] = `
         <symbol id=\\"share-circle\\" viewBox=\\"0 0 16 16\\">
           <path fill-rule=\\"evenodd\\" d=\\"M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM6.541 6.92a1.5 1.5 0 1 0 0 2.16l2.47 1.235a1.5 1.5 0 1 0 .447-.894l-2.47-1.236a1.515 1.515 0 0 0 0-.37l2.47-1.235a1.5 1.5 0 1 0-.447-.894L6.541 6.92z\\"></path>
         </symbol>
+        <symbol id=\\"share-ios\\" viewBox=\\"0 0 16 16\\">
+          <g fill-rule=\\"evenodd\\">
+            <path d=\\"M5 6v2H3v6h10V8h-2V6h2c1.105 0 2 .895 2 2v6c0 1.105-.895 2-2 2H3c-1.105 0-2-.895-2-2V8c0-1.105.895-2 2-2h2zM8.707.293L11.5 3.086c.39.39.39 1.023 0 1.414-.39.39-1.024.39-1.414 0L9 3.414V11c0 .552-.448 1-1 1s-1-.448-1-1V3.414L6 4.5c-.39.39-1.024.39-1.414 0-.39-.39-.39-1.024 0-1.414L7.293.293c.39-.39 1.024-.39 1.414 0z\\"></path>
+          </g>
+        </symbol>
         <symbol id=\\"share\\" viewBox=\\"0 0 16 16\\">
           <g fill-rule=\\"evenodd\\" transform=\\"translate(-160 -32)\\">
             <path d=\\"M165.082611,42.1593397 C164.543049,42.6798471 163.808912,43 163,43 C161.343146,43 160,41.6568542 160,40 C160,38.3431458 161.343146,37 163,37 C163.808912,37 164.543049,37.3201529 165.082611,37.8406603 L170.022669,35.3706317 C170.007705,35.2491857 170,35.1254927 170,35 C170,33.3431458 171.343146,32 173,32 C174.656854,32 176,33.3431458 176,35 C176,36.6568542 174.656854,38 173,38 C172.191088,38 171.456951,37.6798471 170.917389,37.1593397 L165.977331,39.6293683 C165.992295,39.7508143 166,39.8745073 166,40 C166,40.1254927 165.992295,40.2491857 165.977331,40.3706317 L170.917389,42.8406603 C171.456951,42.3201529 172.191088,42 173,42 C174.656854,42 176,43.3431458 176,45 C176,46.6568542 174.656854,48 173,48 C171.343146,48 170,46.6568542 170,45 C170,44.8745073 170.007705,44.7508143 170.022669,44.6293683 L165.082611,42.1593397 Z\\"></path>
@@ -4271,6 +4281,11 @@ exports[`Icon should render examples: Icon 2`] = `
         <symbol id=\\"repare\\" viewBox=\\"0 0 16 16\\">
           <path fill-rule=\\"evenodd\\" d=\\"M15.493 2.49L13 5h-2V3L13.556.501c-1.722-.88-3.914-.601-5.356.84a4.587 4.587 0 0 0-.854 5.327l-6.93 6.926a1.408 1.408 0 1 0 1.989 1.993l6.922-6.924a4.582 4.582 0 0 0 6.166-6.173z\\"></path>
         </symbol>
+        <symbol id=\\"reply\\" viewBox=\\"0 0 16 16\\">
+          <g fill-rule=\\"evenodd\\">
+            <path id=\\"w2s7pgbo5a\\" d=\\"M10.054 4.266c-5.39.75-8.705 4.012-10.021 7.685-.184.513.45.912.851.542 2.155-2 5.465-2.93 9.17-2.93v2.496c0 .276.224.5.5.5.13 0 .255-.051.349-.142l4.752-4.634c.455-.443.464-1.171.021-1.626l-4.773-4.655c-.198-.193-.514-.189-.707.009-.091.093-.142.219-.142.349v2.406z\\"></path>
+          </g>
+        </symbol>
         <symbol id=\\"restore\\" viewBox=\\"0 0 16 16\\">
           <g fill-rule=\\"evenodd\\" transform=\\"translate(1 2)\\">
             <path d=\\"M-1.33226763e-14,13 L6.02479339,13 L8,13 C12.0522847,13 15,10.0522847 15,6 C15,1.94771525 12.0522847,-1 8,-1 C3.94771525,-1 1,1.94771525 1,6 C1,6.55228475 1.44771525,7 2,7 C2.55228475,7 3,6.55228475 3,6 C3,3.05228475 5.05228475,1 8,1 C10.9477153,1 13,3.05228475 13,6 C13,8.94771525 10.9477153,11 8,11 L-1.57651669e-14,11 C-0.55228475,11 -1,11.4477153 -1,12 C-1,12.5522847 -0.55228475,13 -1.33226763e-14,13 Z\\"></path>
@@ -4304,6 +4319,11 @@ exports[`Icon should render examples: Icon 2`] = `
         <symbol id=\\"share-circle\\" viewBox=\\"0 0 16 16\\">
           <path fill-rule=\\"evenodd\\" d=\\"M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM6.541 6.92a1.5 1.5 0 1 0 0 2.16l2.47 1.235a1.5 1.5 0 1 0 .447-.894l-2.47-1.236a1.515 1.515 0 0 0 0-.37l2.47-1.235a1.5 1.5 0 1 0-.447-.894L6.541 6.92z\\"></path>
         </symbol>
+        <symbol id=\\"share-ios\\" viewBox=\\"0 0 16 16\\">
+          <g fill-rule=\\"evenodd\\">
+            <path d=\\"M5 6v2H3v6h10V8h-2V6h2c1.105 0 2 .895 2 2v6c0 1.105-.895 2-2 2H3c-1.105 0-2-.895-2-2V8c0-1.105.895-2 2-2h2zM8.707.293L11.5 3.086c.39.39.39 1.023 0 1.414-.39.39-1.024.39-1.414 0L9 3.414V11c0 .552-.448 1-1 1s-1-.448-1-1V3.414L6 4.5c-.39.39-1.024.39-1.414 0-.39-.39-.39-1.024 0-1.414L7.293.293c.39-.39 1.024-.39 1.414 0z\\"></path>
+          </g>
+        </symbol>
         <symbol id=\\"share\\" viewBox=\\"0 0 16 16\\">
           <g fill-rule=\\"evenodd\\" transform=\\"translate(-160 -32)\\">
             <path d=\\"M165.082611,42.1593397 C164.543049,42.6798471 163.808912,43 163,43 C161.343146,43 160,41.6568542 160,40 C160,38.3431458 161.343146,37 163,37 C163.808912,37 164.543049,37.3201529 165.082611,37.8406603 L170.022669,35.3706317 C170.007705,35.2491857 170,35.1254927 170,35 C170,33.3431458 171.343146,32 173,32 C174.656854,32 176,33.3431458 176,35 C176,36.6568542 174.656854,38 173,38 C172.191088,38 171.456951,37.6798471 170.917389,37.1593397 L165.977331,39.6293683 C165.992295,39.7508143 166,39.8745073 166,40 C166,40.1254927 165.992295,40.2491857 165.977331,40.3706317 L170.917389,42.8406603 C171.456951,42.3201529 172.191088,42 173,42 C174.656854,42 176,43.3431458 176,45 C176,46.6568542 174.656854,48 173,48 C171.343146,48 170,46.6568542 170,45 C170,44.8745073 170.007705,44.7508143 170.022669,44.6293683 L165.082611,42.1593397 Z\\"></path>