From ae9618367eef5a4c6a429f101ee5f1b424c50d1d Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 5 Mar 2021 13:06:53 -0700 Subject: [PATCH 1/6] Convert UploadBar to TypeScript --- .../{UploadBar.js => UploadBar.tsx} | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) rename src/components/structures/{UploadBar.js => UploadBar.tsx} (90%) diff --git a/src/components/structures/UploadBar.js b/src/components/structures/UploadBar.tsx similarity index 90% rename from src/components/structures/UploadBar.js rename to src/components/structures/UploadBar.tsx index 16cc4cb987..27d6746698 100644 --- a/src/components/structures/UploadBar.js +++ b/src/components/structures/UploadBar.tsx @@ -1,6 +1,5 @@ /* -Copyright 2015, 2016 OpenMarket Ltd -Copyright 2019 The Matrix.org Foundation C.I.C. +Copyright 2015, 2016, 2019, 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. @@ -16,16 +15,22 @@ limitations under the License. */ import React from 'react'; -import PropTypes from 'prop-types'; import ContentMessages from '../../ContentMessages'; import dis from "../../dispatcher/dispatcher"; import filesize from "filesize"; import { _t } from '../../languageHandler'; +import {Room} from "matrix-js-sdk/src/models/room"; -export default class UploadBar extends React.Component { - static propTypes = { - room: PropTypes.object, - }; +interface IProps { + room: Room; +} + +interface IState { +} + +export default class UploadBar extends React.Component { + private dispatcherRef: string; + private mounted: boolean; componentDidMount() { this.dispatcherRef = dis.register(this.onAction); @@ -37,7 +42,7 @@ export default class UploadBar extends React.Component { dis.unregister(this.dispatcherRef); } - onAction = payload => { + private onAction = (payload) => { switch (payload.action) { case 'upload_progress': case 'upload_finished': From bb80cfb9a66fd26af9571b8be3c0979d3cb944a6 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 5 Mar 2021 13:20:50 -0700 Subject: [PATCH 2/6] Convert all of file uploads to the new dispatcher --- src/ContentMessages.tsx | 27 ++++++------- src/components/structures/RoomView.tsx | 6 +-- src/components/structures/UploadBar.tsx | 12 +++--- src/dispatcher/actions.ts | 25 ++++++++++++ src/dispatcher/payloads/UploadPayload.ts | 51 ++++++++++++++++++++++++ src/models/IUpload.ts | 24 +++++++++++ 6 files changed, 123 insertions(+), 22 deletions(-) create mode 100644 src/dispatcher/payloads/UploadPayload.ts create mode 100644 src/models/IUpload.ts diff --git a/src/ContentMessages.tsx b/src/ContentMessages.tsx index bec36d49f6..95b45cce4a 100644 --- a/src/ContentMessages.tsx +++ b/src/ContentMessages.tsx @@ -32,6 +32,14 @@ import Spinner from "./components/views/elements/Spinner"; import "blueimp-canvas-to-blob"; import { Action } from "./dispatcher/actions"; import CountlyAnalytics from "./CountlyAnalytics"; +import { + UploadCanceledPayload, + UploadErrorPayload, + UploadFinishedPayload, + UploadProgressPayload, + UploadStartedPayload, +} from "./dispatcher/payloads/UploadPayload"; +import {IUpload} from "./models/IUpload"; const MAX_WIDTH = 800; const MAX_HEIGHT = 600; @@ -44,15 +52,6 @@ export class UploadCanceledError extends Error {} type ThumbnailableElement = HTMLImageElement | HTMLVideoElement; -interface IUpload { - fileName: string; - roomId: string; - total: number; - loaded: number; - promise: Promise; - canceled?: boolean; -} - interface IMediaConfig { "m.upload.size"?: number; } @@ -478,7 +477,7 @@ export default class ContentMessages { if (upload) { upload.canceled = true; MatrixClientPeg.get().cancelUpload(upload.promise); - dis.dispatch({action: 'upload_canceled', upload}); + dis.dispatch({action: Action.UploadCanceled, upload}); } } @@ -539,7 +538,7 @@ export default class ContentMessages { promise: prom, }; this.inprogress.push(upload); - dis.dispatch({action: 'upload_started'}); + dis.dispatch({action: Action.UploadStarted, upload}); // Focus the composer view dis.fire(Action.FocusComposer); @@ -547,7 +546,7 @@ export default class ContentMessages { function onProgress(ev) { upload.total = ev.total; upload.loaded = ev.loaded; - dis.dispatch({action: 'upload_progress', upload: upload}); + dis.dispatch({action: Action.UploadProgress, upload}); } let error; @@ -601,9 +600,9 @@ export default class ContentMessages { if (error && error.http_status === 413) { this.mediaConfig = null; } - dis.dispatch({action: 'upload_failed', upload, error}); + dis.dispatch({action: Action.UploadFailed, upload, error}); } else { - dis.dispatch({action: 'upload_finished', upload}); + dis.dispatch({action: Action.UploadFinished, upload}); dis.dispatch({action: 'message_sent'}); } }); diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index 96808e651e..90f6daf6cb 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -711,9 +711,9 @@ export default class RoomView extends React.Component { [payload.file], this.state.room.roomId, this.context); break; case 'notifier_enabled': - case 'upload_started': - case 'upload_finished': - case 'upload_canceled': + case Action.UploadStarted: + case Action.UploadFinished: + case Action.UploadCanceled: this.forceUpdate(); break; case 'call_state': { diff --git a/src/components/structures/UploadBar.tsx b/src/components/structures/UploadBar.tsx index 27d6746698..f60e28b333 100644 --- a/src/components/structures/UploadBar.tsx +++ b/src/components/structures/UploadBar.tsx @@ -20,6 +20,8 @@ import dis from "../../dispatcher/dispatcher"; import filesize from "filesize"; import { _t } from '../../languageHandler'; import {Room} from "matrix-js-sdk/src/models/room"; +import {ActionPayload} from "../../dispatcher/payloads"; +import {Action} from "../../dispatcher/actions"; interface IProps { room: Room; @@ -42,12 +44,12 @@ export default class UploadBar extends React.Component { dis.unregister(this.dispatcherRef); } - private onAction = (payload) => { + private onAction = (payload: ActionPayload) => { switch (payload.action) { - case 'upload_progress': - case 'upload_finished': - case 'upload_canceled': - case 'upload_failed': + case Action.UploadProgress: + case Action.UploadFinished: + case Action.UploadCanceled: + case Action.UploadFailed: if (this.mounted) this.forceUpdate(); break; } diff --git a/src/dispatcher/actions.ts b/src/dispatcher/actions.ts index 12bf4c57a3..cd32c3743f 100644 --- a/src/dispatcher/actions.ts +++ b/src/dispatcher/actions.ts @@ -113,4 +113,29 @@ export enum Action { * XXX: Ditto */ VirtualRoomSupportUpdated = "virtual_room_support_updated", + + /** + * Fired when an upload has started. Should be used with UploadStartedPayload. + */ + UploadStarted = "upload_started", + + /** + * Fired when an upload makes progress. Should be used with UploadProgressPayload. + */ + UploadProgress = "upload_progress", + + /** + * Fired when an upload is completed. Should be used with UploadFinishedPayload. + */ + UploadFinished = "upload_finished", + + /** + * Fired when an upload fails. Should be used with UploadErrorPayload. + */ + UploadFailed = "upload_failed", + + /** + * Fired when an upload is cancelled by the user. Should be used with UploadCanceledPayload. + */ + UploadCanceled = "upload_canceled", } diff --git a/src/dispatcher/payloads/UploadPayload.ts b/src/dispatcher/payloads/UploadPayload.ts new file mode 100644 index 0000000000..40c2710dd6 --- /dev/null +++ b/src/dispatcher/payloads/UploadPayload.ts @@ -0,0 +1,51 @@ +/* +Copyright 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. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { ActionPayload } from "../payloads"; +import { Action } from "../actions"; +import {IUpload} from "../../models/IUpload"; + +interface UploadPayload extends ActionPayload { + /** + * The upload with fields representing the new upload state. + */ + upload: IUpload; +} + +export interface UploadStartedPayload extends UploadPayload { + action: Action.UploadStarted; +} + +export interface UploadProgressPayload extends UploadPayload { + action: Action.UploadProgress; +} + +export interface UploadErrorPayload extends UploadPayload { + action: Action.UploadFailed; + + /** + * An error to describe what went wrong with the upload. + */ + error: Error; +} + +export interface UploadFinishedPayload extends UploadPayload { + action: Action.UploadFinished; +} + +export interface UploadCanceledPayload extends UploadPayload { + action: Action.UploadCanceled; +} diff --git a/src/models/IUpload.ts b/src/models/IUpload.ts new file mode 100644 index 0000000000..5b376e9330 --- /dev/null +++ b/src/models/IUpload.ts @@ -0,0 +1,24 @@ +/* +Copyright 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. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +export interface IUpload { + fileName: string; + roomId: string; + total: number; + loaded: number; + promise: Promise; + canceled?: boolean; +} From 711181cc695dabca5c46578a514b6dae97dd55da Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 5 Mar 2021 14:14:43 -0700 Subject: [PATCH 3/6] 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})
+
); } From fa41489d5ae343c999f8788cce495107db94a394 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 5 Mar 2021 14:24:02 -0700 Subject: [PATCH 4/6] Refactor UploadBar into component state --- src/components/structures/UploadBar.tsx | 54 +++++++++++++------------ 1 file changed, 28 insertions(+), 26 deletions(-) diff --git a/src/components/structures/UploadBar.tsx b/src/components/structures/UploadBar.tsx index 3933ef0f9e..509b8c8363 100644 --- a/src/components/structures/UploadBar.tsx +++ b/src/components/structures/UploadBar.tsx @@ -23,18 +23,27 @@ 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"; +import AccessibleButton from "../views/elements/AccessibleButton"; +import {IUpload} from "../../models/IUpload"; interface IProps { room: Room; } interface IState { + currentUpload?: IUpload; + uploadsHere: IUpload[]; } export default class UploadBar extends React.Component { private dispatcherRef: string; private mounted: boolean; + constructor(props) { + super(props); + this.state = {uploadsHere: []}; + } + componentDidMount() { this.dispatcherRef = dis.register(this.onAction); this.mounted = true; @@ -47,51 +56,44 @@ export default class UploadBar extends React.Component { private onAction = (payload: ActionPayload) => { switch (payload.action) { + case Action.UploadStarted: case Action.UploadProgress: case Action.UploadFinished: case Action.UploadCanceled: - case Action.UploadFailed: - if (this.mounted) this.forceUpdate(); + case Action.UploadFailed: { + if (!this.mounted) return; + const uploads = ContentMessages.sharedInstance().getCurrentUploads(); + const uploadsHere = uploads.filter(u => u.roomId === this.props.room.roomId); + this.setState({currentUpload: uploadsHere[0], uploadsHere}); break; + } } }; + private onCancelClick = (ev) => { + ev.preventDefault(); + ContentMessages.sharedInstance().cancelUpload(this.state.currentUpload.promise); + }; + render() { - const uploads = ContentMessages.sharedInstance().getCurrentUploads(); - - // for testing UI... - also fix up the ContentMessages.getCurrentUploads().length - // check in RoomView - // - // uploads = [{ - // roomId: this.props.room.roomId, - // loaded: 123493, - // total: 347534, - // fileName: "testing_fooble.jpg", - // }]; - - const uploadsHere = uploads.filter(u => u.roomId === this.props.room.roomId); - if (uploadsHere.length == 0) { + if (!this.state.currentUpload) { return null; } - 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: currentUpload.fileName, - count: uploadsHere.length - 1, + filename: this.state.currentUpload.fileName, + count: this.state.uploadsHere.length - 1, }, ); - + + const uploadSize = filesize(this.state.currentUpload.total); return (
- +
{uploadText} ({uploadSize})
- +
); } From 08072aca9aa35f0bcef03bcd4913299d9860157b Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 5 Mar 2021 14:42:15 -0700 Subject: [PATCH 5/6] Add upload icon, fix cancel button, refresh styles --- res/css/structures/_UploadBar.scss | 50 ++++++++++++++++--------- res/img/element-icons/upload.svg | 4 ++ src/components/structures/UploadBar.tsx | 4 +- 3 files changed, 38 insertions(+), 20 deletions(-) create mode 100644 res/img/element-icons/upload.svg diff --git a/res/css/structures/_UploadBar.scss b/res/css/structures/_UploadBar.scss index ce884e27a9..7c62516b47 100644 --- a/res/css/structures/_UploadBar.scss +++ b/res/css/structures/_UploadBar.scss @@ -16,30 +16,44 @@ limitations under the License. .mx_UploadBar { padding-left: 65px; // line up with the shield area in the composer + position: relative; .mx_ProgressBar { width: calc(100% - 40px); // cheating at a right margin } } -.mx_UploadBar_uploadFilename { +.mx_UploadBar_filename { margin-top: 5px; - opacity: 0.5; - color: $primary-fg-color; -} - -.mx_UploadBar_uploadIcon { - float: left; - margin-top: 5px; - margin-left: 14px; -} - -.mx_UploadBar_uploadCancel { - float: right; - margin-top: 5px; - margin-right: 10px; + color: $muted-fg-color; position: relative; - opacity: 0.6; - cursor: pointer; - z-index: 1; + padding-left: 22px; // 18px for icon, 4px for padding + font-size: $font-15px; + vertical-align: middle; + + &::before { + content: ""; + height: 18px; + width: 18px; + position: absolute; + top: 0; + left: 0; + mask-repeat: no-repeat; + mask-position: center; + background-color: $muted-fg-color; + mask-image: url('$(res)/img/element-icons/upload.svg'); + } +} + +.mx_UploadBar_cancel { + position: absolute; + top: 0; + right: 0; + height: 16px; + width: 16px; + margin-right: 16px; // align over rightmost button in composer + mask-repeat: no-repeat; + mask-position: center; + background-color: $muted-fg-color; + mask-image: url('$(res)/img/icons-close.svg'); } diff --git a/res/img/element-icons/upload.svg b/res/img/element-icons/upload.svg new file mode 100644 index 0000000000..71ad7ba1cf --- /dev/null +++ b/res/img/element-icons/upload.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/structures/UploadBar.tsx b/src/components/structures/UploadBar.tsx index 509b8c8363..44780c566f 100644 --- a/src/components/structures/UploadBar.tsx +++ b/src/components/structures/UploadBar.tsx @@ -87,12 +87,12 @@ export default class UploadBar extends React.Component { count: this.state.uploadsHere.length - 1, }, ); - + const uploadSize = filesize(this.state.currentUpload.total); return (
+
{uploadText} ({uploadSize})
-
{uploadText} ({uploadSize})
); From 757597e55fc6a1a4911caa780425689f818d988c Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Fri, 5 Mar 2021 16:29:14 -0700 Subject: [PATCH 6/6] Fixed review concerns --- res/css/views/elements/_ProgressBar.scss | 1 - src/components/structures/UploadBar.tsx | 8 ++++---- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/res/css/views/elements/_ProgressBar.scss b/res/css/views/elements/_ProgressBar.scss index 5598ddba20..770978e921 100644 --- a/res/css/views/elements/_ProgressBar.scss +++ b/res/css/views/elements/_ProgressBar.scss @@ -17,7 +17,6 @@ limitations under the License. progress.mx_ProgressBar { height: 6px; width: 60px; - border-radius: 6px; overflow: hidden; appearance: none; border: none; diff --git a/src/components/structures/UploadBar.tsx b/src/components/structures/UploadBar.tsx index 44780c566f..b9d157ee00 100644 --- a/src/components/structures/UploadBar.tsx +++ b/src/components/structures/UploadBar.tsx @@ -15,16 +15,16 @@ limitations under the License. */ import React from 'react'; +import { Room } from "matrix-js-sdk/src/models/room"; import ContentMessages from '../../ContentMessages'; import dis from "../../dispatcher/dispatcher"; import filesize from "filesize"; import { _t } from '../../languageHandler'; -import {Room} from "matrix-js-sdk/src/models/room"; -import {ActionPayload} from "../../dispatcher/payloads"; -import {Action} from "../../dispatcher/actions"; +import { ActionPayload } from "../../dispatcher/payloads"; +import { Action } from "../../dispatcher/actions"; import ProgressBar from "../views/elements/ProgressBar"; import AccessibleButton from "../views/elements/AccessibleButton"; -import {IUpload} from "../../models/IUpload"; +import { IUpload } from "../../models/IUpload"; interface IProps { room: Room;