From 8236ceb0351665bebd25509eda7c81ef937af664 Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Fri, 3 Mar 2017 17:33:13 -0800
Subject: [PATCH] RCFilters UI: Adjust styles for filter list elements

* Add bottom border between filters
* Adjust the placement of the header label (use table layout)

Bug: T149452
Change-Id: Ie3892b34e5ca5e00380862fa65959d148f2196f4
---
 .../mw.rcfilters.ui.FilterItemWidget.less     |  4 ++++
 .../mw.rcfilters.ui.FiltersListWidget.less    | 17 +++++++++++----
 .../ui/mw.rcfilters.ui.FiltersListWidget.js   | 21 ++++++++++++++++---
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less
index bbde9ce4c2..1c3caa068c 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less
@@ -4,6 +4,10 @@
 	padding: 0 0.5em;
 	.box-sizing( border-box );
 
+	&:not( :last-child ) {
+		border-bottom: solid 1px #eaecf0; // Base 80 AAA
+	}
+
 	&:hover {
 		background-color: #f8f9fa; // Base90 AAA
 	}
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FiltersListWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FiltersListWidget.less
index 7fd3a215f4..3334d84b46 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FiltersListWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FiltersListWidget.less
@@ -4,9 +4,22 @@
 		padding: 0.75em;
 		// TODO: Unify colors with official design palette
 		color: #54595d;
+	}
+
+	&-header {
 		border-bottom: 1px solid #c8ccd1;
 		background: #f8f9fa;
 		overflow: hidden;
+
+		&-highlight {
+			width: 1em;
+			vertical-align: middle;
+		}
+
+		&-title {
+			width: 100%;
+			vertical-align: middle;
+		}
 	}
 
 	&-noresults {
@@ -14,8 +27,4 @@
 		// TODO: Unify colors with official design palette
 		color: #666;
 	}
-
-	&-hightlightButton {
-		float: right;
-	}
 }
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js
index 8c730a2aa4..cefe7492dd 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js
@@ -34,8 +34,6 @@
 			classes: [ 'mw-rcfilters-ui-filtersListWidget-hightlightButton' ]
 		} );
 
-		this.$label.append( this.highlightButton.$element );
-
 		this.noResultsLabel = new OO.ui.LabelWidget( {
 			label: mw.msg( 'rcfilters-filterlist-noresults' ),
 			classes: [ 'mw-rcfilters-ui-filtersListWidget-noresults' ]
@@ -53,7 +51,24 @@
 		this.$element
 			.addClass( 'mw-rcfilters-ui-filtersListWidget' )
 			.append(
-				this.$label,
+				$( '<div>' )
+					.addClass( 'mw-rcfilters-ui-table' )
+					.addClass( 'mw-rcfilters-ui-filtersListWidget-header' )
+					.append(
+						$( '<div>' )
+							.addClass( 'mw-rcfilters-ui-row' )
+							.append(
+								$( '<div>' )
+									.addClass( 'mw-rcfilters-ui-cell' )
+									.addClass( 'mw-rcfilters-ui-filtersListWidget-header-title' )
+									.append( this.$label ),
+								$( '<div>' )
+									.addClass( 'mw-rcfilters-ui-cell' )
+									.addClass( 'mw-rcfilters-ui-filtersListWidget-header-highlight' )
+									.append( this.highlightButton.$element )
+							)
+					),
+				// this.$label,
 				this.$group
 					.addClass( 'mw-rcfilters-ui-filtersListWidget-group' ),
 				this.noResultsLabel.$element
-- 
2.20.1