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

When a user clicks a capsule item and it scrolls down to the filter
in the list, make sure the capsule is also showing it is selected.
Take that opportunity to apply the design per spec for the capsule
items.

Bug: T149391
Change-Id: Idac62dea0f7a699a6e80dd3dca3d30b8e28e63b8

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 bb213fd..dc3cfe5 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@ -82,6 +82,7 @@
 
                // Highlight item
                this.filterPopup.select( filterName );
+               this.capsule.select( item );
 
                this.scrollToTop( filterWidget.$element );
        };
@@ -94,6 +95,7 @@
        mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupToggle = function ( isVisible ) {
                if ( !isVisible ) {
                        this.filterPopup.resetSelection();
+                       this.capsule.resetSelection();
                } else {
                        this.scrollToTop( this.capsule.$element, 10 );
                }