[Toaster] [PATCH 20/20] toaster: loading notification Make it spin

Thu Jun 9 06:24:33 PDT 2016

We need some additional css to make the spinner in our loading
notification spin. If the spinner doesn't spin, is it a spinner?

Signed-off-by: Belen Barros Pena <belen.barros.pena at linux.intel.com>
---
 .../lib/toaster/toastergui/static/css/default.css  | 39 +++++++++++++++++++++-
 bitbake/lib/toaster/toastergui/templates/base.html |  2 +-
 2 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/bitbake/lib/toaster/toastergui/static/css/default.css b/bitbake/lib/toaster/toastergui/static/css/default.css
index b66e748..6e256ee 100644
--- a/bitbake/lib/toaster/toastergui/static/css/default.css
+++ b/bitbake/lib/toaster/toastergui/static/css/default.css
@@ -255,7 +255,7 @@ code { color: #333; background-color: transparent; }
 .date-filter-controls span { margin: 0 10px; }
 
 /* Style the fixed positioned notifications */
-.loading-notification { position: fixed; z-index: 101; top: 3%; left: 40%; right: 40%; -webkit-box-shadow: 0 0 10px #c09853; -moz-box-shadow: 0 0 10px #c09853; box-shadow: 0 0 10px #c09853; } 
+#loading-notification { position: fixed; z-index: 1101; top: 3%; left: 40%; right: 40%; -webkit-box-shadow: 0 0 10px #c09853; -moz-box-shadow: 0 0 10px #c09853; box-shadow: 0 0 10px #c09853; } 
 
 .change-notification { position: fixed; z-index: 1101; top: 4%; left: 30%; right: 30%; -webkit-box-shadow: 0 0 10px #3a87ad; -moz-box-shadow: 0 0 10px #3a87ad; box-shadow: 0 0 10px #3a87ad; }
 
@@ -303,3 +303,40 @@ h2.panel-title { font-size: 30px; }
 @-webkit-keyframes target-fade { 0% { background-color: #D9EDF7; } 25% { background-color: #D9EDF7; } 100% { background-color: white; } }
 @-moz-keyframes target-fade { 0% { background-color: #D9EDF7; } 25% { background-color: #D9EDF7; } 100% { background-color: white; } }
 @keyframes target-fade { 0% { background-color: #D9EDF7; } 25% { background-color: #D9EDF7; } 100% { background-color: white; } }
+
+/* Copied in from newer version of Font-Awesome 4.3.0 */
+.fa-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+  animation: fa-spin 2s infinite linear;
+  display: inline-block;
+}
+.fa-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+  animation: fa-spin 1s infinite steps(8);
+  display: inline-block;
+}
+
+ at -webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+
+ at keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    -moz-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+/* End copied in from newer version of Font-Awesome 4.3.0 */
diff --git a/bitbake/lib/toaster/toastergui/templates/base.html b/bitbake/lib/toaster/toastergui/templates/base.html
index 73e4cd8..8a9f690 100644
--- a/bitbake/lib/toaster/toastergui/templates/base.html
+++ b/bitbake/lib/toaster/toastergui/templates/base.html
@@ -62,7 +62,7 @@
   <body>
 
     {% csrf_token %}
-    <div id="loading-notification" class="alert lead text-center" style="display:none">
+    <div id="loading-notification" class="alert alert-warning lead text-center" style="display:none">
       Loading <i class="fa-pulse icon-spinner"></i>
     </div>
 
-- 
1.9.1

