Remove spin5.svg as there is no need to use an external image file as it is available on fontawesome icons. Signed-off-by: Aline Manera <aline.manera(a)gmail.com&gt; --- COPYING | 4 --- ui/css/src/modules/_loaders.scss | 14 ++++------ ui/css/src/modules/_wok-grid.scss | 10 ++++---- ui/css/wok.css | 24 +++++------------ ui/images/theme-default/spin5.svg | 54 --------------------------------------- ui/js/src/wok.grid.js | 4 +-- ui/js/src/wok.list.js | 6 ++--- ui/js/wok.bootgrid.js | 2 +- ui/pages/tabs/settings.html.tmpl | 2 +- 9 files changed, 24 insertions(+), 96 deletions(-) delete mode 100644 ui/images/theme-default/spin5.svg diff --git a/COPYING b/COPYING index 980d0248..358e9e68 100644 --- a/COPYING +++ b/COPYING @@ -29,10 +29,6 @@ Files: ui/images/theme-default/edit-alt.svg Source: http://elusiveicons.com License: SIL-1.1 -Files: ui/images/theme-default/spin5.svg -Source: http://fontello.com -License: CC-BY-3.0 - Files: ui/libs/bootstrap/bootstrap.min.js Source: http://getbootstrap.com License: MIT diff --git a/ui/css/src/modules/_loaders.scss b/ui/css/src/modules/_loaders.scss index f7ef4c91..90a9b358 100644 --- a/ui/css/src/modules/_loaders.scss +++ b/ui/css/src/modules/_loaders.scss @@ -1,7 +1,7 @@ // // Project Wok // -// Copyright IBM Corp, 2015-2016 +// Copyright IBM Corp, 2015-2017 // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. @@ -17,13 +17,12 @@ // .wok-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: inline-block; margin-right: 5px; + font-size: 16px; } .wok-mask, .wok-grid-mask, .wok-list-mask { @@ -54,16 +53,13 @@ @extend .absolute-middle; } -.wok-mask-loading-icon, .wok-grid-loading-icon, .wok-list-loading-icon{ - background: transparent url('#{$wok-icon-path}/spin5.svg') no-repeat 50% 50%; - @include animation(spin 2s infinite linear); - height: 20px; +.wok-list-loading-icon{ width: 20px; @extend .absolute-middle; } .wok-mask-loading-text, .wok-grid-loading-text, .wok-list-loading-text { color: $gray; - padding-top: 40px; + padding-top: 15px; text-shadow: 0px 0px 10px #fff; -} \ No newline at end of file +} diff --git a/ui/css/src/modules/_wok-grid.scss b/ui/css/src/modules/_wok-grid.scss index b6c2a9ec..b2ad0bd5 100644 --- a/ui/css/src/modules/_wok-grid.scss +++ b/ui/css/src/modules/_wok-grid.scss @@ -1,7 +1,7 @@ // // Project Wok // -// Copyright IBM Corp, 2015-2016 +// Copyright IBM Corp, 2015-2017 // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. @@ -92,8 +92,6 @@ } .wok-list-loading-icon-inline { - 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%; @@ -108,8 +106,10 @@ .generating .wok-list-loading-icon-inline { display: block; position: absolute; - top: 27px; + top: 26px; left: 34px; + font-size: 16px; + width: 16px; } .wok-list > ul { @@ -288,4 +288,4 @@ outline: auto 5px -webkit-focus-ring-color; // Set default webkit focus ring color for webkit browsers } -} \ No newline at end of file +} diff --git a/ui/css/wok.css b/ui/css/wok.css index d46ea86f..b8fb721b 100644 --- a/ui/css/wok.css +++ b/ui/css/wok.css @@ -829,10 +829,6 @@ fieldset[disabled] .btn-group > span > .btn.active { } .wok-list-loading-icon-inline { - 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%; @@ -847,8 +843,10 @@ fieldset[disabled] .btn-group > span > .btn.active { .generating .wok-list-loading-icon-inline { display: block; position: absolute; - top: 27px; + top: 26px; left: 34px; + font-size: 16px; + width: 16px; } .wok-list > ul { @@ -1104,15 +1102,12 @@ fieldset[disabled] .btn-group > span > .btn.active { } .wok-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: inline-block; margin-right: 5px; + font-size: 16px; } .wok-mask, .wok-grid-mask, .wok-list-mask { @@ -1143,18 +1138,13 @@ fieldset[disabled] .btn-group > span > .btn.active { height: 40px; } -.wok-mask-loading-icon, .wok-grid-loading-icon, .wok-list-loading-icon { - background: transparent url("../images/theme-default/spin5.svg") no-repeat 50% 50%; - -webkit-animation: spin 2s infinite linear; - -o-animation: spin 2s infinite linear; - animation: spin 2s infinite linear; - height: 20px; +.wok-list-loading-icon { width: 20px; } .wok-mask-loading-text, .wok-grid-loading-text, .wok-list-loading-text { color: #444; - padding-top: 40px; + padding-top: 15px; text-shadow: 0px 0px 10px #fff; } @@ -1812,7 +1802,7 @@ span.twitter-typeahead { font-weight: 400; } -.absolute-middle, .wok-mask, .wok-grid-mask, .wok-list-mask, .wok-mask-loading, .wok-grid-loading, .wok-list-loading, .wok-mask-loader-container, .wok-grid-loader-container, .wok-list-loader-container, .wok-mask-loading-icon, .wok-grid-loading-icon, .wok-list-loading-icon { +.absolute-middle, .wok-mask, .wok-grid-mask, .wok-list-mask, .wok-mask-loading, .wok-grid-loading, .wok-list-loading, .wok-mask-loader-container, .wok-grid-loader-container, .wok-list-loader-container, .wok-list-loading-icon { margin: auto; position: absolute; top: 0; diff --git a/ui/images/theme-default/spin5.svg b/ui/images/theme-default/spin5.svg deleted file mode 100644 index 350c54e5..00000000 --- a/ui/images/theme-default/spin5.svg +++ /dev/null @@ -1,54 +0,0 @@ -<?xml version="1.0" encoding="UTF-8" standalone="no"?> -<!-- -2012 - Opensource iconic font from Fontello project http://fontello.github.com/fontelico.font/demo.html - -Vitaly Puzrin (Fontello project) - -* Angela Berbentseva (emoticons, spinners). berbentseva_angela(a)yahoo.com -* Sebastian Janzen (crowns). sebastian.janzen(a)hl-services.de, https://github.com/sja - -Contacts - -Vitaly Puzrin (Fontello project) - -vitaly(a)rcdesign.ru -https://github.com/puzrin -https://twitter.com/puzrin - -Licence - -All icons are distributed under CC BY licence. - -This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA. ---> - <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" id="spin5" height="20" width="20"> - <title id="title4144">spin5</title> - <metadata id="metadata4142"> - <rdf:RDF> - <cc:Work rdf:about=""> - <dc:format>image/svg+xml</dc:format> - <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> - <dc:title>spin5</dc:title> - <cc:license rdf:resource="http://creativecommons.org/licenses/by/3.0/" /> - <dc:creator> - <cc:Agent> - <dc:title>Angela Berbentseva</dc:title> - </cc:Agent> - </dc:creator> - <dc:rights> - <cc:Agent> - <dc:title>Fontello project</dc:title> - </cc:Agent> - </dc:rights> - </cc:Work> - <cc:License rdf:about="http://creativecommons.org/licenses/by/3.0/"> - <cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction" /> - <cc:permits rdf:resource="http://creativecommons.org/ns#Distribution" /> - <cc:requires rdf:resource="http://creativecommons.org/ns#Notice" /> - <cc:requires rdf:resource="http://creativecommons.org/ns#Attribution" /> - <cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks" /> - </cc:License> - </rdf:RDF> - </metadata> - <path id="path3" d="m 9.23077,19.99992 c -0.11988,0 -0.23976,-0.0999 -0.23976,-0.23976 l 0,-3.63636 c 0,-0.11988 0.0999,-0.23976 0.23976,-0.23976 l 1.37862,0 c 0,0 0.02,0 0.02,0 0.11988,0 0.23976,0.0999 0.23976,0.23976 l 0,3.63636 c 0,0.11988 -0.0999,0.23976 -0.23976,0.23976 l -1.37862,0 c 0,0 -0.02,0 -0.02,0 z m 4.995,-0.93906 c -0.0799,0 -0.15984,-0.04 -0.1998,-0.11988 l -1.81818,-3.15684 c -0.0599,-0.11988 -0.02,-0.25974 0.0799,-0.31968 l 1.1988,-0.69931 c 0,0 0,0 0.02,0 0.11988,-0.0599 0.25974,-0.02 0.31968,0.0799 l 1.81819,3.15685 c 0.0599,0.11988 0.02,0.25974 -0.0799,0.31968 l -1.21879,0.6993 c -0.04,0.02 -0.0799,0.02 -0.0999,0.04 z m -8.55144,-0.0599 c -0.04,0 -0.0799,-0.02 -0.0999,-0.04 l -1.21879,-0.6993 c -0.0999,-0.0599 -0.13986,-0.1998 -0.0799,-0.31968 l 1.81819,-3.13687 c 0,0 0,0 0,-0.02 0.0599,-0.11988 0.1998,-0.13986 0.31968,-0.0799 l 1.21878,0.69931 c 0.0999,0.0599 0.13986,0.1998 0.0799,0.31968 l -1.81818,3.13686 c 0,0 0,0 0,0.02 -0.04,0.0799 -0.11988,0.11988 -0.1998,0.11988 z M 18.06194,15.7642 c -0.04,0 -0.0799,-0.02 -0.0999,-0.04 l -3.13687,-1.81819 c 0,0 0,0 -0.02,0 -0.11988,-0.0599 -0.13986,-0.1998 -0.0799,-0.31968 l 0.69931,-1.21878 c 0.0599,-0.0999 0.1998,-0.13986 0.31968,-0.0799 l 3.13686,1.81818 c 0,0 0,0 0.02,0 0.11988,0.0599 0.13986,0.1998 0.0799,0.31968 l -0.6993,1.21879 c -0.04,0.0799 -0.11988,0.11988 -0.1998,0.11988 z M 1.87812,15.6643 c -0.0799,0 -0.15984,-0.04 -0.1998,-0.11988 l -0.6993,-1.21879 c -0.0599,-0.11988 -0.02,-0.25974 0.0799,-0.31968 l 3.15684,-1.81818 c 0.11988,-0.0599 0.25974,-0.02 0.31968,0.0799 l 0.69931,1.1988 c 0,0 0,0 0,0.02 0.0599,0.11988 0.02,0.25974 -0.0799,0.31968 L 1.998,15.62434 c -0.04,0.02 -0.0799,0.02 -0.0999,0.04 z m 14.24576,-4.67533 c -0.11988,0 -0.23976,-0.0999 -0.23976,-0.23976 l 0,-1.37862 c 0,0 0,-0.02 0,-0.02 0,-0.11988 0.0999,-0.23976 0.23976,-0.23976 l 3.63636,0 C 19.88012,9.11083 20,9.21073 20,9.35059 l 0,1.37862 c 0,0 0,0.02 0,0.02 0,0.11988 -0.0999,0.23976 -0.23976,0.23976 l -3.63636,0 z M 0.23976,10.88907 C 0.11988,10.88907 0,10.78917 0,10.64931 L 0,9.27069 c 0,0 0,-0.02 0,-0.02 C 0,9.13081 0.0999,9.01093 0.23976,9.01093 l 3.63636,0 c 0.11988,0 0.23976,0.0999 0.23976,0.23976 l 0,1.37862 c 0,0 0,0.02 0,0.02 0,0.11988 -0.0999,0.23976 -0.23976,0.23976 l -3.63636,0 z M 15.68432,7.83213 c -0.0799,0 -0.15984,-0.04 -0.1998,-0.11988 l -0.69931,-1.1988 c 0,0 0,0 0,-0.02 -0.0599,-0.11988 -0.02,-0.25974 0.0799,-0.31968 l 3.15685,-1.81819 c 0.11988,-0.0599 0.25974,-0.02 0.31968,0.0799 l 0.6993,1.21879 c 0.0599,0.11988 0.02,0.25974 -0.0799,0.31968 L 15.8042,7.79213 c -0.04,0.02 -0.0799,0.02 -0.0999,0.04 z M 4.37562,7.73223 c -0.04,0 -0.0799,-0.02 -0.0999,-0.04 L 1.13886,5.87405 c 0,0 0,0 -0.02,0 C 0.99898,5.81415 0.979,5.67425 1.03896,5.55437 l 0.6993,-1.21879 c 0.0599,-0.0999 0.1998,-0.13986 0.31968,-0.0799 l 3.13687,1.81819 c 0,0 0,0 0.02,0 0.11988,0.0599 0.13986,0.1998 0.0799,0.31968 L 4.5954,7.61233 c -0.04,0.0799 -0.11988,0.11988 -0.1998,0.11988 z m 9.33067,-2.41758 c -0.04,0 -0.0799,-0.02 -0.0999,-0.04 L 12.38761,4.57534 c -0.0999,-0.0599 -0.13986,-0.1998 -0.0799,-0.31968 L 14.12589,1.1188 c 0,0 0,0 0,-0.02 0.0599,-0.11988 0.1998,-0.13986 0.31968,-0.0799 l 1.21879,0.6993 c 0.0999,0.0599 0.13986,0.1998 0.0799,0.31968 l -1.81819,3.13687 c 0,0 0,0 0,0.02 -0.04,0.0799 -0.11988,0.11988 -0.1998,0.11988 z M 6.39361,5.25475 c -0.0799,0 -0.15984,-0.04 -0.1998,-0.11988 L 4.37562,1.97802 c -0.0599,-0.11988 -0.02,-0.25974 0.0799,-0.31968 l 1.21879,-0.6993 c 0.11988,-0.0599 0.25974,-0.02 0.31968,0.0799 l 1.81818,3.15684 c 0.0599,0.11988 0.02,0.25974 -0.0799,0.31968 l -1.1988,0.69931 c 0,0 0,0 -0.02,0 -0.04,0.02 -0.0799,0.04 -0.0999,0.04 z M 9.35065,4.11588 c -0.11988,0 -0.23976,-0.0999 -0.23976,-0.23976 l 0,-3.63636 C 9.11089,0.11988 9.21079,0 9.35065,0 l 1.37862,0 c 0,0 0.02,0 0.02,0 0.11988,0 0.23976,0.0999 0.23976,0.23976 l 0,3.63636 c 0,0.11988 -0.0999,0.23976 -0.23976,0.23976 l -1.37862,0 c 0,0 -0.02,0 -0.02,0 z" style="fill:#777777;" /> - </svg> diff --git a/ui/js/src/wok.grid.js b/ui/js/src/wok.grid.js index 9d814018..098128e7 100644 --- a/ui/js/src/wok.grid.js +++ b/ui/js/src/wok.grid.js @@ -1,7 +1,7 @@ /* * Project Wok * - * Copyright IBM Corp, 2015-2016 + * Copyright IBM Corp, 2015-2017 * * Code derived from Project Kimchi * @@ -47,7 +47,7 @@ wok.widget.Grid.prototype = (function() { '<div class="wok-grid-mask hidden">', '<div class="wok-grid-loader-container">', '<div class="wok-grid-loading">', - '<div class="wok-grid-loading-icon"></div>', + '<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>', '<div class="wok-grid-loading-text">', '{loading}', '</div>', diff --git a/ui/js/src/wok.list.js b/ui/js/src/wok.list.js index a92db199..dc15d40a 100644 --- a/ui/js/src/wok.list.js +++ b/ui/js/src/wok.list.js @@ -1,7 +1,7 @@ /* * Project Wok * - * Copyright IBM Corp, 2015-2016 + * Copyright IBM Corp, 2015-2017 * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -58,7 +58,7 @@ wok.widget.List.prototype = (function() { '<div class="wok-list-mask hidden">', '<div class="wok-list-loader-container">', '<div class="wok-list-loading">', - '<div class="wok-list-loading-icon"></div>', + '<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>', '<div class="wok-list-loading-text">', '{loading}', '</div>', @@ -143,7 +143,7 @@ wok.widget.List.prototype = (function() { '</span></span>' ].join(''); } - columnData += (field.type === 'name') ? ('<span role="status" class="wok-list-loading-icon-inline"></span><span class="wok-list-name '+field.cssClass+'" title="'+field.label+'">'+value.toString()+'</span>') : (field.type !== 'status' ? '<span class="wok-list-description '+field.cssClass+'" title="'+field.label+'">' + value.toString() + '</span>' : ''); + columnData += (field.type === 'name') ? ('<i class="wok-list-loading-icon-inline fa fa-spinner fa-pulse fa-3x fa-fw"></i><span class="wok-list-name '+field.cssClass+'" title="'+field.label+'">'+value.toString()+'</span>') : (field.type !== 'status' ? '<span class="wok-list-description '+field.cssClass+'" title="'+field.label+'">' + value.toString() + '</span>' : ''); columnNodeHTML = [ '<input class="wok-checkbox" type="checkbox" name="'+checkboxName+'" id="wok-list-',i+1,'-check" />', '<label for="wok-list-',i+1,'-check" class="wok-list-cell', styleClass, '">', diff --git a/ui/js/wok.bootgrid.js b/ui/js/wok.bootgrid.js index e2da3936..344a1c79 100644 --- a/ui/js/wok.bootgrid.js +++ b/ui/js/wok.bootgrid.js @@ -29,7 +29,7 @@ wok.createBootgrid = function(opts) { var gridloadingHtml = ['<div id="' + gridId + '-loading" class="wok-list-mask">', '<div class="wok-list-loader-container">', '<div class="wok-list-loading">', - '<div class="wok-list-loading-icon"></div>', + '<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>', '<div class="wok-list-loading-text">' + gridMessage + '</div>', '</div>', '</div>', diff --git a/ui/pages/tabs/settings.html.tmpl b/ui/pages/tabs/settings.html.tmpl index 5f528390..f05d4647 100644 --- a/ui/pages/tabs/settings.html.tmpl +++ b/ui/pages/tabs/settings.html.tmpl @@ -89,7 +89,7 @@ Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA <div class='wok-mask' role='presentation'> <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> -- 2.13.5