RCFilters: Emphasize UI when saved query is loaded

Bug: T169063
Change-Id: Ia300ca7bb4afb7d8e247e57e53ecff826ddf0d7e

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
index 420bb44..7ee601f 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
@@ -1,3 +1,5 @@
+@import 'mediawiki.mixins';
+
 .mw-rcfilters-ui-filterTagMultiselectWidget {
        max-width: none;
 
@@ -17,6 +19,14 @@
                margin-top: 1.6em;
        }
 
+       .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-animate.oo-ui-tagMultiselectWidget-handle {
+               .transition( background-color 500ms ease-out );
+       }
+
+       .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-emphasize.oo-ui-tagMultiselectWidget-handle {
+               background-color: #eaf3ff; // Accent90
+       }
+
        &-wrapper {
                .mw-rcfilters-ui-table {
                        margin-top: 0.3em;
@@ -29,7 +39,8 @@
                        }
 
                        &-savedQueryTitle {
-                               color: #72777d;
+                               color: #222; // Base10
+                               font-weight: bold;
                                margin-left: 1em;
                        }
                }

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
index dcada85..7789b55 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
@@ -378,6 +378,10 @@
                                !this.isEmpty() &&
                                !this.matchingQuery
                        );
+
+                       if ( this.matchingQuery ) {
+                               this.emphasize();
+                       }
                }
        };
 
@@ -588,6 +592,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 --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
index a748063..e36067d 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@ -52,7 +52,6 @@
                        this.$element.append(
                                this.savedLinksListWidget.$element
                        );
-
                }
 
                $bottom = $( '<div>' )

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js
index 3b5e7d9..27a21d6 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js
@@ -86,6 +86,8 @@
        /* Initialization */
        OO.inheritClass( mw.rcfilters.ui.SavedLinksListWidget, OO.ui.Widget );
 
+       /* Methods */
+
        /**
         * Respond to menu item click event
         *