From: Moriel Schottlender <moriel@gmail.com>
Date: Thu, 23 Feb 2017 23:39:27 +0000 (-0800)
Subject: RCFilters: Align trash icon with filter list
X-Git-Tag: 1.31.0-rc.0~3992^2
X-Git-Url: https://git.cyclocoop.org/%27.WWW_URL.%27admin/?a=commitdiff_plain;h=5e40cb3424f5ea939b1c9fe459da7c3258fa886b;p=lhc%2Fweb%2Fwiklou.git

RCFilters: Align trash icon with filter list

Bug: T149391
Change-Id: Icf867bf572253d288602f00890551909d869a459
---

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
index 6c11cdb90a..8921f7acfc 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
@@ -18,21 +18,12 @@
 		color: #72777d;
 	}
 
-	&-table {
-		display: table;
+	&-cell-filters {
 		width: 100%;
 	}
-
-	&-row {
-		display: table-row;
-	}
-
-	&-cell {
-		display: table-cell;
-
-		&:last-child {
-			text-align: right;
-		}
+	&-cell-reset {
+		text-align: right;
+		padding-left: 0.5em;
 	}
 
 	.oo-ui-capsuleItemWidget {
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
index 910e8e12d0..50b7d1536f 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
@@ -13,6 +13,13 @@
 	 * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
 	 */
 	mw.rcfilters.ui.FilterCapsuleMultiselectWidget = function MwRcfiltersUiFilterCapsuleMultiselectWidget( controller, model, filterInput, config ) {
+		var title = new OO.ui.LabelWidget( {
+				label: mw.msg( 'rcfilters-activefilters' ),
+				classes: [ 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-wrapper-content-title' ]
+			} ),
+			$contentWrapper = $( '<div>' )
+				.addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-wrapper' );
+
 		this.$overlay = config.$overlay || this.$element;
 
 		// Parent
@@ -25,12 +32,6 @@
 
 		this.filterInput = filterInput;
 
-		this.$content.prepend(
-			$( '<div>' )
-				.addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-content-title' )
-				.text( mw.msg( 'rcfilters-activefilters' ) )
-		);
-
 		this.resetButton = new OO.ui.ButtonWidget( {
 			icon: 'trash',
 			framed: false,
@@ -42,6 +43,7 @@
 			label: mw.msg( 'rcfilters-empty-filter' ),
 			classes: [ 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-emptyFilters' ]
 		} );
+		this.$content.append( this.emptyFilterMessage.$element );
 
 		// Events
 		this.resetButton.connect( this, { click: 'onResetButtonClick' } );
@@ -53,30 +55,32 @@
 		this.filterInput.$input
 			.on( 'focus', this.focus.bind( this ) );
 
+		// Build the content
+		$contentWrapper.append(
+			title.$element,
+			$( '<div>' )
+				.addClass( 'mw-rcfilters-ui-table' )
+				.append(
+					// The filter list and button should appear side by side regardless of how
+					// wide the button is; the button also changes its width depending
+					// on language and its state, so the safest way to present both side
+					// by side is with a table layout
+					$( '<div>' )
+						.addClass( 'mw-rcfilters-ui-row' )
+						.append(
+							this.$content
+								.addClass( 'mw-rcfilters-ui-cell' )
+								.addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell-filters' ),
+							$( '<div>' )
+								.addClass( 'mw-rcfilters-ui-cell' )
+								.addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell-reset' )
+								.append( this.resetButton.$element )
+						)
+				)
+		);
+
 		// Initialize
-		this.$content.append( this.emptyFilterMessage.$element );
-		this.$handle
-			.append(
-				// The content and button should appear side by side regardless of how
-				// wide the button is; the button also changes its width depending
-				// on language and its state, so the safest way to present both side
-				// by side is with a table layout
-				$( '<div>' )
-					.addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-table' )
-					.append(
-						$( '<div>' )
-							.addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-row' )
-							.append(
-								$( '<div>' )
-									.addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-content' )
-									.addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell' )
-									.append( this.$content ),
-								$( '<div>' )
-									.addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell' )
-									.append( this.resetButton.$element )
-							)
-					)
-			);
+		this.$handle.append( $contentWrapper );
 
 		this.$element
 			.addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget' );