Merge "RCFilters: Emphasize UI when saved query is loaded"

diff --combined resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
index 6da97c8,7789b55..6a6790f
--- 1/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
--- 2/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
@@@ -290,9 -290,6 +290,9 @@@
                                // Clear the input
                                this.input.setValue( '' );
                        }
 +
 +                      // Log filter grouping
 +                      this.controller.trackFilterGroupings( 'filtermenu' );
                }
  
                this.input.setIcon( isVisible ? 'search' : 'menu' );
@@@ -381,6 -378,10 +381,10 @@@
                                !this.isEmpty() &&
                                !this.matchingQuery
                        );
+ 
+                       if ( this.matchingQuery ) {
+                               this.emphasize();
+                       }
                }
        };
  
@@@ -390,10 -391,6 +394,10 @@@
         * @param {mw.rcfilters.dm.FilterItem} item Filter item model
         */
        mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onModelItemUpdate = function ( item ) {
 +              if ( item.getGroupModel().isHidden() ) {
 +                      return;
 +              }
 +
                if (
                        item.isSelected() ||
                        (
@@@ -595,6 -592,26 +599,26 @@@
                }
        };
  
+       mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.emphasize = function () {
+               if (
+                       !this.$handle.hasClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' )
+               ) {
+                       this.$handle
+                               .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' )
+                               .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
+ 
+                       setTimeout( function () {
+                               this.$handle
+                                       .removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' );
+ 
+                               setTimeout( function () {
+                                       this.$handle
+                                               .removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
+                               }.bind( this ), 1000 );
+                       }.bind( this ), 500 );
+ 
+               }
+       };
        /**
         * Scroll the element to top within its container
         *

diff --combined resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
index 1e2ec81,e36067d..9b4ce7f
--- 1/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
--- 2/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@@ -38,22 -38,6 +38,22 @@@
                        this.controller
                );
  
 +              this.numChangesWidget = new mw.rcfilters.ui.ChangesLimitButtonWidget(
 +                      this.controller,
 +                      this.model,
 +                      {
 +                              $overlay: this.$overlay
 +                      }
 +              );
 +
 +              this.dateWidget = new mw.rcfilters.ui.DateButtonWidget(
 +                      this.controller,
 +                      this.model,
 +                      {
 +                              $overlay: this.$overlay
 +                      }
 +              );
 +
                // Initialize
                this.$element
                        .addClass( 'mw-rcfilters-ui-filterWrapperWidget' );
@@@ -68,21 -52,12 +68,20 @@@
                        this.$element.append(
                                this.savedLinksListWidget.$element
                        );
- 
                }
  
                $bottom = $( '<div>' )
 -                      .addClass( 'mw-rcfilters-ui-filterWrapperWidget-bottom' );
 +                      .addClass( 'mw-rcfilters-ui-filterWrapperWidget-bottom' )
 +                      .append(
 +                              this.numChangesWidget.$element,
 +                              this.dateWidget.$element
 +                      );
  
 -              if ( mw.config.get( 'wgStructuredChangeFiltersEnableLiveUpdate' ) ) {
 +              if (
 +                      mw.config.get( 'wgStructuredChangeFiltersEnableLiveUpdate' ) ||
 +                      // Allow users to enable live update with ?liveupdate=1
 +                      new mw.Uri().query.liveupdate
 +              ) {
                        $bottom.append( this.liveUpdateButton.$element );
                }