mirror of https://github.com/vector-im/riot-web
Rough style for new upload bar
This repurposes ProgressBar which was not used anywhere in code.pull/21833/head
Travis Ralston
parent
bb80cfb9a6
commit
711181cc69
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue