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> --- 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