From 9008b862c88121d076530bac473399a0249ab2e3 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Sat, 28 Mar 2020 10:41:47 +0100 Subject: [PATCH 1/5] feat: Threshold bar can take a className --- react/ThresholdBar/index.jsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/react/ThresholdBar/index.jsx b/react/ThresholdBar/index.jsx index 9a28d37aeb..80c6420181 100644 --- a/react/ThresholdBar/index.jsx +++ b/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 (
Date: Sat, 28 Mar 2020 10:42:00 +0100 Subject: [PATCH 2/5] feat: Upload queue displays remaining time --- react/UploadQueue/Readme.md | 8 +++++--- react/UploadQueue/index.jsx | 26 +++++++++++++++++++++++++- react/UploadQueue/locales/en.json | 3 ++- react/UploadQueue/locales/fr.json | 3 ++- react/UploadQueue/styles.styl | 13 +++++++++++++ 5 files changed, 47 insertions(+), 6 deletions(-) diff --git a/react/UploadQueue/Readme.md b/react/UploadQueue/Readme.md index f0a1b6b540..89f495ca78 100644 --- a/react/UploadQueue/Readme.md +++ b/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' diff --git a/react/UploadQueue/index.jsx b/react/UploadQueue/index.jsx index f4ec66b5ba..d400aead92 100644 --- a/react/UploadQueue/index.jsx +++ b/react/UploadQueue/index.jsx @@ -5,9 +5,12 @@ 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 localeEn from './locales/en.json' import localeEs from './locales/es.json' @@ -57,8 +60,29 @@ const Pending = translate()(props => ( {props.t('item.pending')} )) +const formatRemainingTime = durationInSec => { + const later = Date.now() + durationInSec * 1000 + return formatDistanceToNow(later) +} + const FileUploadProgress = ({ progress }) => { - return + const { t } = useI18n() + return ( +
+ + {progress.remainingTime ? ( + + {t('item.remainingTime', { + time: formatRemainingTime(progress.remainingTime) + })} + + ) : null} +
+ ) } const Item = translate()( diff --git a/react/UploadQueue/locales/en.json b/react/UploadQueue/locales/en.json index 5aabcc47dd..43a9729d06 100644 --- a/react/UploadQueue/locales/en.json +++ b/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" } } diff --git a/react/UploadQueue/locales/fr.json b/react/UploadQueue/locales/fr.json index c0fd9297ff..cb679a28ab 100644 --- a/react/UploadQueue/locales/fr.json +++ b/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" } } diff --git a/react/UploadQueue/styles.styl b/react/UploadQueue/styles.styl index 96a182db0a..3dab58893c 100644 --- a/react/UploadQueue/styles.styl +++ b/react/UploadQueue/styles.styl @@ -16,6 +16,19 @@ $coz-bar-size=3rem max-width 90% width 30rem +.upload-queue__threshold-bar + min-width 10rem + margin-right 1rem + +.upload-queue__progress-caption + height 0 + margin-top -1rem + +.upload-queue__upload-progress + justify-content center + align-items center + display flex + .upload-queue--popover @extend $popover position fixed From 533f800dc138743abf12f2a066be7b5e6e8b30db Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Thu, 2 Apr 2020 11:51:51 +0200 Subject: [PATCH 3/5] refactor: Extract RemainingTime - Add ellipsis to remaining time - Since we have ellipsis, we cannot have a height of 0 so we set it to the line-height of Caption --- react/UploadQueue/index.jsx | 25 +++++++++++++++++-------- react/UploadQueue/styles.styl | 5 +++-- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/react/UploadQueue/index.jsx b/react/UploadQueue/index.jsx index d400aead92..b9e4332bb3 100644 --- a/react/UploadQueue/index.jsx +++ b/react/UploadQueue/index.jsx @@ -11,6 +11,7 @@ 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' @@ -65,8 +66,20 @@ const formatRemainingTime = durationInSec => { return formatDistanceToNow(later) } -const FileUploadProgress = ({ progress }) => { +const RemainingTime = ({ durationInSec }) => { const { t } = useI18n() + return ( + + {t('item.remainingTime', { + time: formatRemainingTime(durationInSec) + })} + + ) +} + +const FileUploadProgress = ({ progress }) => { return (
{ value={progress.loaded} /> {progress.remainingTime ? ( - - {t('item.remainingTime', { - time: formatRemainingTime(progress.remainingTime) - })} - + ) : null}
) @@ -101,9 +110,9 @@ const Item = translate()( const statusToUse = file.status ? file.status : status if (statusToUse === LOADING) { - statusIcon = ( + statusIcon = !progress ? ( - ) + ) : null } else if (statusToUse === CANCEL) { statusIcon = ( diff --git a/react/UploadQueue/styles.styl b/react/UploadQueue/styles.styl index 3dab58893c..5bcfe92e78 100644 --- a/react/UploadQueue/styles.styl +++ b/react/UploadQueue/styles.styl @@ -21,13 +21,14 @@ $coz-bar-size=3rem margin-right 1rem .upload-queue__progress-caption - height 0 - margin-top -1rem + line-height .75rem + 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 From 8cf927816785835b9244ccd266202c5f46f9852d Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Fri, 3 Apr 2020 17:43:19 +0200 Subject: [PATCH 4/5] refactor: Use stylus variable for caption height --- react/UploadQueue/styles.styl | 3 ++- stylus/settings/typography.styl | 13 +++++++++++++ stylus/utilities/typography.styl | 19 +++++++------------ 3 files changed, 22 insertions(+), 13 deletions(-) create mode 100644 stylus/settings/typography.styl diff --git a/react/UploadQueue/styles.styl b/react/UploadQueue/styles.styl index 5bcfe92e78..2536565946 100644 --- a/react/UploadQueue/styles.styl +++ b/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 @@ -21,7 +22,7 @@ $coz-bar-size=3rem margin-right 1rem .upload-queue__progress-caption - line-height .75rem + line-height $caption-font-size height 1rem .upload-queue__upload-progress diff --git a/stylus/settings/typography.styl b/stylus/settings/typography.styl new file mode 100644 index 0000000000..e27c96772a --- /dev/null +++ b/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) diff --git a/stylus/utilities/typography.styl b/stylus/utilities/typography.styl index 3fa857c790..698fd38251 100644 --- a/stylus/utilities/typography.styl +++ b/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) From 427a83cfef1fa5509d9d8f0ec3bb2c0d00a824c2 Mon Sep 17 00:00:00 2001 From: Patrick Browne Date: Fri, 3 Apr 2020 17:46:50 +0200 Subject: [PATCH 5/5] feat: Remove Stack since remaining time text "creates" the margin --- react/UploadQueue/index.jsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/react/UploadQueue/index.jsx b/react/UploadQueue/index.jsx index b9e4332bb3..40b5819754 100644 --- a/react/UploadQueue/index.jsx +++ b/react/UploadQueue/index.jsx @@ -3,7 +3,6 @@ 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' @@ -147,7 +146,7 @@ const Item = translate()( className="u-flex-shrink-0 u-mr-1" /> ) : null} - +
{filename} {extension && ( @@ -155,7 +154,7 @@ const Item = translate()( )}
{progress ? : null} - +
{statusIcon}