Use fontawesome spinner icon instead of external image

wok-*-loading-icon CSS class is linked to an external image on Wok. There is no need to use it as fontawesome has the same icon available. Signed-off-by: Aline Manera <aline.manera@gmail.com>
d3scomp · Sep 12, 2017 · e3eea48 · e3eea48
1 parent 44c71d9
commit e3eea48
Show file tree

Hide file tree

Showing 15 changed files with 53 additions and 78 deletions.
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
@@ -2361,39 +2361,21 @@ ul {
   right: -2px !important;
 }
 
-#network-root-container .wok-nw-loading-icon {
-  background: transparent url("../../../images/theme-default/spin5.svg") no-repeat 50% 50%;
-  -webkit-animation: spin 3s infinite linear;
-  -o-animation: spin 3s infinite linear;
-  animation: spin 3s infinite linear;
-  height: 16px;
-  width: 16px;
-  background-size: 100%;
-  display: block;
-  position: relative;
-  top: 12px;
-  left: 50%;
-  margin-left: -8px;
-}
-
-#network-root-container .up .wok-nw-loading-icon,
-#network-root-container .down .wok-nw-loading-icon {
-  display: none;
-}
-
 #network-root-container .wok-datagrid-body span > .fa {
   font-size: 22px;
-  width: 20px;
-  height: 20px;
+  width: 22px;
   position: relative;
 }
 
-#network-root-container .wok-datagrid-body .up .fa {
+#network-root-container .wok-datagrid-body .loading .fa-spinner {
+  display: inline-block;
+}
+
+#network-root-container .wok-datagrid-body .up .fa-power-off {
   color: #a8d46f;
 }
 
-#network-root-container .wok-datagrid-body .loading > .fa,
-#network-root-container .wok-datagrid-body .down .fa {
+#network-root-container .wok-datagrid-body .down .fa-power-off {
   display: none;
 }
 
@@ -2777,7 +2759,7 @@ ul {
   margin-right: 7px;
 }
 
-#storage-root-container .volumes .wok-list .volume-inline-progress > span.wok-loading-icon {
+#storage-root-container .volumes .wok-list .volume-inline-progress > i.wok-loading-icon {
   margin-right: 0;
 }
 

diff --git a/ui/css/src/modules/_network.scss b/ui/css/src/modules/_network.scss
@@ -44,38 +44,22 @@
 
 #network-root-container {
 
-    .wok-nw-loading-icon {
-        background: transparent url('../../#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%;
-        @include animation(spin 3s infinite linear);
-        height: 16px;
-        width: 16px;
-        background-size: 100%;
-        display: block;
-        position: relative;
-        top: 12px;
-        left: 50%;
-        margin-left: -8px;
-    }
-
-    .up .wok-nw-loading-icon,
-    .down .wok-nw-loading-icon {
-      display: none;
-    }
-
     .wok-datagrid-body {
         span > .fa {
             font-size: 22px;
-            width: 20px;
-            height: 20px;
+            width: 22px;
             position: relative;
         }
 
-        .up .fa {
+        .loading .fa-spinner {
+            display: inline-block;
+        }
+
+        .up .fa-power-off {
           color: $fa-green;
         }
 
-        .loading > .fa,
-        .down .fa {
+        .down .fa-power-off {
           display: none;
         }
     }

diff --git a/ui/css/src/modules/_storage.scss b/ui/css/src/modules/_storage.scss
@@ -339,7 +339,7 @@
             margin-right: 7px;
         }
 
-        .volume-inline-progress > span.wok-loading-icon {
+        .volume-inline-progress > i.wok-loading-icon {
             margin-right: 0;
         }
 

diff --git a/ui/js/src/kimchi.network.js b/ui/js/src/kimchi.network.js
@@ -115,6 +115,8 @@ kimchi.getNetworkItemHtml = function(network) {
 
 kimchi.stopNetwork = function(network,menu) {
     $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("up", "loading");
+    $(".network-state i", $("#" + wok.escapeStr(network.name))).removeClass();
+    $(".network-state i", $("#" + wok.escapeStr(network.name))).addClass("fa fa-spinner fa-pulse fa-3x fa-fw");
     $("[nwAct='stop']", menu).addClass("disabled");
     kimchi.toggleNetwork(network.name, false, function() {
         $("[nwAct='start']", menu).removeClass("wok-hide-action-item");
@@ -127,8 +129,12 @@ kimchi.stopNetwork = function(network,menu) {
             $(":first-child", $("[nwAct='edit']", menu)).removeAttr("disabled");
         }
         $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("loading", "down");
+        $(".network-state i", $("#" + wok.escapeStr(network.name))).removeClass("fa-power-off");
+        $(".network-state i", $("#" + wok.escapeStr(network.name))).addClass("fa fa-power-off");
     }, function(err) {
         $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("loading", "up");
+        $(".network-state i", $("#" + wok.escapeStr(network.name))).removeClass("fa-power-off");
+        $(".network-state i", $("#" + wok.escapeStr(network.name))).addClass("fa fa-power-off");
         if (!network.in_use) {
             $("[nwAct='stop']", menu).removeClass("disabled");
         }
@@ -143,6 +149,8 @@ kimchi.addNetworkActions = function(network) {
         var menu = $(evt.currentTarget).parent();
         if ($(evt.currentTarget).attr("nwAct") === "start") {
             $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("down", "loading");
+            $(".network-state i", $("#" + wok.escapeStr(network.name))).removeClass("fa-power-off");
+            $(".network-state i", $("#" + wok.escapeStr(network.name))).addClass("fa fa-spinner fa-pulse fa-3x fa-fw");
             $("[nwAct='start']", menu).addClass("disabled");
             $("[nwAct='delete']", menu).addClass("disabled");
             $(":first-child", $("[nwAct='delete']", menu)).attr("disabled", true);
@@ -157,8 +165,12 @@ kimchi.addNetworkActions = function(network) {
                     $("[nwAct='stop']", menu).addClass("disabled");
                 }
                 $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("loading", "up");
+                $(".network-state i", $("#" + wok.escapeStr(network.name))).removeClass("fa-power-off");
+                $(".network-state i", $("#" + wok.escapeStr(network.name))).addClass("fa fa-power-off");
             }, function(err) {
                 $(".network-state", $("#" + wok.escapeStr(network.name))).switchClass("loading","down");
+                $(".network-state i", $("#" + wok.escapeStr(network.name))).removeClass("fa-power-off");
+                $(".network-state i", $("#" + wok.escapeStr(network.name))).addClass("fa fa-power-off");
                 $("[nwAct='start']", menu).removeClass("disabled");
                 if (!network.in_use) {
                     $("[nwAct='delete']", menu).removeClass("disabled");

diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js
@@ -1,7 +1,7 @@
 /*
  * Project Kimchi
  *
- * Copyright IBM Corp, 2013-2016
+ * Copyright IBM Corp, 2013-2017
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -795,7 +795,7 @@ kimchi.template_edit_main = function() {
 
     $('#tmpl-edit-button-save').on('click', function() {
         $button = $(this);
-        $button.html('<span class="wok-loading-icon" /> ' + i18n['KCHAPI6010M']);
+        $button.html('<i class="wok-loading-icon fa fa-spinner fa-pulse fa-3x fa-fw"></i>' + i18n['KCHAPI6010M']);
         $button.prop('disabled', true);
         $('.modal .wok-mask').removeClass('hidden');
         $('.modal input[type="text"]').prop('disabled', true);

diff --git a/ui/pages/guest-add.html.tmpl b/ui/pages/guest-add.html.tmpl
@@ -1,7 +1,7 @@
 #*
  * Project Kimchi
  *
- * Copyright IBM Corp, 2013-2016
+ * Copyright IBM Corp, 2013-2017
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -84,7 +84,7 @@
             </div>
     <div class="modal-footer">
             <button id="vm-doAdd" class="btn btn-default" disabled="disabled" href="javascript:void(0);">$_("Create")</button>
-            <button id="vm-doAdding" class="btn btn-default" disabled="disabled" style="display:none" href="javascript:void(0);"><span class="wok-loading-icon"></span> $_("Creating...")</button>
+            <button id="vm-doAdding" class="btn btn-default" disabled="disabled" style="display:none" href="javascript:void(0);"><i class="wok-loading-icon fa fa-spinner fa-pulse fa-3x fa-fw"></i> $_("Creating...")</button>
             <button id="vm-add=cancel" class="btn btn-default" data-dismiss="modal" type="button">$_("Cancel")</button>
     </div>
 </div>

diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl
@@ -181,7 +181,7 @@
                 <div class="wok-mask" role="presentation" class="hidden">
                     <div class="wok-mask-loader-container">
                         <div class="wok-mask-loading">
-                            <div class="wok-mask-loading-icon"></div>
+                            <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                             <div class="wok-mask-loading-text">$_("Loading")...</div>
                         </div>
                     </div>
@@ -378,7 +378,7 @@
 <script id="snapshot-tmpl" type="text/html">
     <div class="item" id="{name}">
         <span class="cell column-sel">
-            <span class="wok-loading-icon {createMode}"></span>
+            <i class="wok-loading-icon {createMode} fa fa-spinner fa-pulse fa-3x fa-fw"></i>
             <i class="fa fa-check hide"></i>
         </span>
         <span class="cell column-snapshot-name name"><input type="text" readonly="readonly" value="{name}" class="form-control" /></span>

diff --git a/ui/pages/guest.html.tmpl b/ui/pages/guest.html.tmpl
@@ -1,7 +1,7 @@
 #*
  * Project Kimchi
  *
- * Copyright IBM Corp, 2013-2016
+ * Copyright IBM Corp, 2013-2017
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -52,7 +52,7 @@
                              --><span class="caret"></span>
                             </span>
                             <span class="guest-pending hidden">
-                                <span class="wok-loading-icon"></span>
+                                <i class="wok-loading-icon fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                                 <span class="text"></span>
                             </span>
                         </button>

diff --git a/ui/pages/storagepool-add.html.tmpl b/ui/pages/storagepool-add.html.tmpl
@@ -1,7 +1,7 @@
 #*
  * Project Kimchi
  *
- * Copyright IBM Corp, 2013-2016
+ * Copyright IBM Corp, 2013-2017
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -90,12 +90,12 @@
                     </div>
                     <div class="lvm-group hidden">
                         <div class="lvm-partition">
-                            <span class="wok-loading-icon"></span><span>$_("Looking for existing lvms ...")</span>
+                            <i class="wok-loading-icon fa fa-spinner fa-pulse fa-3x fa-fw"></i><span>$_("Looking for existing lvms ...")</span>
                         </div>
                     </div>
                     <div class="form-group disk-group storageType">
                         <div class="host-partition">
-                            <span class="wok-loading-icon"></span><span>$_("Looking for available partitions ...")</span>
+                            <i class="wok-loading-icon fa fa-spinner fa-pulse fa-3x fa-fw"></i><span>$_("Looking for available partitions ...")</span>
                         </div>
                     </div>
                 </div>
@@ -158,7 +158,7 @@
         </div>
         <div class="modal-footer">
                 <button id="pool-doAdd" class="btn btn-default">$_("Create")</button>
-                <button class="btn btn-default" id="pool-loading" style="display: none"><span class="wok-loading-icon"></span>$_("Please, wait...")</button>
+                <button class="btn btn-default" id="pool-loading" style="display: none"><i class="wok-loading-icon fa fa-spinner fa-pulse fa-3x fa-fw"></i>$_("Please, wait...")</button>
                 <button class="btn btn-default" type="button" data-dismiss="modal">$_("Cancel")</button>
         </div>
         </div>

diff --git a/ui/pages/tabs/guests.html.tmpl b/ui/pages/tabs/guests.html.tmpl
@@ -74,7 +74,7 @@
     <div class="wok-mask hidden">
         <div class="wok-mask-loader-container">
             <div class="wok-mask-loading">
-                <div class="wok-mask-loading-icon"></div>
+                <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                 <div class="wok-mask-loading-text">$_("Loading...")</div>
             </div>
         </div>

diff --git a/ui/pages/tabs/network.html.tmpl b/ui/pages/tabs/network.html.tmpl
@@ -57,7 +57,7 @@
         <div class="wok-mask">
             <div class="wok-mask-loader-container">
                 <div class="wok-mask-loading">
-                    <div class="wok-mask-loading-icon"></div>
+                    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                     <div class="wok-mask-loading-text">$_("Loading...")</div>
                 </div>
             </div>
@@ -66,7 +66,7 @@
 <div id="modalWindow" class="modal fade network-modal" tabindex="-1" role="dialog" aria-labelledby="networkModalLabel" aria-hidden="true"> </div>
 <script id="networkItem" type="text/html">
     <div id='{name}' class='wok-nw-grid-body remove-when-logged-off'>
-        <span class='column-state' val="{state}"><span class='network-state {state}'><i class="fa fa-power-off"></i><span class="wok-nw-loading-icon"></span></span></span><!--
+        <span class='network-state column-state {state}' val="{state}"><i class="fa fa-power-off"></i></span><!--
                     --><span class='column-name' title="{name}" val="{name}">{name}</span><!--
                     --><span class='column-type' val="{type}">{type}</span><!--
                     --><span class='column-interface' data-placement="top" data-toggle="tooltip" title="{interface}" val="{interface}">{interface}</span><!--

diff --git a/ui/pages/tabs/storage.html.tmpl b/ui/pages/tabs/storage.html.tmpl
@@ -60,7 +60,7 @@
                         </div>
                         <div class="modal-body">
                             <div class="host-partition">
-                                <span class="wok-loading-icon"></span><span>$_("Looking for available partitions ...")</span>
+                                <i class="wok-loading-icon fa fa-spinner fa-pulse fa-3x fa-fw"></i><span>$_("Looking for available partitions ...")</span>
                             </div>
                         </div>
                         <div class="modal-footer">
@@ -74,7 +74,7 @@
         <div class="wok-mask">
             <div class="wok-mask-loader-container">
                 <div class="wok-mask-loading">
-                    <div class="wok-mask-loading-icon"></div>
+                    <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                     <div class="wok-mask-loading-text">$_("Loading...")</div>
                 </div>
             </div>
@@ -151,7 +151,7 @@
                 <div class="wok-mask hidden">
                     <div class="wok-mask-loader-container">
                         <div class="wok-mask-loading">
-                            <div class="wok-mask-loading-icon"></div>
+                            <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                             <div class="wok-mask-loading-text">$_("Loading...")</div>
                         </div>
                     </div>
@@ -173,7 +173,7 @@
             <div class="volume-box-inner" data-volume-name="{name}">
                 <span class="column-name" title="{name}">
                     <input type="checkbox" class="wok-checkbox" name="selected-volume[]" id="{checkbox}" value="{name}">
-                    <label class="volume-name volume-name-filter" for="{checkbox}"><span class="volume-inline-progress hidden"><span class="wok-loading-icon"></span></span> {name}</label><!--
+                    <label class="volume-name volume-name-filter" for="{checkbox}"><span class="volume-inline-progress hidden"><i class="wok-loading-icon fa fa-spinner fa-pulse fa-3x fa-fw"></i></span> {name}</label><!--
                    --></span><!--
                    --><span class="column-used"><span role="presentation" class="volume-icon {capacityIcon}"></span> {capacityLevel}%</span><!--
                    --><span class="column-used-by volume-used-by-filter"><i class="fa fa-exclamation-circle" data-toggle="tooltip" title="$_('Used by the following VMs:') {used_by_formatted}" data-placement="bottom" data-original-title="$_('Used by the following VMs:') {used_by_formatted}"></i><span class="format-text" data-toggle="tooltip" title="$_('Used by the following VMs:') {used_by_formatted}" data-placement="bottom" data-original-title="$_('Used by the following VMs:') {used_by_formatted}">{used_by_text}</span></span><!--

diff --git a/ui/pages/tabs/templates.html.tmpl b/ui/pages/tabs/templates.html.tmpl
@@ -76,7 +76,7 @@
     <div class="wok-mask">
         <div class="wok-mask-loader-container">
             <div class="wok-mask-loading">
-                <div class="wok-mask-loading-icon"></div>
+                <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                 <div class="wok-mask-loading-text">$_("Loading...")</div>
             </div>
         </div>

diff --git a/ui/pages/template-add.html.tmpl b/ui/pages/template-add.html.tmpl
@@ -61,7 +61,7 @@
                                 <span id="local-iso-warning-container"></span>
                                 <span id="local-iso-error-container"></span>
                                 <button class="btn btn-primary" id="iso-search" style="display: none">$_("Search ISOs")</button>
-                                <button class="btn btn-primary" id="iso-search-loading" style="display: none"><span class="wok-loading-icon"></span> $_("Please, wait...")</button>
+                                <button class="btn btn-primary" id="iso-search-loading" style="display: none"><i class="wok-loading-icon fa fa-spinner fa-pulse fa-3x fa-fw"></i> $_("Please, wait...")</button>
 
                                 <!-- 1-1-1 -->
                                 <div id="local-iso-field" class="iso-field" style="display: none;">
@@ -107,7 +107,7 @@
                                     </div>
                                     <div class="row">
                                         <button class="btn btn-primary" id="iso-more" style="display: none"><span class="text">$_("Search more ISOs")</span></button>
-                                        <button class="btn btn-primary" id="iso-more-loading" style="display: none"><span class="wok-loading-icon"></span> $_("Please, wait...")</button>
+                                        <button class="btn btn-primary" id="iso-more-loading" style="display: none"><i class="wok-loading-icon fa fa-spinner fa-pulse fa-3x fa-fw"></i> $_("Please, wait...")</button>
                                     </div>
                                 </div>
                         </div>
@@ -117,7 +117,7 @@
                     <div id="loading-isos">
                         <div class="wok-mask-loader-container">
                             <div class="wok-mask-loading">
-                                <div class="wok-mask-loading-icon"></div>
+                                <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                                 <div class="wok-mask-loading-text">$_("Loading...")</div>
                             </div>
                         </div>

diff --git a/ui/pages/template-edit.html.tmpl b/ui/pages/template-edit.html.tmpl
@@ -1,7 +1,7 @@
 #*
  * Project Kimchi
  *
- * Copyright IBM Corp, 2013-2016
+ * Copyright IBM Corp, 2013-2017
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -198,10 +198,7 @@
         </div>
         <div class="wok-mask hidden" role="presentation">
           <div class="wok-mask-loader-container">
-            <div class="wok-mask-loading">
-                <div class="wok-mask-loading-icon"></div>
-                <div class="wok-mask-loading-text">$_("Loading")...</div>
-            </div>
+            <div class="wok-mask-loading"></div>
           </div>
         </div>
     </div>