mirror of https://github.com/vector-im/riot-web
make file upload look slightly less crap
parent
191d56673b
commit
50ebce69b7
|
@ -212,13 +212,25 @@ limitations under the License.
|
||||||
|
|
||||||
.mx_RoomView_uploadProgressOuter {
|
.mx_RoomView_uploadProgressOuter {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: black;
|
background-color: #a9dbf4;
|
||||||
height: 5px;
|
height: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomView_uploadProgressInner {
|
.mx_RoomView_uploadProgressInner {
|
||||||
background-color: blue;
|
background-color: #80cef4;
|
||||||
height: 5px;
|
height: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_RoomView_uploadFilename {
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-left: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mx_RoomView_uploadBytes {
|
||||||
|
float: right;
|
||||||
|
opacity: 0.5;
|
||||||
|
margin-top: 15px;
|
||||||
|
margin-right: 70px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mx_RoomView_ongoingConfCallNotification {
|
.mx_RoomView_ongoingConfCallNotification {
|
||||||
|
|
|
@ -138,19 +138,26 @@ module.exports = React.createClass({
|
||||||
<div />
|
<div />
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// for testing UI...
|
||||||
|
// this.state.upload = {
|
||||||
|
// uploadedBytes: 123493,
|
||||||
|
// totalBytes: 347534,
|
||||||
|
// fileName: "testing_fooble.jpg",
|
||||||
|
// }
|
||||||
|
|
||||||
if (this.state.upload) {
|
if (this.state.upload) {
|
||||||
var innerProgressStyle = {
|
var innerProgressStyle = {
|
||||||
width: ((this.state.upload.uploadedBytes / this.state.upload.totalBytes) * 100) + '%'
|
width: ((this.state.upload.uploadedBytes / this.state.upload.totalBytes) * 100) + '%'
|
||||||
};
|
};
|
||||||
statusBar = (
|
statusBar = (
|
||||||
<div className="mx_RoomView_uploadBar">
|
<div className="mx_RoomView_uploadBar">
|
||||||
<span className="mx_RoomView_uploadFilename">Uploading {this.state.upload.fileName}</span>
|
|
||||||
<span className="mx_RoomView_uploadBytes">
|
|
||||||
{filesize(this.state.upload.uploadedBytes)} / {filesize(this.state.upload.totalBytes)}
|
|
||||||
</span>
|
|
||||||
<div className="mx_RoomView_uploadProgressOuter">
|
<div className="mx_RoomView_uploadProgressOuter">
|
||||||
<div className="mx_RoomView_uploadProgressInner" style={innerProgressStyle}></div>
|
<div className="mx_RoomView_uploadProgressInner" style={innerProgressStyle}></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="mx_RoomView_uploadBytes">
|
||||||
|
{filesize(this.state.upload.uploadedBytes).replace(/ .*/, '')} / {filesize(this.state.upload.totalBytes)}
|
||||||
|
</div>
|
||||||
|
<div className="mx_RoomView_uploadFilename">Uploading {this.state.upload.fileName}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
|
|
Loading…
Reference in New Issue