RCFilters: Only show filter capsule as conflicted if it's selected

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

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
index 800e7ea..728bb38 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
@@ -13,15 +13,12 @@
         * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
         */
        mw.rcfilters.ui.CapsuleItemWidget = function MwRcfiltersUiCapsuleItemWidget( controller, model, config ) {
-               var $popupContent = $( '<div>' )
-                               .addClass( 'mw-rcfilters-ui-capsuleItemWidget-popup-content' ),
-                       descLabelWidget = new OO.ui.LabelWidget();
-
                // Configuration initialization
                config = config || {};
 
                this.controller = controller;
                this.model = model;
+               this.popupLabel = new OO.ui.LabelWidget();
                this.$overlay = config.$overlay || this.$element;
                this.positioned = false;
                this.popupTimeoutShow = null;
@@ -38,16 +35,15 @@
                        popup: {
                                padded: false,
                                align: 'center',
-                               $content: $popupContent
-                                       .append( descLabelWidget.$element ),
+                               position: 'above',
+                               $content: $( '<div>' )
+                                       .addClass( 'mw-rcfilters-ui-capsuleItemWidget-popup-content' )
+                                       .append( this.popupLabel.$element ),
                                $floatableContainer: this.$element,
                                classes: [ 'mw-rcfilters-ui-capsuleItemWidget-popup' ]
                        }
                }, config ) );
 
-               // Set initial text for the popup - the description
-               descLabelWidget.setLabel( this.model.getDescription() );
-
                this.$highlight = $( '<div>' )
                        .addClass( 'mw-rcfilters-ui-capsuleItemWidget-highlight' );
 
@@ -111,8 +107,7 @@
                }
 
                // Respond to user removing the filter
-               this.controller.updateFilter( this.model.getName(), false );
-               this.controller.clearHighlightColor( this.model.getName() );
+               this.controller.clearFilter( this.model.getName() );
        };
 
        mw.rcfilters.ui.CapsuleItemWidget.prototype.setHighlightColor = function () {
@@ -135,8 +130,11 @@
                                'mw-rcfilters-ui-capsuleItemWidget-muted',
                                !this.model.isSelected() ||
                                this.model.isIncluded() ||
-                               this.model.isConflicted() ||
                                this.model.isFullyCovered()
+                       )
+                       .toggleClass(
+                               'mw-rcfilters-ui-capsuleItemWidget-conflicted',
+                               this.model.isSelected() && this.model.isConflicted()
                        );
        };
 
@@ -144,10 +142,14 @@
         * Respond to mouse enter event
         */
        mw.rcfilters.ui.CapsuleItemWidget.prototype.onMouseEnter = function () {
-               if ( this.model.getDescription() ) {
+               var labelText = this.model.getStateMessage();
+
+               if ( labelText ) {
+                       this.popupLabel.setLabel( labelText );
+
                        if ( !this.positioned ) {
-                               // Recalculate position to be center of the capsule item
-                               this.popup.$element.css( 'margin-left', ( this.$element.width() / 2 ) );
+                               // Recalculate anchor position to be center of the capsule item
+                               this.popup.$anchor.css( 'margin-left', ( this.$element.width() / 2 ) );
                                this.positioned = true;
                        }