[Kimchi-devel] [PATCH] [Kimchi 1/1] Use fontawesome spinner icon instead of external image
Aline Manera
aline.manera at gmail.com
Sun Sep 10 15:34:38 UTC 2017
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 at gmail.com>
---
ui/css/kimchi.css | 34 ++++++++--------------------------
ui/css/src/modules/_network.scss | 30 +++++++-----------------------
ui/css/src/modules/_storage.scss | 2 +-
ui/js/src/kimchi.network.js | 12 ++++++++++++
ui/js/src/kimchi.template_edit_main.js | 4 ++--
ui/pages/guest-add.html.tmpl | 4 ++--
ui/pages/guest-edit.html.tmpl | 4 ++--
ui/pages/guest.html.tmpl | 4 ++--
ui/pages/storagepool-add.html.tmpl | 8 ++++----
ui/pages/tabs/guests.html.tmpl | 2 +-
ui/pages/tabs/network.html.tmpl | 4 ++--
ui/pages/tabs/storage.html.tmpl | 8 ++++----
ui/pages/tabs/templates.html.tmpl | 2 +-
ui/pages/template-add.html.tmpl | 6 +++---
ui/pages/template-edit.html.tmpl | 7 ++-----
15 files changed, 53 insertions(+), 78 deletions(-)
diff --git a/ui/css/kimchi.css b/ui/css/kimchi.css
index 4c40fcd5..c6a59051 100644
--- 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
index 1ff78671..f4fc82bd 100644
--- 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
index cf81d1b2..704b94be 100644
--- 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
index 720314d8..84ba1cb4 100644
--- 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
index 05bf1f48..e132bb56 100644
--- 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
index 8289a7f4..55bf28a4 100644
--- 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
index 15052570..03e959bb 100644
--- 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
index cc09aa05..eabfe9c4 100644
--- 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.
@@ -54,7 +54,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
index 68a52d01..6db68071 100644
--- 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
index d19fe150..c3f18cdf 100644
--- 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
index bd7aca06..5cee7cbb 100644
--- 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
index 06bfab52..1e1011d1 100644
--- 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>
@@ -147,7 +147,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>
@@ -169,7 +169,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
index 86427705..b78e7b17 100644
--- 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
index 007511fa..6cb07e58 100644
--- 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
index 4b5a4075..c5e2c948 100644
--- 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>
--
2.13.5
More information about the Kimchi-devel
mailing list