[Kimchi-devel] [PATCH] [Wok 1/1] Use fontawesome spinner instead of external image
Aline Manera
aline.manera at gmail.com
Sun Sep 10 15:33:03 UTC 2017
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 at gmail.com>
---
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 at yahoo.com
-* Sebastian Janzen (crowns). sebastian.janzen at hl-services.de, https://github.com/sja
-
-Contacts
-
-Vitaly Puzrin (Fontello project)
-
-vitaly at 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
More information about the Kimchi-devel
mailing list