Tweak UI for main filtering entry point

[lhc/web/wiklou.git] / resources / src / mediawiki.rcfilters / ui / mw.rcfilters.ui.FilterTagMultiselectWidget.js

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 3aa7161..0ef27eb 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
@@ -70,7 +70,7 @@
                                ]
                        },
                        input: {
-                               icon: 'menu',
+                               icon: 'add',
                                placeholder: mw.msg( 'rcfilters-search-placeholder' )
                        }
                }, config ) );
@@ -85,17 +85,23 @@
                        classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-resetButton' ]
                } );
 
-               this.saveQueryButton = new mw.rcfilters.ui.SaveFiltersPopupButtonWidget(
-                       this.controller,
-                       this.queriesModel
-               );
+               if ( !mw.user.isAnon() ) {
+                       this.saveQueryButton = new mw.rcfilters.ui.SaveFiltersPopupButtonWidget(
+                               this.controller,
+                               this.queriesModel
+                       );
 
-               this.saveQueryButton.$element.on( 'mousedown', function ( e ) { e.stopPropagation(); } );
+                       this.saveQueryButton.$element.on( 'mousedown', function ( e ) { e.stopPropagation(); } );
 
-               this.saveQueryButton.connect( this, {
-                       click: 'onSaveQueryButtonClick',
-                       saveCurrent: 'setSavedQueryVisibility'
-               } );
+                       this.saveQueryButton.connect( this, {
+                               click: 'onSaveQueryButtonClick',
+                               saveCurrent: 'setSavedQueryVisibility'
+                       } );
+                       this.queriesModel.connect( this, {
+                               itemUpdate: 'onSavedQueriesItemUpdate',
+                               initialize: 'onSavedQueriesInitialize'
+                       } );
+               }
 
                this.emptyFilterMessage = new OO.ui.LabelWidget( {
                        label: mw.msg( 'rcfilters-empty-filter' ),
@@ -115,7 +121,6 @@
                        highlightChange: 'onModelHighlightChange'
                } );
                this.input.connect( this, { change: 'onInputChange' } );
-               this.queriesModel.connect( this, { itemUpdate: 'onSavedQueriesItemUpdate' } );
 
                // The filter list and button should appear side by side regardless of how
                // wide the button is; the button also changes its width depending
@@ -129,12 +134,14 @@
                                        .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-filters' )
                        );
 
-               rcFiltersRow.append(
-                       $( '<div>' )
-                               .addClass( 'mw-rcfilters-ui-cell' )
-                               .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-save' )
-                               .append( this.saveQueryButton.$element )
-               );
+               if ( !mw.user.isAnon() ) {
+                       rcFiltersRow.append(
+                               $( '<div>' )
+                                       .addClass( 'mw-rcfilters-ui-cell' )
+                                       .addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-cell-save' )
+                                       .append( this.saveQueryButton.$element )
+                       );
+               }
 
                // Add a selector at the right of the input
                this.viewsSelectWidget = new OO.ui.ButtonSelectWidget( {
@@ -252,6 +259,13 @@
                this.getMenu().toggle( false );
        };
 
+       /**
+        * Respond to save query model initialization
+        */
+       mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.onSavedQueriesInitialize = function () {
+               this.setSavedQueryVisibility();
+       };
+
        /**
         * Respond to save query item change. Mainly this is done to update the label in case
         * a query item has been edited
@@ -299,7 +313,7 @@
                        this.controller.trackFilterGroupings( 'filtermenu' );
                }
 
-               this.input.setIcon( isVisible ? 'search' : 'menu' );
+               this.input.setIcon( isVisible ? 'search' : 'add' );
        };
 
        /**
@@ -309,8 +323,11 @@
                // Parent
                mw.rcfilters.ui.FilterTagMultiselectWidget.parent.prototype.onInputFocus.call( this );
 
-               // Scroll to top
-               this.scrollToTop( this.$element );
+               // Only scroll to top of the viewport if:
+               // - The widget is more than 20px from the top
+               // - The widget is not above the top of the viewport (do not scroll downwards)
+               //   (This isn't represented because >20 is, anyways and always, bigger than 0)
+               this.scrollToTop( this.$element, 0, { min: 20, max: Infinity } );
        };
 
        /**
@@ -379,16 +396,17 @@
         * Set the visibility of the saved query button
         */
        mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.setSavedQueryVisibility = function () {
+               if ( mw.user.isAnon() ) {
+                       return;
+               }
+
                this.matchingQuery = this.controller.findQueryMatchingCurrentState();
 
                this.savedQueryTitle.setLabel(
                        this.matchingQuery ? this.matchingQuery.getLabel() : ''
                );
                this.savedQueryTitle.toggle( !!this.matchingQuery );
-               this.saveQueryButton.toggle(
-                       !this.isEmpty() &&
-                       !this.matchingQuery
-               );
+               this.saveQueryButton.toggle( !this.matchingQuery );
 
                if ( this.matchingQuery ) {
                        this.emphasize();
@@ -631,17 +649,36 @@
         *
         * @private
         * @param {jQuery} $element Element to position
-        * @param {number} [marginFromTop] When scrolling the entire widget to the top, leave this
+        * @param {number} [marginFromTop=0] When scrolling the entire widget to the top, leave this
         *  much space (in pixels) above the widget.
+        * @param {Object} [threshold] Minimum distance from the top of the element to scroll at all
+        * @param {number} [threshold.min] Minimum distance above the element
+        * @param {number} [threshold.max] Minimum distance below the element
         */
-       mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.scrollToTop = function ( $element, marginFromTop ) {
+       mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.scrollToTop = function ( $element, marginFromTop, threshold ) {
                var container = OO.ui.Element.static.getClosestScrollableContainer( $element[ 0 ], 'y' ),
                        pos = OO.ui.Element.static.getRelativePosition( $element, $( container ) ),
-                       containerScrollTop = $( container ).is( 'body, html' ) ? 0 : $( container ).scrollTop();
+                       containerScrollTop = $( container ).scrollTop(),
+                       effectiveScrollTop = $( container ).is( 'body, html' ) ? 0 : containerScrollTop,
+                       newScrollTop = effectiveScrollTop + pos.top - ( marginFromTop || 0 );
 
                // Scroll to item
-               $( container ).animate( {
-                       scrollTop: containerScrollTop + pos.top - ( marginFromTop || 0 )
-               } );
+               if (
+                       threshold === undefined ||
+                       (
+                               (
+                                       threshold.min === undefined ||
+                                       newScrollTop - containerScrollTop >= threshold.min
+                               ) &&
+                               (
+                                       threshold.max === undefined ||
+                                       newScrollTop - containerScrollTop <= threshold.max
+                               )
+                       )
+               ) {
+                       $( container ).animate( {
+                               scrollTop: newScrollTop
+                       } );
+               }
        };
 }( mediaWiki ) );