From 711181cc695dabca5c46578a514b6dae97dd55da Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 5 Mar 2021 14:14:43 -0700 Subject: [PATCH] Rough style for new upload bar This repurposes ProgressBar which was not used anywhere in code. --- res/css/_common.scss | 7 +++ res/css/structures/_UploadBar.scss | 26 +++-------- res/css/views/elements/_ProgressBar.scss | 13 +++--- res/themes/dark/css/_dark.scss | 3 ++ res/themes/legacy-dark/css/_legacy-dark.scss | 3 ++ .../legacy-light/css/_legacy-light.scss | 3 +- res/themes/light/css/_light.scss | 3 +- src/components/structures/UploadBar.tsx | 44 ++++++------------- 8 files changed, 42 insertions(+), 60 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index 6e9d252659..8ae1cc6641 100644 --- a/res/css/_common.scss +++ b/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 { diff --git a/res/css/structures/_UploadBar.scss b/res/css/structures/_UploadBar.scss index d76c81668c..ce884e27a9 100644 --- a/res/css/structures/_UploadBar.scss +++ b/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; -} + padding-left: 65px; // line up with the shield area in the composer -.mx_UploadBar_uploadProgressOuter { - height: 5px; - margin-left: 63px; - margin-top: -1px; - padding-bottom: 5px; -} - -.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; -} diff --git a/res/css/views/elements/_ProgressBar.scss b/res/css/views/elements/_ProgressBar.scss index e49d85af04..5598ddba20 100644 --- a/res/css/views/elements/_ProgressBar.scss +++ b/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; } diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 0de5e69782..4b8c17fc78 100644 --- a/res/themes/dark/css/_dark.scss +++ b/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; diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 8c5f20178b..892f63a2c7 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/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; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index 3ba10a68ea..28e8ed9ea1 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/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; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index b6906d16be..b118062e30 100644 --- a/res/themes/light/css/_light.scss +++ b/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; diff --git a/src/components/structures/UploadBar.tsx b/src/components/structures/UploadBar.tsx index f60e28b333..3933ef0f9e 100644 --- a/src/components/structures/UploadBar.tsx +++ b/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 { // fileName: "testing_fooble.jpg", // }]; - if (uploads.length == 0) { - return
; + 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
; - } - - 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 (
-
-
-
- -
- { uploadedSize } / { totalSize } -
-
{ uploadText }
+
{uploadText} ({uploadSize})
+
); }