From e3eea486cae92f89f922b122054a5d83432163fa Mon Sep 17 00:00:00 2001 From: Aline Manera Date: Sun, 10 Sep 2017 00:42:07 -0300 Subject: [PATCH] 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 --- 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 ff387d99f..b6bd5173e 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 1ff78671b..f4fc82bda 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 cf81d1b2b..704b94be6 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 720314d83..84ba1cb41 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 05bf1f48d..e132bb566 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(' ' + i18n['KCHAPI6010M']); + $button.html('' + 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 8289a7f49..55bf28a46 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 @@
- +
diff --git a/ui/pages/guest-edit.html.tmpl b/ui/pages/guest-edit.html.tmpl index 150525708..03e959bb9 100644 --- a/ui/pages/guest-edit.html.tmpl +++ b/ui/pages/guest-edit.html.tmpl @@ -181,7 +181,7 @@