Merge pull request #1784 from cozy/feat/viewer

feat: Viewer on tablet is now like on mobile
cozy · Mar 25, 2021 · c30b2b4 · c30b2b4
2 parents ab1c5de + 9d28cf8
commit c30b2b4
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 14 deletions.
diff --git a/react/Viewer/Footer.jsx b/react/Viewer/Footer.jsx
@@ -5,9 +5,9 @@ import useBreakpoints from '../hooks/useBreakpoints'
 import styles from './styles.styl'
 
 const Footer = ({ children }) => {
-  const { isMobile } = useBreakpoints()
+  const { isDesktop } = useBreakpoints()
 
-  if (!isMobile) return null
+  if (isDesktop) return null
   return <div className={styles['viewer-footer']}>{children}</div>
 }
 

diff --git a/react/Viewer/Toolbar.jsx b/react/Viewer/Toolbar.jsx
@@ -35,7 +35,7 @@ const Toolbar = ({
   toolbarRef
 }) => {
   const client = useClient()
-  const { isMobile } = useBreakpoints()
+  const { isDesktop } = useBreakpoints()
   const classes = useClasses()
 
   return (
@@ -51,16 +51,21 @@ const Toolbar = ({
       {onClose && (
         <IconButton
           onClick={onClose}
-          className={cx(classes.iconButton, { 'u-white': !isMobile })}
+          className={cx(classes.iconButton, { 'u-white': isDesktop })}
         >
           <Icon icon={PreviousIcon} />
         </IconButton>
       )}
-      <Typography className="u-pl-half" variant="h3" color="inherit" noWrap>
+      <Typography
+        className="u-pl-half"
+        variant="h3"
+        color={isDesktop ? 'inherit' : 'textPrimary'}
+        noWrap
+      >
         {file.name}
       </Typography>
       <div className="u-ml-auto u-ph-1">
-        {!isMobile && (
+        {isDesktop && (
           <Button
             className="u-white"
             icon={DownloadIcon}

diff --git a/react/Viewer/ViewerControls.jsx b/react/Viewer/ViewerControls.jsx
@@ -112,7 +112,7 @@ class ViewerControls extends Component {
       showInfoPanel,
       children,
       classes,
-      breakpoints: { isMobile }
+      breakpoints: { isDesktop }
     } = this.props
     const { showToolbar, showClose, toolbarRef } = toolbarProps
     const { hidden } = this.state
@@ -136,7 +136,7 @@ class ViewerControls extends Component {
             onMouseLeave={this.hideControls}
           />
         )}
-        {showNavigation && !isMobile && hasPrevious && (
+        {showNavigation && isDesktop && hasPrevious && (
           <Navigation
             className={styles['viewer-nav--previous']}
             hidden={hidden}
@@ -146,7 +146,7 @@ class ViewerControls extends Component {
           />
         )}
         {this.renderChildren(children)}
-        {showNavigation && !isMobile && hasNext && (
+        {showNavigation && isDesktop && hasNext && (
           <Navigation
             className={styles['viewer-nav--next']}
             hidden={hidden}

diff --git a/react/Viewer/ViewerSpinner.jsx b/react/Viewer/ViewerSpinner.jsx
@@ -4,14 +4,14 @@ import useBreakpoints from '../hooks/useBreakpoints'
 import Spinner from '../Spinner'
 
 const ViewerSpinner = () => {
-  const { isMobile } = useBreakpoints()
+  const { isDesktop } = useBreakpoints()
 
   return (
     <Spinner
       size="xxlarge"
       middle
       noMargin
-      {...(!isMobile && { color: 'white' })}
+      {...(isDesktop && { color: 'white' })}
     />
   )
 }

diff --git a/react/Viewer/controls.styl b/react/Viewer/controls.styl
@@ -78,8 +78,6 @@ $footerHeight = 3.5rem
         height $toolbarHeightMedium
         width calc(100% - 1rem)
         padding 0 1rem 0 0
-
-    +small-screen()
         background var(--paperBackgroundColor)
         border-bottom 1px solid var(--dividerColor)
 

diff --git a/react/Viewer/styles.styl b/react/Viewer/styles.styl
@@ -17,7 +17,7 @@ $viewerMarginTopMedium = $toolbarHeightMedium - $footerHeight
     background      var(--charcoalGrey)
     color           var(--white)
 
-    +small-screen()
+    +medium-screen()
         color var(--charcoalGrey)
         background var(--white)