From a07385a2dc9ce5291aabe4e2d052749193b89fa3 Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Mon, 6 Mar 2017 15:01:51 -0800
Subject: [PATCH] RCFilters UI: Add 'highlight' icon to highlight button

Bug: T149467
Change-Id: Iba11de7ba47e41046631dbf16f464f8bd3820811
Depends-On: I0b5adaaec52f9cc01c3dfb6262adaf2da368476e
---
 resources/Resources.php                              |  1 +
 .../src/mediawiki.rcfilters/images/marker-ltr.svg    |  4 ----
 .../src/mediawiki.rcfilters/images/marker-rtl.svg    |  4 ----
 .../mw.rcfilters.ui.FilterItemHighlightButton.less   |  5 -----
 .../ui/mw.rcfilters.ui.FiltersListWidget.js          | 12 +++++++++---
 5 files changed, 10 insertions(+), 16 deletions(-)
 delete mode 100644 resources/src/mediawiki.rcfilters/images/marker-ltr.svg
 delete mode 100644 resources/src/mediawiki.rcfilters/images/marker-rtl.svg

diff --git a/resources/Resources.php b/resources/Resources.php
index 67a3de5ae4..c00a1ba39f 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1853,6 +1853,7 @@ return [
 			'mediawiki.rcfilters.filters.dm',
 			'oojs-ui.styles.icons-moderation',
 			'oojs-ui.styles.icons-editing-core',
+			'oojs-ui.styles.icons-editing-styling',
 			'oojs-ui.styles.icons-interactions',
 		],
 	],
diff --git a/resources/src/mediawiki.rcfilters/images/marker-ltr.svg b/resources/src/mediawiki.rcfilters/images/marker-ltr.svg
deleted file mode 100644
index eb42923d68..0000000000
--- a/resources/src/mediawiki.rcfilters/images/marker-ltr.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
-    <path d="M5.066 18.236l.14-.244c.976-1.69 1.341-4.587.815-6.469l-.14-.507.2-.365L11.074 2l9.011 5.203-4.994 8.65-.204.354-.522.134c-1.893.485-4.22 2.252-5.195 3.94l-.14.244-.721-.416-1.041 1.89H3.914l1.893-3.336z" fill-rule="evenodd"/>
-</svg>
diff --git a/resources/src/mediawiki.rcfilters/images/marker-rtl.svg b/resources/src/mediawiki.rcfilters/images/marker-rtl.svg
deleted file mode 100644
index 9b1940ebef..0000000000
--- a/resources/src/mediawiki.rcfilters/images/marker-rtl.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" height="24" width="24">
-    <path d="M18.934 18.236l-.14-.244c-.976-1.69-1.341-4.587-.815-6.469l.14-.507-.2-.365L12.926 2 3.914 7.203l4.994 8.65.204.354.522.134c1.893.485 4.22 2.252 5.195 3.94l.14.244.721-.416 1.041 1.89h3.355l-1.893-3.336z" fill-rule="evenodd"/>
-</svg>
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemHighlightButton.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemHighlightButton.less
index 0f30137bab..198f599715 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemHighlightButton.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemHighlightButton.less
@@ -1,11 +1,6 @@
 @import 'mw.rcfilters.mixins';
 
 .mw-rcfilters-ui-filterItemHighlightButton {
-	.oo-ui-iconElement-icon.oo-ui-icon-highlight {
-		/* @embed */
-		background-image: url( ../images/marker-ltr.svg );
-	}
-
 	.oo-ui-buttonWidget.oo-ui-popupButtonWidget .oo-ui-buttonElement-button > &-circle {
 		display: inline-block;
 		vertical-align: middle;
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 cefe7492dd..4011e6d5d2 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js
@@ -29,7 +29,8 @@
 		this.groups = {};
 		this.selected = null;
 
-		this.highlightButton = new OO.ui.ButtonWidget( {
+		this.highlightButton = new OO.ui.ToggleButtonWidget( {
+			icon: 'highlight',
 			label: mw.message( 'rcfilters-highlightbutton-title' ).text(),
 			classes: [ 'mw-rcfilters-ui-filtersListWidget-hightlightButton' ]
 		} );
@@ -43,7 +44,7 @@
 		this.highlightButton.connect( this, { click: 'onHighlightButtonClick' } );
 		this.model.connect( this, {
 			initialize: 'onModelInitialize',
-			highlightChange: 'onHighlightChange'
+			highlightChange: 'onModelHighlightChange'
 		} );
 
 		// Initialize
@@ -109,7 +110,12 @@
 		);
 	};
 
-	mw.rcfilters.ui.FiltersListWidget.prototype.onHighlightChange = function ( highlightEnabled ) {
+	/**
+	 * Respond to model highlight change event
+	 *
+	 * @param {boolean} highlightEnabled Highlight is enabled
+	 */
+	mw.rcfilters.ui.FiltersListWidget.prototype.onModelHighlightChange = function ( highlightEnabled ) {
 		this.highlightButton.setActive( highlightEnabled );
 	};
 
-- 
2.20.1