From: Fomafix <fomafix@googlemail.com>
Date: Thu, 14 Feb 2019 17:43:55 +0000 (+0100)
Subject: Recentchanges: Hide instead of disable namespace selector checkboxes
X-Git-Tag: 1.34.0-rc.0~2656^2
X-Git-Url: http://git.cyclocoop.org/?a=commitdiff_plain;h=06a9e62b52924ccc371c15385eb7f991ac421f3b;p=lhc%2Fweb%2Fwiklou.git

Recentchanges: Hide instead of disable namespace selector checkboxes

* Set the initial state of the visibility of the checkboxes already in
  HTML. This avoids a flash of not-hidden checkboxes while loading.
* Also add class="mw-input-with-label" to prevent line breaks in the
  label.

Change-Id: I15781b95590faa9cf65c19fe6fc84fa94ec786dc
---

diff --git a/includes/specials/SpecialRecentchanges.php b/includes/specials/SpecialRecentchanges.php
index 1e016a5f10..22b3bd6720 100644
--- a/includes/specials/SpecialRecentchanges.php
+++ b/includes/specials/SpecialRecentchanges.php
@@ -682,16 +682,21 @@ class SpecialRecentChanges extends ChangesListSpecialPage {
 			[ 'name' => 'namespace', 'id' => 'namespace' ]
 		);
 		$nsLabel = Xml::label( $this->msg( 'namespace' )->text(), 'namespace' );
-		$invert = Xml::checkLabel(
+		$attribs = [ 'class' => [ 'mw-input-with-label' ] ];
+		// Hide the checkboxes when the namespace filter is set to 'all'.
+		if ( $opts['namespace'] === '' ) {
+			$attribs['class'][] = 'mw-input-hidden';
+		}
+		$invert = Html::rawElement( 'span', $attribs, Xml::checkLabel(
 			$this->msg( 'invert' )->text(), 'invert', 'nsinvert',
 			$opts['invert'],
 			[ 'title' => $this->msg( 'tooltip-invert' )->text() ]
-		);
-		$associated = Xml::checkLabel(
+		) );
+		$associated = Html::rawElement( 'span', $attribs, Xml::checkLabel(
 			$this->msg( 'namespace_association' )->text(), 'associated', 'nsassociated',
 			$opts['associated'],
 			[ 'title' => $this->msg( 'tooltip-namespace_association' )->text() ]
-		);
+		) );
 
 		return [ $nsLabel, "$nsSelect $invert $associated" ];
 	}
diff --git a/resources/src/mediawiki.special.changeslist.less b/resources/src/mediawiki.special.changeslist.less
index ce43855681..c78354b2b1 100644
--- a/resources/src/mediawiki.special.changeslist.less
+++ b/resources/src/mediawiki.special.changeslist.less
@@ -2,6 +2,15 @@
  * Styling for Special:Watchlist and Special:RecentChanges
  */
 
+.client-js .mw-input-hidden {
+	display: none;
+}
+
+/* Make sure namespace label is aligned correctly on mobile when checkboxes are displayed */
+.mw-label.mw-namespace-label {
+	vertical-align: top;
+}
+
 .mw-changeslist-line-watched .mw-title {
 	font-weight: bold;
 }
diff --git a/resources/src/mediawiki.special.recentchanges.js b/resources/src/mediawiki.special.recentchanges.js
index 88858834a7..310832defb 100644
--- a/resources/src/mediawiki.special.recentchanges.js
+++ b/resources/src/mediawiki.special.recentchanges.js
@@ -10,7 +10,7 @@
 	 */
 	rc = {
 		/**
-		 * Handler to disable/enable the namespace selector checkboxes when the
+		 * Handler to hide/show the namespace selector checkboxes when the
 		 * special 'all' namespace is selected/unselected respectively.
 		 */
 		updateCheckboxes: function () {
@@ -18,15 +18,15 @@
 			var isAllNS = $select.val() === '';
 
 			// Iterates over checkboxes and propagate the selected option
-			$checkboxes.prop( 'disabled', isAllNS );
+			$checkboxes.toggleClass( 'mw-input-hidden', isAllNS );
 		},
 
 		init: function () {
 			$select = $( '#namespace' );
-			$checkboxes = $( '#nsassociated, #nsinvert' );
+			$checkboxes = $( '#nsassociated, #nsinvert' ).closest( '.mw-input-with-label' );
 
-			// Bind to change event, and trigger once to set the initial state of the checkboxes.
-			rc.updateCheckboxes();
+			// Bind to change event of the checkboxes.
+			// The initial state is already set in HTML.
 			$select.on( 'change', rc.updateCheckboxes );
 		}
 	};
diff --git a/tests/qunit/suites/resources/mediawiki.special/mediawiki.special.recentchanges.test.js b/tests/qunit/suites/resources/mediawiki.special/mediawiki.special.recentchanges.test.js
index 458df92112..aafcd5b217 100644
--- a/tests/qunit/suites/resources/mediawiki.special/mediawiki.special.recentchanges.test.js
+++ b/tests/qunit/suites/resources/mediawiki.special/mediawiki.special.recentchanges.test.js
@@ -3,7 +3,7 @@
 
 	// TODO: verify checkboxes == [ 'nsassociated', 'nsinvert' ]
 
-	QUnit.test( '"all" namespace disable checkboxes', function ( assert ) {
+	QUnit.test( '"all" namespace hides checkboxes', function ( assert ) {
 		var selectHtml, $env, $options,
 			rc = require( 'mediawiki.special.recentchanges' );
 
@@ -17,10 +17,14 @@
 			+ '<option value="4">ProjectName</option>'
 			+ '<option value="5">ProjectName talk</option>'
 			+ '</select>'
+			+ '<span class="mw-input-with-label mw-input-hidden">'
 			+ '<input name="invert" type="checkbox" value="1" id="nsinvert" title="no title" />'
 			+ '<label for="nsinvert" title="no title">Invert selection</label>'
+			+ '</span>'
+			+ '<span class="mw-input-with-label mw-input-hidden">'
 			+ '<input name="associated" type="checkbox" value="1" id="nsassociated" title="no title" />'
 			+ '<label for="nsassociated" title="no title">Associated namespace</label>'
+			+ '</span>'
 			+ '<input type="submit" value="Go" />'
 			+ '<input type="hidden" value="Special:RecentChanges" name="title" />';
 
@@ -28,16 +32,16 @@
 
 		// TODO abstract the double strictEquals
 
-		// At first checkboxes are enabled
-		assert.strictEqual( $( '#nsinvert' ).prop( 'disabled' ), false );
-		assert.strictEqual( $( '#nsassociated' ).prop( 'disabled' ), false );
+		// At first checkboxes are hidden
+		assert.strictEqual( $( '#nsinvert' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
+		assert.strictEqual( $( '#nsassociated' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
 
 		// Initiate the recentchanges module
 		rc.init();
 
 		// By default
-		assert.strictEqual( $( '#nsinvert' ).prop( 'disabled' ), true );
-		assert.strictEqual( $( '#nsassociated' ).prop( 'disabled' ), true );
+		assert.strictEqual( $( '#nsinvert' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
+		assert.strictEqual( $( '#nsassociated' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
 
 		// select second option...
 		$options = $( '#namespace' ).find( 'option' );
@@ -45,18 +49,18 @@
 		$options.eq( 1 ).prop( 'selected', true );
 		$( '#namespace' ).trigger( 'change' );
 
-		// ... and checkboxes should be enabled again
-		assert.strictEqual( $( '#nsinvert' ).prop( 'disabled' ), false );
-		assert.strictEqual( $( '#nsassociated' ).prop( 'disabled' ), false );
+		// ... and checkboxes should be visible again
+		assert.strictEqual( $( '#nsinvert' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), false );
+		assert.strictEqual( $( '#nsassociated' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), false );
 
 		// select first option ( 'all' namespace)...
 		$options.eq( 1 ).removeProp( 'selected' );
 		$options.eq( 0 ).prop( 'selected', true );
 		$( '#namespace' ).trigger( 'change' );
 
-		// ... and checkboxes should now be disabled
-		assert.strictEqual( $( '#nsinvert' ).prop( 'disabled' ), true );
-		assert.strictEqual( $( '#nsassociated' ).prop( 'disabled' ), true );
+		// ... and checkboxes should now be hidden
+		assert.strictEqual( $( '#nsinvert' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
+		assert.strictEqual( $( '#nsassociated' ).closest( '.mw-input-with-label' ).hasClass( 'mw-input-hidden' ), true );
 
 		// DOM cleanup
 		$env.remove();