Merge "RCFilters UI: Add 'select' state and styles to capsule items"

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
index 2521899..5bc6dbb 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
@@ -1,6 +1,28 @@
 @import "mw.rcfilters.mixins";
 
 .mw-rcfilters-ui-capsuleItemWidget {
+       background-color: #fff;
+       border-color: #979797;
+       color: #222;
+
+       &-muted {
+               // Muted state
+               background-color: #eaecf0;
+               border-color: #c8ccd1;
+               .oo-ui-labelElement-label {
+                       color: #72777d;
+               }
+
+               .oo-ui-buttonWidget {
+                       opacity: @muted-opacity;
+               }
+       }
+
+       &-selected {
+               background-color: #eaf3ff;
+               border-color: #36c;
+       }
+
        &-popup-content {
                padding: 0.5em;
                color: #54595d;
@@ -11,17 +33,6 @@
                cursor: pointer;
        }
 
-       &-muted {
-               // Muted state
-               // We want everything muted except the circle
-               background-color: rgba( 255, 255, 255, @muted-opacity );
-
-               .oo-ui-labelElement-label,
-               .oo-ui-buttonWidget {
-                       opacity: @muted-opacity;
-               }
-       }
-
        &-highlight {
                display: none;
                padding-right: 0.5em;

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
index 8921f7a..a0ef293 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
@@ -25,9 +25,4 @@
                text-align: right;
                padding-left: 0.5em;
        }
-
-       .oo-ui-capsuleItemWidget {
-               color: #222;
-               background-color: #fff;
-       }
 }

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 933a500..800e7ea 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
@@ -175,6 +175,21 @@
                this.popupTimeoutShow = null;
        };
 
+       /**
+        * Set selected state on this widget
+        *
+        * @param {boolean} [isSelected] Widget is selected
+        */
+       mw.rcfilters.ui.CapsuleItemWidget.prototype.toggleSelected = function ( isSelected ) {
+               isSelected = isSelected !== undefined ? isSelected : !this.selected;
+
+               if ( this.selected !== isSelected ) {
+                       this.selected = isSelected;
+
+                       this.$element.toggleClass( 'mw-rcfilters-ui-capsuleItemWidget-selected', this.selected );
+               }
+       };
+
        /**
         * Remove and destroy external elements of this widget
         */

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
index 8e0b259..a06b103 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
@@ -31,6 +31,7 @@
                this.model = model;
                this.filterInput = filterInput;
                this.isSelecting = false;
+               this.selected = null;
 
                this.resetButton = new OO.ui.ButtonWidget( {
                        icon: 'trash',
@@ -184,6 +185,38 @@
                this.emptyFilterMessage.toggle( currFiltersAreEmpty );
        };
 
+       /**
+        * Mark an item widget as selected
+        *
+        * @param {mw.rcfilters.ui.CapsuleItemWidget} item Capsule widget
+        */
+       mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.select = function ( item ) {
+               if ( this.selected !== item ) {
+                       // Unselect previous
+                       if ( this.selected ) {
+                               this.selected.toggleSelected( false );
+                       }
+
+                       // Select new one
+                       this.selected = item;
+                       if ( this.selected ) {
+                               item.toggleSelected( true );
+                       }
+               }
+       };
+
+       /**
+        * Reset selection and remove selected states from all items
+        */
+       mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.resetSelection = function () {
+               if ( this.selected !== null ) {
+                       this.selected = null;
+                       this.getItems().forEach( function ( capsuleWidget ) {
+                               capsuleWidget.toggleSelected( false );
+                       } );
+               }
+       };
+
        /**
         * @inheritdoc
         */

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
index 5b73bdc..02ddb54 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@ -94,6 +94,7 @@
 
                // Highlight item
                this.filterPopup.select( filterName );
+               this.capsule.select( item );
 
                this.scrollToTop( filterWidget.$element );
        };
@@ -106,6 +107,7 @@
        mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupToggle = function ( isVisible ) {
                if ( !isVisible ) {
                        this.filterPopup.resetSelection();
+                       this.capsule.resetSelection();
                } else {
                        this.scrollToTop( this.capsule.$element, 10 );
                }