RCFilters: Correct display of save filter popup

- Correct language in the 'apply' button
- Add a placeholder to the input
- Make the 'apply' button disabled if the input is empty
- Remove the use of the OOUI-built-in validation, since all
  we do is "validate" that the input isn't empty, and there's
  no need to show error mode (red border) for that, especially
  since the 'apply' button is disabled in that case.

Bug: T169042
Change-Id: I5e3600b1ac8e63d8a25c0540468fe42febfc3a70

diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index 8db80e5..966439b 100644 (file)
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -1360,7 +1360,8 @@
        "rcfilters-savedqueries-unsetdefault": "Remove as default",
        "rcfilters-savedqueries-remove": "Remove",
        "rcfilters-savedqueries-new-name-label": "Name",
-       "rcfilters-savedqueries-apply-label": "Save settings",
+       "rcfilters-savedqueries-new-name-placeholder": "Describe the purpose of the filter",
+       "rcfilters-savedqueries-apply-label": "Create filter",
        "rcfilters-savedqueries-cancel-label": "Cancel",
        "rcfilters-savedqueries-add-new-title": "Save current filter settings",
        "rcfilters-restore-default-filters": "Restore default filters",

diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index 5b018c9..7fbcd96 100644 (file)
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -1550,9 +1550,10 @@
        "rcfilters-savedqueries-unsetdefault": "Label for the menu option that unsets a quick filter as default in [[Special:RecentChanges]]",
        "rcfilters-savedqueries-remove": "Label for the menu option that removes a quick filter as default in [[Special:RecentChanges]]\n{{Identical|Remove}}",
        "rcfilters-savedqueries-new-name-label": "Label for the input that holds the name of the new saved filters in [[Special:RecentChanges]]\n{{Identical|Name}}",
-       "rcfilters-savedqueries-apply-label": "Label for the button to apply saving a new filter setting in [[Special:RecentChanges]]",
+       "rcfilters-savedqueries-new-name-placeholder": "Placeholder for the input that holds the name of the new saved filters in [[Special:RecentChanges]]",
+       "rcfilters-savedqueries-apply-label": "Label for the button to apply saving a new filter setting in [[Special:RecentChanges]]. This is for a small popup, please try to use a short string.",
        "rcfilters-savedqueries-cancel-label": "Label for the button to cancel the saving of a new quick link in [[Special:RecentChanges]]\n{{Identical|Cancel}}",
-       "rcfilters-savedqueries-add-new-title": "Title for the popup to add new quick link in [[Special:RecentChanges]]",
+       "rcfilters-savedqueries-add-new-title": "Title for the popup to add new quick link in [[Special:RecentChanges]]. This is for a small popup, please try to use a short string.",
        "rcfilters-restore-default-filters": "Label for the button that resets filters to defaults",
        "rcfilters-clear-all-filters": "Title for the button that clears all filters",
        "rcfilters-search-placeholder": "Placeholder for the filter search input.",

diff --git a/resources/Resources.php b/resources/Resources.php
index dc05387..ccfe970 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1827,6 +1827,7 @@ return [
                        'rcfilters-savedqueries-unsetdefault',
                        'rcfilters-savedqueries-remove',
                        'rcfilters-savedqueries-new-name-label',
+                       'rcfilters-savedqueries-new-name-placeholder',
                        'rcfilters-savedqueries-add-new-title',
                        'rcfilters-savedqueries-apply-label',
                        'rcfilters-savedqueries-cancel-label',

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js
index fc0f302..7aaf6b3 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SaveFiltersPopupButtonWidget.js
@@ -39,7 +39,7 @@
                this.popup.$head.prepend( ( new OO.ui.IconWidget( { icon: 'unClip' } ) ).$element );
 
                this.input = new OO.ui.TextInputWidget( {
-                       validate: /\S/
+                       placeholder: mw.msg( 'rcfilters-savedqueries-new-name-placeholder' )
                } );
                layout = new OO.ui.FieldLayout( this.input, {
                        label: mw.msg( 'rcfilters-savedqueries-new-name-label' ),
@@ -73,7 +73,10 @@
                this.popup.connect( this, {
                        ready: 'onPopupReady'
                } );
-               this.input.connect( this, { enter: 'onInputEnter' } );
+               this.input.connect( this, {
+                       change: 'onInputChange',
+                       enter: 'onInputEnter'
+               } );
                this.input.$input.on( {
                        keyup: this.onInputKeyup.bind( this )
                } );
@@ -81,6 +84,7 @@
                this.applyButton.connect( this, { click: 'onApplyButtonClick' } );
 
                // Initialize
+               this.applyButton.setDisabled( !this.input.getValue() );
                this.$element
                        .addClass( 'mw-rcfilters-ui-saveFiltersPopupButtonWidget' );
        };
@@ -95,6 +99,15 @@
                this.apply();
        };
 
+       /**
+        * Respond to input change event
+        *
+        * @param {string} value Input value
+        */
+       mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.onInputChange = function ( value ) {
+               this.applyButton.setDisabled( !value );
+       };
+
        /**
         * Respond to input keyup event, this is the way to intercept 'escape' key
         *
@@ -133,15 +146,16 @@
         * Apply and add the new quick link
         */
        mw.rcfilters.ui.SaveFiltersPopupButtonWidget.prototype.apply = function () {
-               var widget = this,
-                       label = this.input.getValue();
-
-               this.input.getValidity()
-                       .done( function () {
-                               widget.controller.saveCurrentQuery( label );
-                               widget.input.setValue( this.input, '' );
-                               widget.emit( 'saveCurrent' );
-                               widget.popup.toggle( false );
-                       } );
+               var label = this.input.getValue();
+
+               // This condition is more for sanity-check, since the
+               // apply button should be disabled if the label is empty
+               if ( label ) {
+                       this.controller.saveCurrentQuery( label );
+                       this.input.setValue( this.input, '' );
+                       this.popup.toggle( false );
+
+                       this.emit( 'saveCurrent' );
+               }
        };
 }( mediaWiki ) );