Followup I5cede8: Fixup SavedQueries styling and event

Includes small styling fixes to saved queries and the ability
to update the label of an existing matched query if we rename
it.

Bug: T151994
Bug: T164128
Change-Id: Ic46b082cbfc3462f1d61895bcfc7c545902b2d1a

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less
index 76e1c48..0a72984 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListItemWidget.less
@@ -26,6 +26,7 @@
 
        &-input {
                display: inline-block;
+               margin-right: 0;
                width: 12em;
        }
 

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 ea1d1c3..cbf8747 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
@@ -26,6 +26,7 @@
                this.model = model;
                this.queriesModel = savedQueriesModel;
                this.$overlay = config.$overlay || this.$element;
+               this.matchingQuery = null;
 
                // Parent
                mw.rcfilters.ui.FilterTagMultiselectWidget.parent.call( this, $.extend( true, {
@@ -93,6 +94,7 @@
                        click: 'onSaveQueryButtonClick',
                        saveCurrent: 'setSavedQueryVisibility'
                } );
+               this.queriesModel.connect( this, { itemUpdate: 'onSavedQueriesItemUpdate' } );
 
                // Build the content
                $contentWrapper.append(
@@ -148,6 +150,19 @@
                this.getMenu().toggle( false );
        };
 
+       /**
+        * Respond to save query item change. Mainly this is done to update the label in case
+        * a query item has been edited
+        *
+        * @param {mw.rcfilters.dm.SavedQueryItemModel} item Saved query item
+        */
+       mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onSavedQueriesItemUpdate = function ( item ) {
+               if ( this.matchingQuery === item ) {
+                       // This means we just edited the item that is currently matched
+                       this.savedQueryTitle.setLabel( item.getLabel() );
+               }
+       };
+
        /**
         * Respond to menu toggle
         *
@@ -206,15 +221,15 @@
         * Set the visibility of the saved query button
         */
        mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.setSavedQueryVisibility = function () {
-               var matchingQuery = this.controller.findQueryMatchingCurrentState();
+               this.matchingQuery = this.controller.findQueryMatchingCurrentState();
 
                this.savedQueryTitle.setLabel(
-                       matchingQuery ? matchingQuery.getLabel() : ''
+                       this.matchingQuery ? this.matchingQuery.getLabel() : ''
                );
-               this.savedQueryTitle.toggle( !!matchingQuery );
+               this.savedQueryTitle.toggle( !!this.matchingQuery );
                this.saveQueryButton.toggle(
                        !this.isEmpty() &&
-                       !matchingQuery
+                       !this.matchingQuery
                );
        };
        /**

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
index 3e6fb77..51b348e 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListItemWidget.js
@@ -193,6 +193,9 @@
                } else if ( action === 'default' ) {
                        this.emit( 'default', !this.default );
                }
+               // Reset selected
+               this.menu.selectItem( null );
+               // Close the menu
                this.menu.toggle( false );
        };