OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/skins/vector/css/organisms/RoomView.css
View File

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

15
src/skins/vector/views/organisms/RoomView.js
View File

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