diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css index ebf9f44c1f..1bd827bc71 100644 --- a/src/skins/vector/css/organisms/RoomView.css +++ b/src/skins/vector/css/organisms/RoomView.css @@ -212,13 +212,25 @@ limitations under the License. .mx_RoomView_uploadProgressOuter { width: 100%; - background-color: black; - height: 5px; + background-color: #a9dbf4; + height: 4px; } .mx_RoomView_uploadProgressInner { - background-color: blue; - height: 5px; + background-color: #80cef4; + 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 { diff --git a/src/skins/vector/views/organisms/RoomView.js b/src/skins/vector/views/organisms/RoomView.js index dfeedd2a6a..f45ed59617 100644 --- a/src/skins/vector/views/organisms/RoomView.js +++ b/src/skins/vector/views/organisms/RoomView.js @@ -138,19 +138,26 @@ module.exports = React.createClass({
); + // for testing UI... + // this.state.upload = { + // uploadedBytes: 123493, + // totalBytes: 347534, + // fileName: "testing_fooble.jpg", + // } + if (this.state.upload) { var innerProgressStyle = { width: ((this.state.upload.uploadedBytes / this.state.upload.totalBytes) * 100) + '%' }; statusBar = (
- Uploading {this.state.upload.fileName} - - {filesize(this.state.upload.uploadedBytes)} / {filesize(this.state.upload.totalBytes)} -
+
+ {filesize(this.state.upload.uploadedBytes).replace(/ .*/, '')} / {filesize(this.state.upload.totalBytes)} +
+
Uploading {this.state.upload.fileName}
); } else {