Skip to content
Snippets Groups Projects
Commit 50ebce69 authored by Matthew Hodgson's avatar Matthew Hodgson
Browse files

make file upload look slightly less crap

parent 191d5667
Branches
Tags
No related merge requests found
...@@ -212,13 +212,25 @@ limitations under the License. ...@@ -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({ ...@@ -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 {
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment