RCFilters UI: Add 'highlight' icon to highlight button

Bug: T149467
Change-Id: Iba11de7ba47e41046631dbf16f464f8bd3820811
Depends-On: I0b5adaaec52f9cc01c3dfb6262adaf2da368476e

diff --git a/resources/Resources.php b/resources/Resources.php
index 67a3de5..c00a1ba 100644 (file)
--- 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 (file)
index eb42923..0000000
--- 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 (file)
index 9b1940e..0000000
--- 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 0f30137..198f599 100644 (file)
--- 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 cefe749..4011e6d 100644 (file)
--- 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 );
        };