From: Moriel Schottlender <moriel@gmail.com>
Date: Wed, 1 Mar 2017 01:22:54 +0000 (-0800)
Subject: RCFilters: Add loading animation
X-Git-Tag: 1.31.0-rc.0~3933^2
X-Git-Url: http://git.cyclocoop.org/wiki/Target_page?a=commitdiff_plain;h=658af7f47f5ce135e09bac6a304abd31aba4bc7e;p=lhc%2Fweb%2Fwiklou.git

RCFilters: Add loading animation

Change-Id: I09d39a387eb1ed2fe4c1292f0a255d180035baa0
---

diff --git a/includes/specials/SpecialRecentchanges.php b/includes/specials/SpecialRecentchanges.php
index eb6d9394bd..a2e643bf6b 100644
--- a/includes/specials/SpecialRecentchanges.php
+++ b/includes/specials/SpecialRecentchanges.php
@@ -455,6 +455,17 @@ class SpecialRecentChanges extends ChangesListSpecialPage {
 		$panel[] = $form;
 		$panelString = implode( "\n", $panel );
 
+		// Insert a placeholder for RCFilters
+		if ( $this->getUser()->getOption( 'rcenhancedfilters' ) ) {
+			$this->getOutput()->addModuleStyles( 'mediawiki.rcfilters.filters.base.styles' );
+			$this->getOutput()->addHTML(
+				Html::element(
+					'div',
+					[ 'class' => 'rcfilters-container' ]
+				)
+			);
+		}
+
 		$this->getOutput()->addHTML(
 			Xml::fieldset(
 				$this->msg( 'recentchanges-legend' )->text(),
diff --git a/resources/Resources.php b/resources/Resources.php
index 2a6562dee3..5406480bed 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1751,6 +1751,11 @@ return [
 
 	/* MediaWiki Special pages */
 
+	'mediawiki.rcfilters.filters.base.styles' => [
+		'styles' => [
+			'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less',
+		],
+	],
 	'mediawiki.rcfilters.filters.dm' => [
 		'scripts' => [
 			'resources/src/mediawiki.rcfilters/mw.rcfilters.js',
diff --git a/resources/src/mediawiki.rcfilters/images/pending.gif b/resources/src/mediawiki.rcfilters/images/pending.gif
new file mode 100644
index 0000000000..1194eed293
Binary files /dev/null and b/resources/src/mediawiki.rcfilters/images/pending.gif differ
diff --git a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
index 33e9f57359..6cfeb1a72a 100644
--- a/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
+++ b/resources/src/mediawiki.rcfilters/mw.rcfilters.init.js
@@ -23,7 +23,7 @@
 
 			// eslint-disable-next-line no-new
 			new mw.rcfilters.ui.FormWrapperWidget(
-				changesListModel, $( '.rcoptions form' ) );
+				changesListModel, $( '.rcoptions' ) );
 
 			controller.initialize( {
 				registration: {
@@ -184,7 +184,7 @@
 				}
 			} );
 
-			$( '.rcoptions' ).before( filtersWidget.$element );
+			$( '.rcfilters-container' ).append( filtersWidget.$element );
 			$( 'body' ).append( $overlay );
 
 			// HACK: Remove old-style filter links for filters handled by the widget
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index 8423363ee4..e2775f92a1 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -1,9 +1,31 @@
 // Corrections for the standard special page
-.rcoptions {
-	border: 0;
-	border-bottom: 1px solid #a2a9b1;
+.client-js{
+	.rcoptions {
+		border: 0;
+		border-bottom: 1px solid #a2a9b1;
 
-	legend {
-		display: none;
+		legend {
+			display: none;
+		}
+
+		&:not( .mw-rcfilters-ui-ready ) {
+			/* @embed */
+			background-image: url( ../images/pending.gif );
+			margin: 0;
+
+			* {
+				visibility: hidden;
+			}
+		}
+	}
+
+	.rcfilters-container {
+		min-height: 100px;
+		margin: 0;
+
+		&:not( .mw-rcfilters-ui-ready ) {
+			/* @embed */
+			background-image: url( ../images/pending.gif );
+		}
 	}
 }
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
index 02ddb549d0..cad3dce7c5 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@ -74,6 +74,7 @@
 		// Initialize
 		this.$element
 			.addClass( 'mw-rcfilters-ui-filterWrapperWidget' )
+			.addClass( 'mw-rcfilters-ui-ready' )
 			.append( this.capsule.$element, this.textInput.$element );
 	};
 
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FormWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FormWrapperWidget.js
index 2513b075ea..d089086dda 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FormWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FormWrapperWidget.js
@@ -18,13 +18,17 @@
 		} ) );
 
 		this.model = model;
-		this.$submitButton = this.$element.find( 'input[type=submit]' );
+		this.$submitButton = this.$element.find( 'form input[type=submit]' );
 
 		// Events
 		this.model.connect( this, {
 			invalidate: 'onModelInvalidate',
 			update: 'onModelUpdate'
 		} );
+
+		this.$element
+			.addClass( 'mw-rcfilters-ui-FormWrapperWidget' )
+			.addClass( 'mw-rcfilters-ui-ready' );
 	};
 
 	/* Initialization */