From feefb51581574f3144786d7f935f34ccc947efed Mon Sep 17 00:00:00 2001
From: petarpetkovic <ppetkovic@wikimedia.org>
Date: Mon, 18 Sep 2017 15:20:39 +0200
Subject: [PATCH] Tweak UI for main filtering entry point

- Change the hamburger icon to plus sign.
- Change the search bar input placeholder text to "Main filter menu".
- Adjust the font style of main entry point placeholder.
- Adjust the font style of the advanced filters label.

Bug: T175217
Change-Id: I24742b68ef8bfeb9f3f71d5dc8818464412ab3f2
---
 languages/i18n/en.json                        |  2 +-
 resources/Resources.php                       |  2 +-
 .../styles/mw.rcfilters.mixins.less           | 32 +++++++++++++++++++
 ...filters.ui.FilterTagMultiselectWidget.less |  9 +++++-
 ...rcfilters.ui.FilterTagMultiselectWidget.js |  4 +--
 5 files changed, 44 insertions(+), 5 deletions(-)

diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index 75e0c5cbcc..a3560d97e7 100644
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -1383,7 +1383,7 @@
 	"rcfilters-restore-default-filters": "Restore default filters",
 	"rcfilters-clear-all-filters": "Clear all filters",
 	"rcfilters-show-new-changes": "View newest changes",
-	"rcfilters-search-placeholder": "Filter recent changes (browse or start typing)",
+	"rcfilters-search-placeholder": "Main filter menu",
 	"rcfilters-invalid-filter": "Invalid filter",
 	"rcfilters-empty-filter": "No active filters. All contributions are shown.",
 	"rcfilters-filterlist-title": "Filters",
diff --git a/resources/Resources.php b/resources/Resources.php
index 246d9f3222..ae8436a100 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1928,7 +1928,7 @@ return [
 			'oojs-ui.styles.icons-editing-styling',
 			'oojs-ui.styles.icons-interactions',
 			'oojs-ui.styles.icons-content',
-			'oojs-ui.styles.icons-layout',
+			'oojs-ui.styles.icons-interactions',
 			'oojs-ui.styles.icons-media',
 		],
 	],
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
index b4e3b0e493..a6b219bef8 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
@@ -85,3 +85,35 @@
 		.highlight-changesListWrapperWidget( tint( mix( @@c1var, mix( @@c2var, average( @@c3var, @@c4var ), 25% ), 25% ), 25% ) );
 	}
 }
+
+.input-placeholder-color( @color, @font-weight: bold ) {
+	/* stylelint-disable selector-no-vendor-prefix */
+	&::-webkit-input-placeholder { /* WebKit, Blink */
+		color: @color;
+		font-weight: @font-weight;
+	}
+	&:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+		color: @color;
+		opacity: 1; //  Firefox's placeholder defaults with a reduced opacity
+		font-weight: @font-weight;
+	}
+	&::-moz-placeholder { /* Mozilla Firefox 19+ */
+		color: @color;
+		opacity: 1;
+		font-weight: @font-weight;
+	}
+	&:-ms-input-placeholder { /* Internet Explorer 10-11 */
+		color: @color;
+		font-weight: @font-weight;
+	}
+	&::-ms-input-placeholder { /* Microsoft Edge */
+		color: @color;
+		font-weight: @font-weight;
+	}
+	/* stylelint-enable */
+	&::placeholder {
+		color: @color;
+		opacity: 1;
+		font-weight: @font-weight;
+	}
+}
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
index e7233a8272..7e7b9c374f 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
@@ -1,4 +1,5 @@
-@import 'mediawiki.mixins';
+@import 'mediawiki.ui/variables';
+@import 'mw.rcfilters.mixins.less';
 
 .mw-rcfilters-ui-filterTagMultiselectWidget {
 	max-width: none;
@@ -8,6 +9,8 @@
 		direction: ltr;
 		border-bottom-right-radius: 0;
 		height: 2.5em;
+
+		.input-placeholder-color( @colorGray5 );
 	}
 
 	&.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
@@ -78,6 +81,10 @@
 
 				.oo-ui-labelElement.oo-ui-optionWidget.oo-ui-buttonElement:first-child {
 					margin-left: 0;
+
+					> .oo-ui-buttonElement-button {
+						color: @colorGray5;
+					}
 				}
 			}
 		}
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
index df3263a206..0ef27eb0df 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
@@ -70,7 +70,7 @@
 				]
 			},
 			input: {
-				icon: 'menu',
+				icon: 'add',
 				placeholder: mw.msg( 'rcfilters-search-placeholder' )
 			}
 		}, config ) );
@@ -313,7 +313,7 @@
 			this.controller.trackFilterGroupings( 'filtermenu' );
 		}
 
-		this.input.setIcon( isVisible ? 'search' : 'menu' );
+		this.input.setIcon( isVisible ? 'search' : 'add' );
 	};
 
 	/**
-- 
2.20.1