From f06ca00e1c45cfee0feba90bec57773d109e1173 Mon Sep 17 00:00:00 2001
From: Artur Adib <arturadib@gmail.com>
Date: Wed, 25 Apr 2012 17:32:26 -0400
Subject: [PATCH] progress bar matches new UI

---
 web/viewer.css | 29 ++++++++++++++++++-----------
 web/viewer.js  |  3 +++
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/web/viewer.css b/web/viewer.css
index 74c1f4530..292b429a0 100644
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -572,6 +572,8 @@ canvas {
 #loadingBox {
   margin: 100px 0;
   text-align: center;
+  color: #ddd;
+  font-size: 14px;
 }
 
 #loadingBar {
@@ -579,25 +581,25 @@ canvas {
   display: inline-block;
   border: 1px solid black;
   clear: both;
-  margin:0px;
+  margin: 0px;
+  margin-top: 5px;
   line-height: 0;
   border-radius: 4px;
-  width: 15em;
-  height: 1.5em;
+  width: 200px;
+  height: 25px;
 }
 
 #loadingBar .progress {
-  background-color: green;
   display: inline-block;
   float: left;
 
-  background: #b4e391;
-  background: -moz-linear-gradient(top, #b4e391 0%, #61c419 50%, #b4e391 100%);
-  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b4e391), color-stop(50%,#61c419), color-stop(100%,#b4e391));
-  background: -webkit-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
-  background: -o-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
-  background: -ms-linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);
-  background: linear-gradient(top, #b4e391 0%,#61c419 50%,#b4e391 100%);    
+  background: #666;
+  background: -moz-linear-gradient(top, #999 0%, #666 50%, #999 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#999), color-stop(50%,#666), color-stop(100%,#999));
+  background: -webkit-linear-gradient(top, #999 0%,#666 50%,#999 100%);
+  background: -o-linear-gradient(top, #999 0%,#666 50%,#999 100%);
+  background: -ms-linear-gradient(top, #999 0%,#666 50%,#999 100%);
+  background: linear-gradient(top, #999 0%,#666 50%,#999 100%);    
 
   border-top-left-radius: 3px;
   border-bottom-left-radius: 3px;
@@ -606,6 +608,11 @@ canvas {
   height: 100%;
 }
 
+#loadingBar .progress.full {
+  border-top-right-radius: 3px;
+  border-bottom-right-radius: 3px;
+}
+
 .textLayer {
   position: absolute;
   left: 0;
diff --git a/web/viewer.js b/web/viewer.js
index 99287a395..fa9b6f72a 100644
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -62,6 +62,9 @@ var ProgressBar = (function ProgressBarClosure() {
     updateBar: function ProgressBar_updateBar() {
       var progressSize = this.width * this._percent / 100;
 
+      if (this._percent > 95)
+        this.div.classList.add('full');
+
       this.div.style.width = progressSize + this.units;
     },