From 50ebce69b7e52a24e91596870310a76f5e9e6ad2 Mon Sep 17 00:00:00 2001
From: Matthew Hodgson <matthew@matrix.org>
Date: Sun, 11 Oct 2015 18:42:54 +0100
Subject: [PATCH] make file upload look slightly less crap
---
src/skins/vector/css/organisms/RoomView.css | 20 ++++++++++++++++----
src/skins/vector/views/organisms/RoomView.js | 15 +++++++++++----
2 files changed, 27 insertions(+), 8 deletions(-)
diff --git a/src/skins/vector/css/organisms/RoomView.css b/src/skins/vector/css/organisms/RoomView.css
index ebf9f44c..1bd827bc 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 dfeedd2a..f45ed596 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({
<div />
);
+ // 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 = (
<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_uploadProgressInner" style={innerProgressStyle}></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>
);
} else {