Pginer has uploaded a new change for review.
https://gerrit.wikimedia.org/r/53353
Change subject: Loading indicator and mixins for SVG and animation support
......................................................................
Loading indicator and mixins for SVG and animation support
This patchset includes:
* Loading indicator with a gif fallback
* A mixin for cross-browser SVG support
* A mixin for rotation-based animations
* An example file to see the loading indicator in action
This loading indicator is based on the ine used at
translatewiki.net/w/i.php?title=Special:Translate&tux=1
Change-Id: Iabe8c27f2256a07b72a646aede505f798b990d13
---
M modules/css/ext.agora.css
A modules/img/loading.gif
A modules/img/loading.svg
M modules/scss/components/_all.scss
A modules/scss/components/_status.scss
M modules/scss/mixins/_all.scss
A modules/scss/mixins/_animation.scss
A modules/scss/mixins/_images.scss
A tests/loading-indicator.html
9 files changed, 159 insertions(+), 7 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Agora
refs/changes/53/53353/1
diff --git a/modules/css/ext.agora.css b/modules/css/ext.agora.css
index 704ce1b..ada9714 100644
--- a/modules/css/ext.agora.css
+++ b/modules/css/ext.agora.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
/* Agora styles */
/* _effects.scss */
/* Mixins for visual effects in CSS3 */
@@ -253,7 +254,7 @@
margin: 0 0 0.2em 0;
padding: 0;
}
-/* line 38, ../scss/components/_forms.scss */
+/* line 37, ../scss/components/_forms.scss */
ul.mw-ui-formlist li label.mw-ui-checkbox-label, ul.mw-ui-formlist li
label.mw-ui-radio-label {
cursor: pointer;
vertical-align: bottom;
@@ -272,7 +273,7 @@
border-color: #c9c9c9;
cursor: pointer;
}
-/* line 45, ../scss/components/_forms.scss */
+/* line 44, ../scss/components/_forms.scss */
ul.mw-ui-formlist li input[type="checkbox"],
ul.mw-ui-formlist li input[type="radio"] {
display: inline;
@@ -282,7 +283,7 @@
width: auto;
}
-/* line 60, ../scss/components/_forms.scss */
+/* line 59, ../scss/components/_forms.scss */
.mw-ui-input, .mw-ui-formlist li input {
outline: 0;
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
@@ -303,7 +304,7 @@
border-color: #4091ed;
}
-/* line 65, ../scss/components/_forms.scss */
+/* line 64, ../scss/components/_forms.scss */
.mw-ui-block-label, .mw-ui-formlist li label {
font-weight: bold;
font-size: 0.9em;
@@ -314,7 +315,7 @@
font-weight: normal;
}
-/* line 74, ../scss/components/_forms.scss */
+/* line 73, ../scss/components/_forms.scss */
.mw-ui-checkbox-label, .mw-ui-radio-label {
cursor: pointer;
vertical-align: bottom;
@@ -333,3 +334,46 @@
border-color: #c9c9c9;
cursor: pointer;
}
+
+@-webkit-keyframes spin {
+ /* line 15, ../scss/mixins/_animation.scss */
+ from {
+ -webkit-transform: rotate(0deg);
+ }
+
+ /* line 16, ../scss/mixins/_animation.scss */
+ to {
+ -webkit-transform: rotate(360deg);
+ }
+}
+
+@keyframes spin {
+ /* line 20, ../scss/mixins/_animation.scss */
+ from {
+ transform: rotate(0deg);
+ }
+
+ /* line 21, ../scss/mixins/_animation.scss */
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+/* line 3, ../scss/components/_status.scss */
+.loading-indicator {
+ background: transparent url("../img/loading.gif") right bottom no-repeat;
+ background-image: -webkit-linear-gradient(transparent, transparent),
url("../img/loading.svg");
+ background-image: linear-gradient(transparent, transparent),
url("../img/loading.svg");
+ background-size: 100%;
+ -webkit-animation-name: spin;
+ -webkit-animation-duration: 1s;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-timing-function: linear;
+ animation-name: spin;
+ animation-duration: 1s;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
+ height: 34px;
+ width: 34px;
+ backface-visibility: hidden;
+}
diff --git a/modules/img/loading.gif b/modules/img/loading.gif
new file mode 100644
index 0000000..2212db9
--- /dev/null
+++ b/modules/img/loading.gif
Binary files differ
diff --git a/modules/img/loading.svg b/modules/img/loading.svg
new file mode 100644
index 0000000..92f84cd
--- /dev/null
+++ b/modules/img/loading.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<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"
+ width="34"
+ height="34.03125"
+ id="svg9613">
+ <defs
+ id="defs9615" />
+ <metadata
+ id="metadata9618">
+ <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></dc:title>
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <g
+ id="g2987">
+ <path
+ d="m 16.977523,0.24095147 c -9.2629169,0 -16.73280045,7.51449143
-16.73280045,16.77740253 0,9.262912 7.46988355,16.777403 16.73280045,16.777403
9.262917,0 16.777413,-7.514491 16.777413,-16.777403 0,-9.2629111
-7.514496,-16.77740253 -16.777413,-16.77740253 z m 0,4.14972823 c 6.966927,0
12.627682,5.6607523 12.627682,12.6276743 0,6.966923 -5.660755,12.583053
-12.627682,12.583053 -6.966937,0 -12.5830596,-5.61613 -12.5830596,-12.583053
0,-6.966922 5.6161226,-12.6276743 12.5830596,-12.6276743 z"
+ id="path15290-7-0-9-5-1-59-0-3-2"
+
style="color:#000000;fill:#000000;fill-opacity:0.08333333;fill-rule:nonzero;stroke:#565656;stroke-width:0.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:0.19607843;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
/>
+ <path
+ d="M 31.677259,17.003529 A 14.680208,14.680199 0 0 1
20.796571,31.183505"
+ id="path15290-6-0-6-1-0-0-16-1-0-06"
+
style="color:#000000;fill:none;stroke:#3366bb;stroke-width:2.2583456;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
/>
+ </g>
+</svg>
diff --git a/modules/scss/components/_all.scss
b/modules/scss/components/_all.scss
index 760fdee..c1d5df1 100644
--- a/modules/scss/components/_all.scss
+++ b/modules/scss/components/_all.scss
@@ -1,3 +1,4 @@
@import "utilities";
@import "buttons";
-@import "forms";
\ No newline at end of file
+@import "forms";
+@import "status";
\ No newline at end of file
diff --git a/modules/scss/components/_status.scss
b/modules/scss/components/_status.scss
new file mode 100644
index 0000000..3656d3f
--- /dev/null
+++ b/modules/scss/components/_status.scss
@@ -0,0 +1,9 @@
+@include animation-rotate(spin);
+
+.loading-indicator{
+ @include vector-image("../img/loading.svg", "../img/loading.gif", right
bottom);
+ @include animation(spin, 1s, infinite, linear);
+ height: 34px;
+ width: 34px;
+ backface-visibility: hidden;
+}
\ No newline at end of file
diff --git a/modules/scss/mixins/_all.scss b/modules/scss/mixins/_all.scss
index adc48cd..a4bec8e 100644
--- a/modules/scss/mixins/_all.scss
+++ b/modules/scss/mixins/_all.scss
@@ -1,4 +1,6 @@
@import "utilities";
@import "type";
@import "effects";
-@import "forms";
\ No newline at end of file
+@import "forms";
+@import "images";
+@import "animation";
\ No newline at end of file
diff --git a/modules/scss/mixins/_animation.scss
b/modules/scss/mixins/_animation.scss
new file mode 100644
index 0000000..bc47983
--- /dev/null
+++ b/modules/scss/mixins/_animation.scss
@@ -0,0 +1,23 @@
+@mixin animation($name, $duration, $iteration-count:infinite,
$timing-function:ease) {
+ -webkit-animation-name: $name;
+ -webkit-animation-duration: $duration;
+ -webkit-animation-iteration-count: $iteration-count;
+ -webkit-animation-timing-function: $timing-function;
+
+ animation-name: $name;
+ animation-duration: $duration;
+ animation-iteration-count: $iteration-count;
+ animation-timing-function: $timing-function;
+}
+
+@mixin animation-rotate($name, $from: 0deg, $to: 360deg) {
+ @-webkit-keyframes $name {
+ from { -webkit-transform: rotate($from); }
+ to { -webkit-transform: rotate($to); }
+ }
+
+ @keyframes $name {
+ from { transform: rotate($from); }
+ to { transform: rotate($to); }
+ }
+}
diff --git a/modules/scss/mixins/_images.scss b/modules/scss/mixins/_images.scss
new file mode 100644
index 0000000..ba963b2
--- /dev/null
+++ b/modules/scss/mixins/_images.scss
@@ -0,0 +1,10 @@
+// ----------------------------------------------------------------------------
+// SVG with fallback support
+// ----------------------------------------------------------------------------
+
+@mixin vector-image($img, $fallback, $position: center center, $size: 100%) {
+ background: transparent url($fallback) $position no-repeat;
+ background-image: -webkit-linear-gradient(transparent, transparent),
url($img);
+ background-image: linear-gradient(transparent, transparent), url($img);
+ background-size: $size;
+}
\ No newline at end of file
diff --git a/tests/loading-indicator.html b/tests/loading-indicator.html
new file mode 100644
index 0000000..55dee33
--- /dev/null
+++ b/tests/loading-indicator.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
+<html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="eng" lang="eng">
+ <head>
+ <meta http-equiv="content-type" content="text/html;
charset=utf-8" />
+ <title>Loading sprite</title>
+ <meta name="keywords" content="" />
+
+ <style type="text/css">
+ #container {
+ margin: 100px 100px;
+ }
+ </style>
+ <link rel="stylesheet" href="../modules/css/ext.agora.css">
+ </head>
+ <body>
+ <div id="container">
+ <div class="loading-indicator"></div>
+ <div>
+ Loading...
+ </div>
+ </div>
+ </body>
+</html>
--
To view, visit https://gerrit.wikimedia.org/r/53353
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Iabe8c27f2256a07b72a646aede505f798b990d13
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Agora
Gerrit-Branch: master
Gerrit-Owner: Pginer <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
