mirror of https://github.com/vector-im/riot-web
make file upload look slightly less crap
parent
191d56673b
commit
50ebce69b7
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in New Issue