make file upload look slightly less crap

kegan/timestamp-hover
Matthew Hodgson 2015-10-11 18:42:54 +01:00
parent 191d56673b
commit 50ebce69b7
2 changed files with 27 additions and 8 deletions

View File

@ -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 {

View File

@ -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 {