making file upload widget more consistent visually

css/base.css

@@ -1703,33 +1703,24 @@ ul.tabbar li.active > a:after {
 }
 
 /* File upload styles */
-.upload-container {
+.uploader {
-  width: 2rem;
+  display: flex;
-  height: 2rem;
+}
-  padding: 0;
+/* Gray uploader bar of fixed length (background) */
-  margin: 0;
+.uploader > div {
   position: relative;
-  background-color: #CCF;
+  height: 0.6rem;
-  border-radius: 50%;
+  padding: 0.15rem;
+  margin: 0.3rem;
+  width: 6rem;
+  border-radius: 0.1rem;
+  background-color: silver;
 }
-.upload-container .half {
+/* Colored uploader progress bar of variable length */
+.uploader > div > span {
   position: absolute;
-  top: 0; left: 0; width: 1rem; height: 2rem;
+  display: inline-block;
-  border-radius: 1rem 0 0 1rem;
+  height: 0.3rem;
-  transform-origin: 1rem 1rem;
+  background-color: #1e88e5;
-}
+  border-radius: 0.08rem;
-.upload-container .half.active {
-  background-color: #66F;
-}
-.upload-container .half.clip {
-  background-color: #CCF;
-}
-.upload-container .inner {
-  font-size: 80%;
-  position: absolute;
-  top: 0.25rem; left: 0.25rem; right: 0.25rem; bottom: 0.25rem;
-  text-align: center;
-  line-height: 1.5rem;
-  border-radius: 50%;
-  background-color: white;
 }

index.html

@@ -703,30 +703,15 @@
         super(props);
 
         this.state = {
-          progress: 0
+          progress: 0.33
         };
       }
 
       render() {
-        var halfclip, progress1, progress2;
-        if (this.state.progress < 0.5) {
-          halfclip = {display: "block"};
-          progress1 = {transform: "rotate(" + (this.state.progress*360) + "deg)"};
-          progress2 = {display: "none"};
-        } else {
-          halfclip = {display: "none"};
-          progress1 = {transform: "rotate(180deg)"};
-          progress2 = {display: "block", transform: "rotate(" + (180 + (this.state.progress-0.5)*360) + "deg)"};
-        }
         return (
-          <div className="upload-container">
+          <div className="uploader">
-            <div className="half active" style={progress1}></div>
+            <div><span style={{width: (this.state.progress * 100) + "%"}}></span></div>
-            <div className="half clip" style={halfclip}></div>
+            <a href="javascript:;" onClick={this.props.onCancel}><i className="material-icons">close</i> cancel</a>
-            <div className="half active" style={progress2}></div>
-            <div className="inner">{this.props.onCancel ?
-              <MenuCancel onCancel={this.props.onCancel} /> :
-              null}
-            </div>
           </div>
         );
       }
@@ -1576,6 +1561,7 @@
                 onError={this.props.onError} /> :
 
               null}
+              <FileUploadProgress />
           </div>
         );
       }