From: Moriel Schottlender <moriel@gmail.com>
Date: Fri, 13 Oct 2017 23:20:33 +0000 (-0700)
Subject: RCFilters: Fix RC jumpiness due to expanded/collapsed community links
X-Git-Tag: 1.31.0-rc.0~1774^2
X-Git-Url: https://git.cyclocoop.org/admin/%7B%24admin_url%7Dmembres/Zigzagzogzagzig?a=commitdiff_plain;h=5004b853918868ec1259cabae3d314fd08b3beaa;p=lhc%2Fweb%2Fwiklou.git

RCFilters: Fix RC jumpiness due to expanded/collapsed community links

Bug: T177117
Change-Id: Ie0761613ff8c731226e26a78afa500aef9619d01
---

diff --git a/includes/specials/SpecialRecentchanges.php b/includes/specials/SpecialRecentchanges.php
index 6ce1968742..f4135a4d61 100644
--- a/includes/specials/SpecialRecentchanges.php
+++ b/includes/specials/SpecialRecentchanges.php
@@ -621,18 +621,21 @@ class SpecialRecentChanges extends ChangesListSpecialPage {
 				// Check whether the widget is already collapsed or expanded
 				$collapsedState = $this->getRequest()->getCookie( 'rcfilters-toplinks-collapsed-state' );
 				// Note that an empty/unset cookie means collapsed, so check for !== 'expanded'
-				$collapsedClass = $collapsedState !== 'expanded' ? 'mw-rcfilters-toplinks-collapsed' : '';
+				$topLinksAttributes[ 'class' ] .= $collapsedState !== 'expanded' ?
+					' mw-recentchanges-toplinks-collapsed' : '';
+
+				$this->getOutput()->enableOOUI();
+				$contentTitle = new OOUI\ButtonWidget( [
+					'classes' => [ 'mw-recentchanges-toplinks-title' ],
+					'label' => new OOUI\HtmlSnippet( $this->msg( 'rcfilters-other-review-tools' )->parse() ),
+					'framed' => false,
+					'indicator' => $collapsedState !== 'expanded' ? 'down' : 'up',
+					'flags' => [ 'progressive' ],
+				] );
 
-				$contentTitle = Html::rawElement( 'div',
-					[ 'class' => 'mw-recentchanges-toplinks-title ' . $collapsedClass ],
-					$this->msg( 'rcfilters-other-review-tools' )->parse()
-				);
 				$contentWrapper = Html::rawElement( 'div',
 					array_merge(
-						[
-						'class' => 'mw-recentchanges-toplinks-content mw-collapsible-content ' .
-							$collapsedClass
-						],
+						[ 'class' => 'mw-recentchanges-toplinks-content mw-collapsible-content' ],
 						$langAttributes
 					),
 					$content
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
index ba7a70ebc4..7410f981f8 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less
@@ -21,14 +21,24 @@
 		min-height: @rcfilters-wl-head-min-height;
 	}
 
-	body:not( .mw-rcfilters-ui-initialized ) {
-		.mw-recentchanges-toplinks-content.mw-rcfilters-toplinks-collapsed {
-			display: none;
+	.mw-recentchanges-toplinks {
+		margin-bottom: 0.5em;
+
+		&:not( .mw-recentchanges-toplinks-collapsed ) {
+			// Same as the legend
+			border: 1px solid #ddd;
 		}
+	}
 
-		.mw-recentchanges-toplinks-title.mw-rcfilters-toplinks-collapsed {
-			// Hide, but keep the placement so we don't jump
-			visibility: hidden;
+	body:not( .mw-rcfilters-ui-initialized ) {
+		.mw-recentchanges-toplinks.mw-recentchanges-toplinks-collapsed {
+			// Similar to the watchlist-details hack, we are going to make this float left
+			// while loading to prevent jumpiness in the min-height calculation
+			float: left;
+
+			.mw-recentchanges-toplinks-content {
+				display: none;
+			}
 		}
 
 		.rcfilters-head {
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
index aca3ea68a5..6f3cdfe8dd 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
@@ -7,10 +7,6 @@
 		&-top {
 			display: block;
 			width: 100%;
-
-			.mw-recentchanges-toplinks {
-				margin-bottom: 0.5em;
-			}
 		}
 	}
 
@@ -20,25 +16,8 @@
 	}
 
 	.mw-recentchanges-toplinks {
-		padding: 0 0.5em;
-
 		.oo-ui-widget-enabled.oo-ui-buttonElement.oo-ui-buttonElement-frameless .oo-ui-buttonElement-button {
 			padding: 0 2.5em 0 0.5em;
 		}
-
-		&-title,
-		.mw-collapsible-text {
-			// Same as the legend
-			font-size: 0.85em;
-		}
-
-		&:not( .mw-collapsed ) {
-			// Same as the legend
-			border: 1px solid #ddd;
-		}
-
-		body:not( .mw-rcfilters-ui-initialized ) & {
-			display: none;
-		}
 	}
 }
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js
index 95a4e592d8..ca76046c0c 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js
@@ -62,7 +62,6 @@
 		this.$element
 			.addClass( 'mw-rcfilters-ui-rcTopSectionWidget' )
 			.append(
-				this.$top,
 				$( '<div>' )
 					.addClass( 'mw-rcfilters-ui-table' )
 					.append(
@@ -83,6 +82,9 @@
 					)
 			);
 
+		// Hack: For jumpiness reasons, this should be a sibling of -head
+		$( '.rcfilters-head' ).before( this.$top );
+
 		// Initialize top links position
 		widget.switchTopLinks( topLinksCookieValue );
 	};