From 3bf4138013070f22f23e9431b737e23014d6ad14 Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Wed, 30 Aug 2017 16:27:48 -0700
Subject: [PATCH] RCFilters: Make top links in RecentChanges expand to
 full-width

Bug: T174617
Change-Id: Iff4c563b894eaaf713d3818a97928d0342b1ca23
---
 .../mw.rcfilters.ui.RcTopSectionWidget.less   | 13 +++-
 .../styles/mw.rcfilters.ui.less               |  4 ++
 .../ui/mw.rcfilters.ui.RcTopSectionWidget.js  | 70 ++++++++++++++-----
 3 files changed, 69 insertions(+), 18 deletions(-)

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 38f6f28d11..9d1cc23801 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.RcTopSectionWidget.less
@@ -1,6 +1,17 @@
 .mw-rcfilters-ui-rcTopSectionWidget {
 	&-topLinks {
-		width: 100%;
+		&-table {
+			width: 100%;
+		}
+
+		&-top {
+			display: block;
+			width: 100%;
+
+			.mw-recentchanges-toplinks {
+				margin-bottom: 0.5em;
+			}
+		}
 	}
 
 	&-savedLinks {
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.less
index 0bee2f12bc..f7081af411 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.less
@@ -2,6 +2,10 @@
 	&-table {
 		display: table;
 		width: 100%;
+
+		&-placeholder {
+			width: 100%;
+		}
 	}
 
 	&-row {
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 706c888eab..f0e1241241 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.RcTopSectionWidget.js
@@ -12,15 +12,19 @@
 	mw.rcfilters.ui.RcTopSectionWidget = function MwRcfiltersUiRcTopSectionWidget(
 		savedLinksListWidget, $topLinks, config
 	) {
-		var topLinksCookieName = 'rcfilters-toplinks-collapsed-state',
+		var toplinksTitle,
+			topLinksCookieName = 'rcfilters-toplinks-collapsed-state',
 			topLinksCookie = mw.cookie.get( topLinksCookieName ),
 			topLinksCookieValue = topLinksCookie || 'collapsed',
-			toplinksTitle;
+			widget = this;
+
 		config = config || {};
 
 		// Parent
 		mw.rcfilters.ui.RcTopSectionWidget.parent.call( this, config );
 
+		this.$topLinks = $topLinks;
+
 		toplinksTitle = new OO.ui.ButtonWidget( {
 			framed: false,
 			indicator: topLinksCookieValue === 'collapsed' ? 'down' : 'up',
@@ -28,7 +32,7 @@
 			label: $( '<span>' ).append( mw.message( 'rcfilters-other-review-tools' ).parse() ).contents()
 		} );
 
-		$topLinks
+		this.$topLinks
 			.addClass( 'mw-rcfilters-ui-ready' )
 			.makeCollapsible( {
 				collapsed: topLinksCookieValue === 'collapsed',
@@ -37,38 +41,70 @@
 			.on( 'beforeExpand.mw-collapsible', function () {
 				mw.cookie.set( topLinksCookieName, 'expanded' );
 				toplinksTitle.setIndicator( 'up' );
+				widget.switchTopLinks( 'expanded' );
 			} )
 			.on( 'beforeCollapse.mw-collapsible', function () {
 				mw.cookie.set( topLinksCookieName, 'collapsed' );
 				toplinksTitle.setIndicator( 'down' );
+				widget.switchTopLinks( 'collapsed' );
 			} );
 
-		$topLinks.find( '.mw-recentchanges-toplinks-title' ).replaceWith( toplinksTitle.$element );
+		this.$topLinks.find( '.mw-recentchanges-toplinks-title' ).replaceWith( toplinksTitle.$element );
+
+		// Create two positions for the toplinks to toggle between
+		// in the table (first cell) or up above it
+		this.$top = $( '<div>' )
+			.addClass( 'mw-rcfilters-ui-rcTopSectionWidget-topLinks-top' );
+		this.$tableTopLinks = $( '<div>' )
+			.addClass( 'mw-rcfilters-ui-cell' )
+			.addClass( 'mw-rcfilters-ui-rcTopSectionWidget-topLinks-table' );
 
+		// Initialize
 		this.$element
 			.addClass( 'mw-rcfilters-ui-rcTopSectionWidget' )
-			.addClass( 'mw-rcfilters-ui-table' )
 			.append(
+				this.$top,
 				$( '<div>' )
-					.addClass( 'mw-rcfilters-ui-row' )
+					.addClass( 'mw-rcfilters-ui-table' )
 					.append(
 						$( '<div>' )
-							.addClass( 'mw-rcfilters-ui-cell' )
-							.addClass( 'mw-rcfilters-ui-rcTopSectionWidget-topLinks' )
-							.append( $topLinks )
-					)
-					.append(
-						!mw.user.isAnon() ?
-							$( '<div>' )
-								.addClass( 'mw-rcfilters-ui-cell' )
-								.addClass( 'mw-rcfilters-ui-rcTopSectionWidget-savedLinks' )
-								.append( savedLinksListWidget.$element ) :
-							null
+							.addClass( 'mw-rcfilters-ui-row' )
+							.append(
+								this.$tableTopLinks,
+								$( '<div>' )
+									.addClass( 'mw-rcfilters-ui-table-placeholder' )
+									.addClass( 'mw-rcfilters-ui-cell' ),
+								!mw.user.isAnon() ?
+									$( '<div>' )
+										.addClass( 'mw-rcfilters-ui-cell' )
+										.addClass( 'mw-rcfilters-ui-rcTopSectionWidget-savedLinks' )
+										.append( savedLinksListWidget.$element ) :
+									null
+							)
 					)
 			);
+
+		// Initialize top links position
+		widget.switchTopLinks( topLinksCookieValue );
 	};
 
 	/* Initialization */
 
 	OO.inheritClass( mw.rcfilters.ui.RcTopSectionWidget, OO.ui.Widget );
+
+	/**
+	 * Switch the top links widget from inside the table (when collapsed)
+	 * to the 'top' (when open)
+	 *
+	 * @param {string} [state] The state of the top links widget: 'expanded' or 'collapsed'
+	 */
+	mw.rcfilters.ui.RcTopSectionWidget.prototype.switchTopLinks = function ( state ) {
+		state = state || 'expanded';
+
+		if ( state === 'expanded' ) {
+			this.$top.append( this.$topLinks );
+		} else {
+			this.$tableTopLinks.append( this.$topLinks );
+		}
+	};
 }( mediaWiki ) );
-- 
2.20.1