RCfilters UI: Change mute display for included filters

[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / ui / mw.rcfilters.ui.FilterItemWidget.js

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js
index 9bf26d1..7e6d776 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js
@@ -21,6 +21,7 @@
 
                this.controller = controller;
                this.model = model;
+               this.selected = false;
 
                this.checkboxWidget = new mw.rcfilters.ui.CheckboxInputWidget( {
                        value: this.model.getName(),
@@ -40,6 +41,16 @@
                        );
                }
 
+               this.highlightButton = new mw.rcfilters.ui.FilterItemHighlightButton(
+                       this.controller,
+                       this.model,
+                       {
+                               $overlay: config.$overlay || this.$element,
+                               title: mw.msg( 'rcfilters-highlightmenu-help' )
+                       }
+               );
+               this.highlightButton.toggle( this.model.isHighlightEnabled() );
+
                layout = new OO.ui.FieldLayout( this.checkboxWidget, {
                        label: $label,
                        align: 'inline'
@@ -53,7 +64,20 @@
                this.$element
                        .addClass( 'mw-rcfilters-ui-filterItemWidget' )
                        .append(
-                               layout.$element
+                               $( '<div>' )
+                                       .addClass( 'mw-rcfilters-ui-table' )
+                                       .append(
+                                               $( '<div>' )
+                                                       .addClass( 'mw-rcfilters-ui-row' )
+                                                       .append(
+                                                               $( '<div>' )
+                                                                       .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterItemWidget-filterCheckbox' )
+                                                                       .append( layout.$element ),
+                                                               $( '<div>' )
+                                                                       .addClass( 'mw-rcfilters-ui-cell mw-rcfilters-ui-filterItemWidget-highlightButton' )
+                                                                       .append( this.highlightButton.$element )
+                                                       )
+                                       )
                        );
        };
 
@@ -71,7 +95,7 @@
         * @param {boolean} isSelected The checkbox is selected
         */
        mw.rcfilters.ui.FilterItemWidget.prototype.onCheckboxChange = function ( isSelected ) {
-               this.controller.updateFilter( this.model.getName(), isSelected );
+               this.controller.toggleFilterSelect( this.model.getName(), isSelected );
        };
 
        /**
@@ -90,6 +114,21 @@
                this.setCurrentMuteState();
        };
 
+       /**
+        * Set selected state on this widget
+        *
+        * @param {boolean} [isSelected] Widget is selected
+        */
+       mw.rcfilters.ui.FilterItemWidget.prototype.toggleSelected = function ( isSelected ) {
+               isSelected = isSelected !== undefined ? isSelected : !this.selected;
+
+               if ( this.selected !== isSelected ) {
+                       this.selected = isSelected;
+
+                       this.$element.toggleClass( 'mw-rcfilters-ui-filterItemWidget-selected', this.selected );
+               }
+       };
+
        /**
         * Set the current mute state for this item
         */
@@ -97,16 +136,19 @@
                this.$element.toggleClass(
                        'mw-rcfilters-ui-filterItemWidget-muted',
                        this.model.isConflicted() ||
-                       this.model.isIncluded() ||
-                       this.model.isFullyCovered() ||
                        (
                                // Item is also muted when any of the items in its group is active
                                this.model.getGroupModel().isActive() &&
                                // But it isn't selected
-                               !this.model.isSelected()
+                               !this.model.isSelected() &&
+                               // And also not included
+                               !this.model.isIncluded()
                        )
                );
+
+               this.highlightButton.toggle( this.model.isHighlightEnabled() );
        };
+
        /**
         * Get the name of this filter
         *
@@ -115,5 +157,4 @@
        mw.rcfilters.ui.FilterItemWidget.prototype.getName = function () {
                return this.model.getName();
        };
-
 }( mediaWiki, jQuery ) );