Minor improvements and layout adjustments

changelog/unreleased/enhancement-upload-time-estimation

@@ -0,0 +1,6 @@
+Enhancement: Upload time estimation
+
+The estimated remaining time for an upload will now be displayed in the upload overlay.
+
+https://github.com/owncloud/web/pull/7088
+https://github.com/owncloud/web/issues/7066

packages/web-runtime/src/components/UploadInfo.vue

@@ -18,10 +18,15 @@
         <oc-icon name="close" />
       </oc-button>
     </div>
-    <div class="upload-info-status oc-p-m oc-flex oc-flex-between oc-flex-bottom">
-      <div v-if="runningUploads" class="upload-info-progress oc-mb-xs">
+    <div
+      class="upload-info-status oc-px-m oc-pt-m oc-flex oc-flex-between oc-flex-middle"
+      :class="{
+        'oc-pb-m': !runningUploads
+      }"
+    >
+      <div v-if="runningUploads">
+        <oc-spinner size="small" class="oc-mr-s" />
         <span class="oc-text-small oc-text-muted" v-text="remainingTime" />
-        <oc-progress :value="totalProgress" :max="100" />
       </div>
       <div
         v-else
@@ -72,6 +77,9 @@
         </oc-button>
       </div>
     </div>
+    <div v-if="runningUploads" class="upload-info-progress oc-mx-m oc-mb-m oc-mt-s">
+      <oc-progress :value="totalProgress" :max="100" size="small" />
+    </div>
     <div v-if="infoExpanded" class="upload-info-items oc-px-m oc-pb-m">
       <ul class="oc-list">
         <li
@@ -145,7 +153,6 @@ export default {
     bytesTotal: 0,
     bytesUploaded: 0,
     filesInEstimation: {},
-    estimatedTime: 0,
     timeStarted: null,
     remainingTime: undefined
   }),
@@ -201,6 +208,11 @@ export default {
   },
   created() {
     this.$uppyService.subscribe('uploadStarted', () => {
+      if (!Object.keys(this.filesInEstimation).length) {
+        this.timeStarted = new Date()
+        this.remainingTime = this.$gettext('Calculating estimated time...')
+      }
+
       // No upload in progress -> clean overlay
       if (!this.runningUploads && this.showInfo) {
         this.cleanOverlay()
@@ -243,11 +255,6 @@ export default {
       this.totalProgress = value
     })
     this.$uppyService.subscribe('upload-progress', ({ file, progress }) => {
-      if (!Object.keys(this.filesInEstimation).length) {
-        this.timeStarted = new Date()
-        this.remainingTime = this.$gettext('Calculating estimated time...')
-      }
-
       if (this.filesInEstimation[file.meta.uploadId] === undefined) {
         this.filesInEstimation[file.meta.uploadId] = 0
         this.bytesTotal += progress.bytesTotal
@@ -259,6 +266,9 @@ export default {
 
       const timeElapsed = new Date() - this.timeStarted
       const progressPercent = (100 * this.bytesUploaded) / this.bytesTotal
+      if (progressPercent === 0) {
+        return
+      }
       const totalTimeNeededInMilliseconds = (timeElapsed / progressPercent) * 100
       const remainingMilliseconds = totalTimeNeededInMilliseconds - timeElapsed
 
@@ -331,11 +341,6 @@ export default {
   },
   methods: {
     getRemainingTime(remainingMilliseconds) {
-      const roundedRemainingSeconds = Math.round(remainingMilliseconds / 1000)
-      if (roundedRemainingSeconds >= 30 && roundedRemainingSeconds < 60) {
-        return this.$gettext('1 minute left')
-      }
-
       const roundedRemainingMinutes = Math.round(remainingMilliseconds / 1000 / 60)
       if (roundedRemainingMinutes >= 1 && roundedRemainingMinutes < 60) {
         return this.$gettextInterpolate(
@@ -393,7 +398,6 @@ export default {
       this.bytesTotal = 0
       this.bytesUploaded = 0
       this.filesInEstimation = {}
-      this.estimatedTime = 0
       this.timeStarted = null
       this.remainingTime = undefined
     },
@@ -524,9 +528,6 @@ export default {
     overflow-y: auto;
   }
 
-  .upload-info-progress {
-    width: 50%;
-  }
   .upload-info-danger {
     color: var(--oc-color-swatch-danger-default);
   }