From d6760ede2a748ab58b2cf1495d28c4425b17f5c9 Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Fri, 12 May 2017 15:58:29 -0700
Subject: [PATCH] RCFilters: Style saved links option menu

- Make the options smaller (less padding)
- Make the text blue
- Move the icon to the other side of the widget, and
  get rid of the placeholder-spacing for all other
  items without the icon

Bug: T164861
Change-Id: If8e0249f4322e1ab7cea09ca12e66492581f009e
---
 ...w.rcfilters.ui.SavedLinksListItemWidget.less | 17 +++++++++--------
 .../mw.rcfilters.ui.SavedLinksListItemWidget.js |  9 +++++----
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less
index 66ceb64363..fb0b93b854 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less
@@ -1,5 +1,5 @@
 .mw-rcfilters-ui-savedLinksListItemWidget {
-	padding: 0.5em;
+	padding: 0.2em 0.7em;
 
 	&:hover {
 		// Mimicking optionWidget styles
@@ -11,13 +11,13 @@
 		vertical-align: middle;
 	}
 
-	&:not( .oo-ui-iconElement ) .oo-ui-iconElement-icon {
-		// The iconElement-icon class still appears when we
-		// have an empty icon, and we need it to pretend to
-		// be there so the text has the same alignment as
-		// text next to a visible icon. #ThanksOOUI
-		width: 1.875em;
-		height: 1.875em;
+	.oo-ui-iconElement-icon {
+		// Since we made the rows narrower (height smaller than usual)
+		// then the icon needs to be slightly smaller as well, so that
+		// when we toggle 'default' the icon doesn't bounce the option
+		// height up a little
+		width: 1.7em;
+		height: 1.7em;
 	}
 
 	&-icon span {
@@ -38,6 +38,7 @@
 		overflow: hidden;
 		cursor: pointer;
 		margin-left: 0.5px;
+		color: #36c; // Accent50;
 	}
 
 	&-icon,
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
index 44b48b8c20..acda29e12a 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
@@ -106,10 +106,6 @@
 						$( '<div>' )
 							.addClass( 'mw-rcfilters-ui-row' )
 							.append(
-								$( '<div>' )
-									.addClass( 'mw-rcfilters-ui-cell' )
-									.addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-icon' )
-									.append( this.$icon ),
 								$( '<div>' )
 									.addClass( 'mw-rcfilters-ui-cell' )
 									.addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-content' )
@@ -119,6 +115,10 @@
 										this.editInput.$element,
 										this.saveButton.$element
 									),
+								$( '<div>' )
+									.addClass( 'mw-rcfilters-ui-cell' )
+									.addClass( 'mw-rcfilters-ui-savedLinksListItemWidget-icon' )
+									.append( this.$icon ),
 								this.popupButton.$element
 									.addClass( 'mw-rcfilters-ui-cell' )
 							)
@@ -257,6 +257,7 @@
 
 			this.editInput.toggle( isEdit );
 			this.$label.toggleClass( 'oo-ui-element-hidden', isEdit );
+			this.$icon.toggleClass( 'oo-ui-element-hidden', isEdit );
 			this.popupButton.toggle( !isEdit );
 			this.saveButton.toggle( isEdit );
 
-- 
2.20.1