From 1af2a966c5f70e02f01fd2d47c93a7382522fb4a Mon Sep 17 00:00:00 2001
From: Diana Whitten <hurgleburgler@gmail.com>
Date: Wed, 13 Jul 2016 16:27:43 -0700
Subject: [PATCH] Material: Progress Bars should allow text

Material progress bars are so thin, that when you add text to them, its
unplesant. We need to support a progress bar type containing text that
is bigger by default.

Used this opportunity to align other progress bar experiences, and in
addition, generalize the text progress bar and progress loader bar for
general use everywhere.

Change-Id: I3d51c6a4582e3dc043f30632b6635a9ff17f5fbf
Closes-bug: #1602880
---
 horizon/static/horizon/js/horizon.tables.js   |  5 +--
 .../theme-preview/theme-preview.html          | 25 +++++++++++
 .../containers/_container_loader.html         |  4 +-
 .../project/containers/containers.html        |  4 +-
 .../scss/components/_pending_bar.scss         | 18 --------
 .../scss/components/_progress_bars.scss       | 41 +++++++++++++++++++
 .../dashboard/scss/components/_tables.scss    |  6 ---
 .../static/dashboard/scss/horizon.scss        |  2 +-
 .../default/horizon/components/_tables.scss   |  5 ---
 .../material/static/horizon/_styles.scss      |  1 +
 .../horizon/components/_progress_bars.scss    |  3 ++
 11 files changed, 77 insertions(+), 37 deletions(-)
 delete mode 100644 openstack_dashboard/static/dashboard/scss/components/_pending_bar.scss
 create mode 100644 openstack_dashboard/static/dashboard/scss/components/_progress_bars.scss
 create mode 100644 openstack_dashboard/themes/material/static/horizon/components/_progress_bars.scss

diff --git a/horizon/static/horizon/js/horizon.tables.js b/horizon/static/horizon/js/horizon.tables.js
index fbf557d263..6005c7cb72 100644
--- a/horizon/static/horizon/js/horizon.tables.js
+++ b/horizon/static/horizon/js/horizon.tables.js
@@ -65,7 +65,7 @@ horizon.datatables = {
 
             if ($new_row.hasClass('status_unknown')) {
               var $container = $(document.createElement('div'))
-                .addClass('horizon-pending-bar');
+                .addClass('progress-text horizon-loading-bar');
 
               var $progress = $(document.createElement('div'))
                 .addClass('progress progress-striped active')
@@ -73,14 +73,13 @@ horizon.datatables = {
 
               $(document.createElement('div'))
                 .addClass('progress-bar')
-                .css("width", "100%")
                 .appendTo($progress);
 
               // if action/confirm is required, show progress-bar with "?"
               // icon to indicate user action is required
               if ($new_row.find('.btn-action-required').length > 0) {
                 $(document.createElement('span'))
-                  .addClass('fa fa-question-circle horizon-pending-bar-icon')
+                  .addClass('fa fa-question-circle progress-bar-text')
                   .appendTo($container);
               }
               $new_row.find("td.status_unknown:last").prepend($container);
diff --git a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
index 3d2b2810ad..482860ce9e 100644
--- a/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
+++ b/openstack_dashboard/contrib/developer/static/dashboard/developer/theme-preview/theme-preview.html
@@ -1165,6 +1165,31 @@
           <div class="progress-bar progress-bar-danger" style="width: 10%"></div>
         </div>
       </div>
+
+      <h3 translate id="progress-info">Text</h3>
+      <div class="bs-component">
+        <div class="progress-text">
+          <div class="progress">
+            <div class="progress-bar" style="width: 10%;"></div>
+          </div>
+          <span class="progress-bar-text" translate>10%</span>
+        </div>
+        <div class="progress-text">
+          <div class="progress">
+            <div class="progress-bar" style="width: 75%;"></div>
+          </div>
+          <span class="progress-bar-text" translate>75%</span>
+        </div>
+      </div>
+
+      <h3 translate id="progress-info">Loading</h3>
+      <div class="bs-component">
+        <div class="horizon-loading-bar">
+          <div class="progress">
+            <div class="progress-bar"></div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </div>
diff --git a/openstack_dashboard/dashboards/project/containers/templates/containers/_container_loader.html b/openstack_dashboard/dashboards/project/containers/templates/containers/_container_loader.html
index 1f42aaf4ca..2d0d12b683 100644
--- a/openstack_dashboard/dashboards/project/containers/templates/containers/_container_loader.html
+++ b/openstack_dashboard/dashboards/project/containers/templates/containers/_container_loader.html
@@ -1,5 +1,5 @@
-<div class="horizon-pending-bar container-pending-bar">
+<div class="horizon-loading-bar container-pending-bar">
   <div class="progress progress-striped active">
-    <div class="progress-bar" style="width: 100%"></div>
+    <div class="progress-bar"></div>
   </div>
 </div>
diff --git a/openstack_dashboard/dashboards/project/static/dashboard/project/containers/containers.html b/openstack_dashboard/dashboards/project/static/dashboard/project/containers/containers.html
index e406f6998a..52c6231fb9 100644
--- a/openstack_dashboard/dashboards/project/static/dashboard/project/containers/containers.html
+++ b/openstack_dashboard/dashboards/project/static/dashboard/project/containers/containers.html
@@ -30,9 +30,9 @@
               </div>
             </accordion-heading>
 
-            <div ng-if="!container.is_fetched" class="horizon-pending-bar container-pending-bar">
+            <div ng-if="!container.is_fetched" class="horizon-loading-bar container-pending-bar">
               <div class="progress progress-striped active">
-                <div class="progress-bar" style="width: 100%"></div>
+                <div class="progress-bar"></div>
               </div>
             </div>
             <ul ng-if="container.is_fetched" class="hz-object-detail">
diff --git a/openstack_dashboard/static/dashboard/scss/components/_pending_bar.scss b/openstack_dashboard/static/dashboard/scss/components/_pending_bar.scss
deleted file mode 100644
index d1fc795fa3..0000000000
--- a/openstack_dashboard/static/dashboard/scss/components/_pending_bar.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.horizon-pending-bar {
-  position: relative;
-
-  .progress {
-    margin-bottom: $padding-small-vertical;
-  }
-
-  .horizon-pending-bar-icon {
-    position: absolute;
-    z-index: 1;
-    left: calc(50% - .5em);
-    bottom: calc(50% - .5em);
-  }
-
-  &.container-pending-bar .progress {
-    margin-bottom: 0;
-  }
-}
diff --git a/openstack_dashboard/static/dashboard/scss/components/_progress_bars.scss b/openstack_dashboard/static/dashboard/scss/components/_progress_bars.scss
new file mode 100644
index 0000000000..5e11391f10
--- /dev/null
+++ b/openstack_dashboard/static/dashboard/scss/components/_progress_bars.scss
@@ -0,0 +1,41 @@
+.progress-text {
+  position: relative;
+  color: $text-color;
+
+  .progress {
+    margin-bottom: $padding-small-vertical;
+    height: 1.5em;
+  }
+
+  .progress-bar-text {
+    bottom: 0;
+    line-height: 1.5em;
+    position: absolute;
+    z-index: 1;
+
+    &,
+    & span {
+      text-align: center;
+      display: inline-block;
+      width: 100%;
+      height: 100%;
+      @include text-overflow();
+    }
+  }
+
+  &.container-pending-bar .progress {
+    margin-bottom: 0;
+  }
+}
+
+.file-upload .progress-bar {
+  transition: width 0.1s ease 0s;
+}
+
+.horizon-loading-bar .progress {
+  height: 1.5em;
+
+  .progress-bar {
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/openstack_dashboard/static/dashboard/scss/components/_tables.scss b/openstack_dashboard/static/dashboard/scss/components/_tables.scss
index 19ea361d73..6b4f53a86a 100644
--- a/openstack_dashboard/static/dashboard/scss/components/_tables.scss
+++ b/openstack_dashboard/static/dashboard/scss/components/_tables.scss
@@ -152,9 +152,3 @@
 .nowrap-col {
   white-space: nowrap;
 }
-
-// Specialness for table pending bars
-.status_unknown .horizon-pending-bar-icon {
-  color: $text-color;
-}
-
diff --git a/openstack_dashboard/static/dashboard/scss/horizon.scss b/openstack_dashboard/static/dashboard/scss/horizon.scss
index 1bc476dee2..93a5423a58 100644
--- a/openstack_dashboard/static/dashboard/scss/horizon.scss
+++ b/openstack_dashboard/static/dashboard/scss/horizon.scss
@@ -32,8 +32,8 @@
 @import "components/modals";
 @import "components/navbar";
 @import "components/network_topology";
-@import "components/pending_bar";
 @import "components/pie_charts";
+@import "components/progress_bars";
 @import "components/quota";
 @import "components/resource_browser";
 @import "components/resource_topology";
diff --git a/openstack_dashboard/themes/default/horizon/components/_tables.scss b/openstack_dashboard/themes/default/horizon/components/_tables.scss
index 77e7283385..8468bb3bb4 100644
--- a/openstack_dashboard/themes/default/horizon/components/_tables.scss
+++ b/openstack_dashboard/themes/default/horizon/components/_tables.scss
@@ -21,8 +21,3 @@
   opacity: .25;
   right: $padding-small-vertical;
 }
-
-// Specialness for table pending bars
-.status_unknown .horizon-pending-bar-icon {
-  color: $body-bg;
-}
diff --git a/openstack_dashboard/themes/material/static/horizon/_styles.scss b/openstack_dashboard/themes/material/static/horizon/_styles.scss
index 155d777cbe..7ef31e0977 100644
--- a/openstack_dashboard/themes/material/static/horizon/_styles.scss
+++ b/openstack_dashboard/themes/material/static/horizon/_styles.scss
@@ -7,6 +7,7 @@
 @import "components/magic_search";
 @import "components/messages";
 @import "components/navbar";
+@import "components/progress_bars";
 @import "components/selects";
 @import "components/sidebar";
 
diff --git a/openstack_dashboard/themes/material/static/horizon/components/_progress_bars.scss b/openstack_dashboard/themes/material/static/horizon/components/_progress_bars.scss
new file mode 100644
index 0000000000..706f66b242
--- /dev/null
+++ b/openstack_dashboard/themes/material/static/horizon/components/_progress_bars.scss
@@ -0,0 +1,3 @@
+.progress-text {
+  color: $body-bg;
+}
\ No newline at end of file