Merge pull request #1419 from cozy/upload-time-remaining

Add remaining time to individual uploads

react/ThresholdBar/index.jsx

@@ -11,13 +11,17 @@ import styles from './styles.styl'
  * - Otherwise, the bar is red an a tick indicates the threshold amount
  *   so that we see how far the threshold has been exceeded
  */
-function ThresholdBar({ threshold, value }) {
+function ThresholdBar({ threshold, value, className }) {
   const sup = value > threshold
   return (
     <div
-      className={cx(styles.ThresholdBar, {
-        [styles['ThresholdBar--exceeded']]: sup
-      })}
+      className={cx(
+        styles.ThresholdBar,
+        {
+          [styles['ThresholdBar--exceeded']]: sup
+        },
+        className
+      )}
     >
       <div className={styles.ThresholdBar__bg}>
         <div

react/UploadQueue/Readme.md

@@ -24,9 +24,11 @@ const data = {
     file: { name: 'Readme.txt' },
     progress: {
       loaded: 100,
-      total: 400
-      },
-      status: 'loading'
+      total: 400,
+      speed: 135000,
+      remainingTime: 90 
+    },
+    status: 'loading'
   }, {
     file: { name: 'File.jpg' },
     status: 'pending'

react/UploadQueue/index.jsx

@@ -3,11 +3,14 @@ import classNames from 'classnames'
 import { translate } from 'cozy-ui/react/I18n'
 import Icon from '../Icon'
 import Spinner from '../Spinner'
-import Stack from '../Stack'
 import withLocales from '../I18n/withLocales'
+import { useI18n } from '../I18n'
 import ThresholdBar from '../ThresholdBar'
+import { Caption } from '../Text'
 import palette from '../../stylus/settings/palette.json'
 import styles from './styles.styl'
+import formatDistanceToNow from 'date-fns/distance_in_words_to_now'
+import cx from 'classnames'
 
 import localeEn from './locales/en.json'
 import localeEs from './locales/es.json'
@@ -57,8 +60,37 @@ const Pending = translate()(props => (
   <span className={styles['item-pending']}>{props.t('item.pending')}</span>
 ))
 
+const formatRemainingTime = durationInSec => {
+  const later = Date.now() + durationInSec * 1000
+  return formatDistanceToNow(later)
+}
+
+const RemainingTime = ({ durationInSec }) => {
+  const { t } = useI18n()
+  return (
+    <Caption
+      className={cx(styles['upload-queue__progress-caption'], 'u-ellipsis')}
+    >
+      {t('item.remainingTime', {
+        time: formatRemainingTime(durationInSec)
+      })}
+    </Caption>
+  )
+}
+
 const FileUploadProgress = ({ progress }) => {
-  return <ThresholdBar threshold={progress.total} value={progress.loaded} />
+  return (
+    <div className={styles['upload-queue__upload-progress']}>
+      <ThresholdBar
+        className={styles['upload-queue__threshold-bar']}
+        threshold={progress.total}
+        value={progress.loaded}
+      />
+      {progress.remainingTime ? (
+        <RemainingTime durationInSec={progress.remainingTime} />
+      ) : null}
+    </div>
+  )
 }
 
 const Item = translate()(
@@ -77,9 +109,9 @@ const Item = translate()(
     const statusToUse = file.status ? file.status : status
 
     if (statusToUse === LOADING) {
-      statusIcon = (
+      statusIcon = !progress ? (
         <Spinner className="u-ml-half" color={palette['dodgerBlue']} />
-      )
+      ) : null
     } else if (statusToUse === CANCEL) {
       statusIcon = (
         <Icon className="u-ml-half" icon="cross" color={palette['monza']} />
@@ -114,15 +146,15 @@ const Item = translate()(
               className="u-flex-shrink-0 u-mr-1"
             />
           ) : null}
-          <Stack spacing="xs">
+          <div>
             <div data-test-id="upload-queue-item-name" className="u-ellipsis">
               {filename}
               {extension && (
                 <span className={styles['item-ext']}>{extension}</span>
               )}
             </div>
             {progress ? <FileUploadProgress progress={progress} /> : null}
-          </Stack>
+          </div>
         </div>
         <div className={styles['item-status']}>{statusIcon}</div>
       </div>

react/UploadQueue/locales/en.json

@@ -4,6 +4,7 @@
   "header_done": "Uploaded %{done} out of %{total} successfully",
   "close": "close",
   "item": {
-    "pending": "Pending"
+    "pending": "Pending",
+    "remainingTime": "%{time} remaining"
   }
 }

react/UploadQueue/locales/fr.json

@@ -4,6 +4,7 @@
   "header_done": "%{done} sur %{total} élément(s) importé(s)",
   "close": "Fermer",
   "item": {
-    "pending": "En attente"
+    "pending": "En attente",
+    "remainingTime": "%{time} restantes"
   }
 }

react/UploadQueue/styles.styl

@@ -4,6 +4,7 @@
 @require 'settings/breakpoints.styl'
 @require 'settings/z-index.styl'
 @require 'settings/spaces.styl'
+@require 'settings/typography.styl'
 
 $coz-bar-size=3rem
 
@@ -16,6 +17,20 @@ $coz-bar-size=3rem
     max-width 90%
     width    30rem
 
+.upload-queue__threshold-bar
+    min-width 10rem
+    margin-right 1rem
+
+.upload-queue__progress-caption
+    line-height $caption-font-size
+    height 1rem
+
+.upload-queue__upload-progress
+    justify-content center
+    align-items center
+    display flex
+    margin-top 0.125rem // Must tweak a bit the margin-top
+
 .upload-queue--popover
     @extend $popover
     position fixed

stylus/settings/typography.styl

@@ -0,0 +1,13 @@
+@require '../settings/breakpoints'
+@require '../tools/mixins'
+
+/*------------------------------------*\
+  Typography
+\*------------------------------------*/
+
+$h1-font-size=rem(24)
+$h2-font-size=rem(20)
+$h3-font-size=rem(18)
+$h4-font-size=rem(16)
+$text-font-size=rem(16)
+$caption-font-size=rem(12)

stylus/utilities/typography.styl

@@ -1,9 +1,4 @@
-@require '../settings/breakpoints'
-@require '../tools/mixins'
-
-/*------------------------------------*\
-  Typography
-\*------------------------------------*/
+@require '../settings/typography.styl'
 
 /*------------------------------------*\
   Titles
@@ -15,26 +10,26 @@ $title-default
 
 $title-h1
     @extend $title-default
-    font-size rem(24)
+    font-size $h1-font-size
     letter-spacing rem(-.2)
     +small-screen()
         font-size rem(20)
 
 $title-h2
     @extend $title-default
-    font-size rem(20)
+    font-size $h2-font-size
     +small-screen()
         font-size rem(18)
 
 $title-h3
     @extend $title-default
-    font-size rem(18)
+    font-size $h3-font-size
     +small-screen()
         font-size rem(16)
 
 $title-h4
     @extend $title-default
-    font-size rem(16)
+    font-size $h4-font-size
     +small-screen()
         font-weight bold
         color var(--charcoalGrey)
@@ -44,12 +39,12 @@ $title-h4
 \*------------------------------------*/
 
 $text
-    font-size rem(16)
+    font-size $text-font-size
     line-height 1.3
     color var(--charcoalGrey)
 
 $caption
-    font-size rem(12)
+    font-size $caption-font-size
     line-height 1.2
     color var(--coolGrey)