RCFilters UI: Highlight behavior

[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..63db2b0 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterItemWidget.js
@@ -40,6 +40,15 @@
                        );
                }
 
+               this.highlightButton = new mw.rcfilters.ui.FilterItemHighlightButton(
+                       this.controller,
+                       this.model,
+                       {
+                               $overlay: config.$overlay || this.$element
+                       }
+               );
+               this.highlightButton.toggle( this.model.isHighlightEnabled() );
+
                layout = new OO.ui.FieldLayout( this.checkboxWidget, {
                        label: $label,
                        align: 'inline'
@@ -53,7 +62,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 )
+                                                       )
+                                       )
                        );
        };
 
@@ -106,7 +128,10 @@
                                !this.model.isSelected()
                        )
                );
+
+               this.highlightButton.toggle( this.model.isHighlightEnabled() );
        };
+
        /**
         * Get the name of this filter
         *
@@ -115,5 +140,4 @@
        mw.rcfilters.ui.FilterItemWidget.prototype.getName = function () {
                return this.model.getName();
        };
-
 }( mediaWiki, jQuery ) );