[MediaWiki-commits] [Gerrit] mediawiki/core[master]: RCFilters: Change loading animation
jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/366770 )
Change subject: RCFilters: Change loading animation
..
RCFilters: Change loading animation
Bug: T165286
Change-Id: If816dd1e3a2677c36195546c51f87505ba883e04
---
M includes/specials/SpecialRecentchanges.php
M resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
3 files changed, 60 insertions(+), 8 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git a/includes/specials/SpecialRecentchanges.php
b/includes/specials/SpecialRecentchanges.php
index 15bbffd..c9c2475 100644
--- a/includes/specials/SpecialRecentchanges.php
+++ b/includes/specials/SpecialRecentchanges.php
@@ -669,6 +669,15 @@
[ 'class' => 'rcfilters-container' ]
);
+ $loadingContainer = Html::rawElement(
+ 'div',
+ [ 'class' => 'rcfilters-spinner' ],
+ Html::element(
+ 'div',
+ [ 'class' => 'rcfilters-spinner-bounce'
]
+ )
+ );
+
// Wrap both with rcfilters-head
$this->getOutput()->addHTML(
Html::rawElement(
@@ -677,6 +686,9 @@
$rcfilterContainer . $rcoptions
)
);
+
+ // Add spinner
+ $this->getOutput()->addHTML( $loadingContainer );
} else {
$this->getOutput()->addHTML( $rcoptions );
}
diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
index 6cd2d0b..9da3f8c 100644
--- a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
+++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
@@ -39,6 +39,7 @@
// Set as ready
$( '.rcfilters-head' ).addClass(
'mw-rcfilters-ui-ready' );
+ $( '.rcfilters-spinner' ).detach();
$( 'a.mw-helplink' ).attr(
'href',
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index 6277fd9..305f3f9 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -1,5 +1,5 @@
// Corrections for the standard special page
-.client-js{
+.client-js {
.rcoptions {
border: 0;
border-bottom: 1px solid #a2a9b1;
@@ -11,14 +11,10 @@
.rcfilters-head {
min-height: 310px;
- &:not( .mw-rcfilters-ui-ready ) {
- /* @embed */
- background-image: url( ../images/pending.gif );
- margin: 0;
- * {
- visibility: hidden;
- }
+ &:not( .mw-rcfilters-ui-ready ) {
+ opacity: 0.5;
+ pointer-events: none;
}
}
@@ -33,8 +29,51 @@
// message of our own
display: none;
}
+
+ .rcfilters-spinner {
+ margin: -2em auto 0;
+ width: 70px;
+ opacity: 0.8;
+ display: block;
+ white-space: nowrap;
+
+ & .rcfilters-spinner-bounce,
+ &:before,
+ &:after {
+ content: '';
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ background-color: #c8ccd1;
+ border-radius: 100%;
+ animation: rcfiltersBouncedelay 1.5s infinite
ease-in-out;
+ animation-fill-mode: both;
+ animation-delay: -0.16s;
+ }
+
+ &:before {
+ animation-delay: -0.33s;
+ }
+
+ &:after {
+ animation-delay: 0s;
+ }
+
+ }
}
.mw-rcfilters-staticfilters-selected {
font-weight: bold;
}
+
+@keyframes rcfiltersBouncedelay {
+ 0%,
+ 100%,
+ 80% {
+ transform: scale( 0.7 );
+ }
+ 40% {
+ transform: scale( 1 );
+ background-color: #a2a9b1;
+ }
+}
--
To view, visit https://gerrit.wikimedia.org/r/366770
To unsubscribe, visit
[MediaWiki-commits] [Gerrit] mediawiki/core[master]: RCFilters: Change loading animation
Mooeypoo has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/366770 )
Change subject: RCFilters: Change loading animation
..
RCFilters: Change loading animation
Bug: T165286
Change-Id: If816dd1e3a2677c36195546c51f87505ba883e04
---
M includes/specials/SpecialRecentchanges.php
M resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
M resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
3 files changed, 60 insertions(+), 7 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/70/366770/1
diff --git a/includes/specials/SpecialRecentchanges.php
b/includes/specials/SpecialRecentchanges.php
index 15bbffd..c9c2475 100644
--- a/includes/specials/SpecialRecentchanges.php
+++ b/includes/specials/SpecialRecentchanges.php
@@ -669,6 +669,15 @@
[ 'class' => 'rcfilters-container' ]
);
+ $loadingContainer = Html::rawElement(
+ 'div',
+ [ 'class' => 'rcfilters-spinner' ],
+ Html::element(
+ 'div',
+ [ 'class' => 'rcfilters-spinner-bounce'
]
+ )
+ );
+
// Wrap both with rcfilters-head
$this->getOutput()->addHTML(
Html::rawElement(
@@ -677,6 +686,9 @@
$rcfilterContainer . $rcoptions
)
);
+
+ // Add spinner
+ $this->getOutput()->addHTML( $loadingContainer );
} else {
$this->getOutput()->addHTML( $rcoptions );
}
diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
index 6cd2d0b..9da3f8c 100644
--- a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
+++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
@@ -39,6 +39,7 @@
// Set as ready
$( '.rcfilters-head' ).addClass(
'mw-rcfilters-ui-ready' );
+ $( '.rcfilters-spinner' ).detach();
$( 'a.mw-helplink' ).attr(
'href',
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index 6277fd9..db03f26 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -11,14 +11,10 @@
.rcfilters-head {
min-height: 310px;
- &:not( .mw-rcfilters-ui-ready ) {
- /* @embed */
- background-image: url( ../images/pending.gif );
- margin: 0;
- * {
- visibility: hidden;
- }
+ &:not( .mw-rcfilters-ui-ready ) {
+ opacity: 0.5;
+ pointer-events: none;
}
}
@@ -33,8 +29,52 @@
// message of our own
display: none;
}
+
+ .rcfilters-spinner {
+ margin: -2em auto 0;
+ width: 70px;
+ opacity:0.8;
+ display: block;
+ white-space: nowrap;
+
+ & .rcfilters-spinner-bounce,
+ &:before,
+ &:after {
+ content: '';
+ display: inline-block;
+ width: 12px;
+ height: 12px;
+ background-color: #C8CCD1;
+ border-radius: 100%;
+ display: inline-block;
+ animation: rcfiltersBouncedelay 1.5s infinite
ease-in-out;
+ animation-fill-mode: both;
+ animation-delay: -.16s;
+ }
+
+ &:before {
+ animation-delay: -.33s;
+ }
+
+ &:after {
+ animation-delay: 0;
+ }
+
+ }
}
.mw-rcfilters-staticfilters-selected {
font-weight: bold;
}
+
+@keyframes rcfiltersBouncedelay {
+ 0%,
+ 100%,
+ 80% {
+ transform: scale(0.7);
+ }
+ 40% {
+ transform: scale(1);
+ background-color: #A2A9B1;
+ }
+}
--
To view, visit https://gerrit.wikimedia.org/r/366770
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: If816dd1e3a2677c36195546c51f87505ba883e04
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
