Rough style for new upload bar

This repurposes ProgressBar which was not used anywhere in code.

res/css/_common.scss

@@ -606,6 +606,13 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     }
 }
 
+@define-mixin ProgressBarBgColour $colour {
+    background-color: $colour;
+    &::-webkit-progress-bar {
+        background-color: $colour;
+    }
+}
+
 @define-mixin ProgressBarBorderRadius $radius {
     border-radius: $radius;
     &::-moz-progress-bar {

res/css/structures/_UploadBar.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2015, 2016 OpenMarket Ltd
+Copyright 2015, 2016, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,24 +15,15 @@ limitations under the License.
 */
 
 .mx_UploadBar {
-    position: relative;
-}
-
-.mx_UploadBar_uploadProgressOuter {
-    height: 5px;
-    margin-left: 63px;
-    margin-top: -1px;
-    padding-bottom: 5px;
-}
+    padding-left: 65px; // line up with the shield area in the composer
 
-.mx_UploadBar_uploadProgressInner {
-    background-color: $accent-color;
-    height: 5px;
+    .mx_ProgressBar {
+        width: calc(100% - 40px); // cheating at a right margin
+    }
 }
 
 .mx_UploadBar_uploadFilename {
     margin-top: 5px;
-    margin-left: 65px;
     opacity: 0.5;
     color: $primary-fg-color;
 }
@@ -52,10 +43,3 @@ limitations under the License.
     cursor: pointer;
     z-index: 1;
 }
-
-.mx_UploadBar_uploadBytes {
-    float: right;
-    margin-top: 5px;
-    margin-right: 30px;
-    color: $accent-color;
-}

res/css/views/elements/_ProgressBar.scss

@@ -1,5 +1,5 @@
 /*
-Copyright 2020 The Matrix.org Foundation C.I.C.
+Copyright 2020, 2021 The Matrix.org Foundation C.I.C.
 
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
@@ -15,15 +15,16 @@ limitations under the License.
 */
 
 progress.mx_ProgressBar {
-    height: 4px;
+    height: 6px;
     width: 60px;
-    border-radius: 10px;
+    border-radius: 6px;
     overflow: hidden;
     appearance: none;
-    border: 0;
+    border: none;
 
-    @mixin ProgressBarBorderRadius "10px";
-    @mixin ProgressBarColour $accent-color;
+    @mixin ProgressBarBorderRadius "6px";
+    @mixin ProgressBarColour $progressbar-fg-color;
+    @mixin ProgressBarBgColour $progressbar-bg-color;
     ::-webkit-progress-value {
         transition: width 1s;
     }

res/themes/dark/css/_dark.scss

@@ -173,6 +173,9 @@ $button-link-bg-color: transparent;
 // Toggle switch
 $togglesw-off-color: $room-highlight-color;
 
+$progressbar-fg-color: $accent-color;
+$progressbar-bg-color: #21262c;
+
 $visual-bell-bg-color: #800;
 
 $room-warning-bg-color: $header-panel-bg-color;

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -168,6 +168,9 @@ $button-link-bg-color: transparent;
 // Toggle switch
 $togglesw-off-color: $room-highlight-color;
 
+$progressbar-fg-color: $accent-color;
+$progressbar-bg-color: #21262c;
+
 $visual-bell-bg-color: #800;
 
 $room-warning-bg-color: $header-panel-bg-color;

res/themes/legacy-light/css/_legacy-light.scss

@@ -282,7 +282,8 @@ $togglesw-ball-color: #fff;
 $slider-selection-color: $accent-color;
 $slider-background-color: #c1c9d6;
 
-$progressbar-color: #000;
+$progressbar-fg-color: $accent-color;
+$progressbar-bg-color: rgba(141, 151, 165, 0.2);
 
 $room-warning-bg-color: $yellow-background;
 

res/themes/light/css/_light.scss

@@ -279,7 +279,8 @@ $togglesw-ball-color: #fff;
 $slider-selection-color: $accent-color;
 $slider-background-color: #c1c9d6;
 
-$progressbar-color: #000;
+$progressbar-fg-color: $accent-color;
+$progressbar-bg-color: rgba(141, 151, 165, 0.2);
 
 $room-warning-bg-color: $yellow-background;
 

src/components/structures/UploadBar.tsx

@@ -22,6 +22,7 @@ import { _t } from '../../languageHandler';
 import {Room} from "matrix-js-sdk/src/models/room";
 import {ActionPayload} from "../../dispatcher/payloads";
 import {Action} from "../../dispatcher/actions";
+import ProgressBar from "../views/elements/ProgressBar";
 
 interface IProps {
     room: Room;
@@ -68,48 +69,29 @@ export default class UploadBar extends React.Component<IProps, IState> {
         //     fileName: "testing_fooble.jpg",
         // }];
 
-        if (uploads.length == 0) {
-            return <div />;
+        const uploadsHere = uploads.filter(u => u.roomId === this.props.room.roomId);
+        if (uploadsHere.length == 0) {
+            return null;
         }
 
-        let upload;
-        for (let i = 0; i < uploads.length; ++i) {
-            if (uploads[i].roomId == this.props.room.roomId) {
-                upload = uploads[i];
-                break;
-            }
-        }
-        if (!upload) {
-            return <div />;
-        }
-
-        const innerProgressStyle = {
-            width: ((upload.loaded / (upload.total || 1)) * 100) + '%',
-        };
-        let uploadedSize = filesize(upload.loaded);
-        const totalSize = filesize(upload.total);
-        if (uploadedSize.replace(/^.* /, '') === totalSize.replace(/^.* /, '')) {
-            uploadedSize = uploadedSize.replace(/ .*/, '');
-        }
+        const currentUpload = uploadsHere[0];
+        const uploadSize = filesize(currentUpload.total);
 
         // MUST use var name 'count' for pluralization to kick in
         const uploadText = _t(
-            "Uploading %(filename)s and %(count)s others", {filename: upload.fileName, count: (uploads.length - 1)},
+            "Uploading %(filename)s and %(count)s others", {
+                filename: currentUpload.fileName,
+                count: uploadsHere.length - 1,
+            },
         );
 
         return (
             <div className="mx_UploadBar">
-                <div className="mx_UploadBar_uploadProgressOuter">
-                    <div className="mx_UploadBar_uploadProgressInner" style={innerProgressStyle}></div>
-                </div>
-                <img className="mx_UploadBar_uploadIcon mx_filterFlipColor" src={require("../../../res/img/fileicon.png")} width="17" height="22" />
                 <img className="mx_UploadBar_uploadCancel mx_filterFlipColor" src={require("../../../res/img/cancel.svg")} width="18" height="18"
-                    onClick={function() { ContentMessages.sharedInstance().cancelUpload(upload.promise); }}
+                    onClick={function() { ContentMessages.sharedInstance().cancelUpload(currentUpload.promise); }}
                 />
-                <div className="mx_UploadBar_uploadBytes">
-                    { uploadedSize } / { totalSize }
-                </div>
-                <div className="mx_UploadBar_uploadFilename">{ uploadText }</div>
+                <div className="mx_UploadBar_uploadFilename">{uploadText} ({uploadSize})</div>
+                <ProgressBar value={currentUpload.loaded} max={currentUpload.total} />
             </div>
         );
     }