RCFilters UI: Add a placeholder to SavedLinksListWidget when it's empty

No longer hide the button when the menu is empty, but instead
show the placeholder item when the *model* is empty.

Bug: T164861
Change-Id: I96e5e375de5f35946663042f6731d7b69e53308b

diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index 15e82b6..00e0013 100644 (file)
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -1366,6 +1366,7 @@
        "recentchanges-submit": "Show",
        "rcfilters-activefilters": "Active filters",
        "rcfilters-quickfilters": "Quick links",
+       "rcfilters-quickfilters-placeholder": "Save your favorite tool settings to re-use them later.",
        "rcfilters-savedqueries-defaultlabel": "Saved filters",
        "rcfilters-savedqueries-rename": "Rename",
        "rcfilters-savedqueries-setdefault": "Set as default",

diff --git a/languages/i18n/qqq.json b/languages/i18n/qqq.json
index cd42665..75fd99b 100644 (file)
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -1554,6 +1554,7 @@
        "recentchanges-submit": "Label for submit button in [[Special:RecentChanges]]\n{{Identical|Show}}",
        "rcfilters-activefilters": "Title for the filters selection showing the active filters.",
        "rcfilters-quickfilters": "Label for the button that opens the quick filters menu in [[Special:RecentChanges]]",
+       "rcfilters-quickfilters-placeholder": "Text shown in the quick filters menu on [[Special:RecentChanges]] if the user has not saved any quick filters.",
        "rcfilters-savedqueries-defaultlabel": "Default name for saving a new set of quick filters [[Special:RecentChanges]]",
        "rcfilters-savedqueries-rename": "Label for the menu option that edits a quick filter in [[Special:RecentChanges]]\n{{Identical|Rename}}",
        "rcfilters-savedqueries-setdefault": "Label for the menu option that sets a quick filter as default in [[Special:RecentChanges]]",

diff --git a/resources/Resources.php b/resources/Resources.php
index e8c8f61..ad83632 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1803,6 +1803,7 @@ return [
                'messages' => [
                        'rcfilters-activefilters',
                        'rcfilters-quickfilters',
+                       'rcfilters-quickfilters-placeholder',
                        'rcfilters-savedqueries-defaultlabel',
                        'rcfilters-savedqueries-rename',
                        'rcfilters-savedqueries-setdefault',

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less
index e1e55a7..5bda034 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less
@@ -4,4 +4,17 @@
        &-menu {
                width: 100%;
        }
+
+       &-placeholder {
+               // Extra specificity needed to override OOUI rule that sets white-space: nowrap;
+               // on labels inside options
+               &.oo-ui-optionWidget .oo-ui-labelElement-label {
+                       color: #72777d;
+                       white-space: normal;
+               }
+
+               .oo-ui-iconElement-icon {
+                       opacity: 0.5;
+               }
+       }
 }

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 3f701ea..91c05b2 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js
@@ -20,11 +20,17 @@
                this.model = model;
                this.$overlay = config.$overlay || this.$element;
 
+               this.placeholderItem = new OO.ui.DecoratedOptionWidget( {
+                       classes: [ 'mw-rcfilters-ui-savedLinksListWidget-placeholder' ],
+                       label: mw.msg( 'rcfilters-quickfilters-placeholder' ),
+                       icon: 'unClip'
+               } );
                // The only reason we're using "ButtonGroupWidget" here is that
                // straight-out "GroupWidget" is a mixin and cannot be initialized
                // on its own, so we need something to be its widget.
                this.menu = new OO.ui.ButtonGroupWidget( {
-                       classes: [ 'mw-rcfilters-ui-savedLinksListWidget-menu' ]
+                       classes: [ 'mw-rcfilters-ui-savedLinksListWidget-menu' ],
+                       items: [ this.placeholderItem ]
                } );
                this.button = new OO.ui.PopupButtonWidget( {
                        classes: [ 'mw-rcfilters-ui-savedLinksListWidget-button' ],
@@ -60,7 +66,7 @@
                        menuItemEdit: 'onMenuItemEdit'
                } );
 
-               this.button.toggle( !this.menu.isEmpty() );
+               this.placeholderItem.toggle( this.model.isEmpty() );
                // Initialize
                this.$element
                        .addClass( 'mw-rcfilters-ui-savedLinksListWidget' )
@@ -122,7 +128,7 @@
                this.menu.addItems( [
                        new mw.rcfilters.ui.SavedLinksListItemWidget( item, { $overlay: this.$overlay } )
                ] );
-               this.button.toggle( !this.menu.isEmpty() );
+               this.placeholderItem.toggle( this.model.isEmpty() );
        };
 
        /**
@@ -132,6 +138,6 @@
         */
        mw.rcfilters.ui.SavedLinksListWidget.prototype.onModelRemoveItem = function ( item ) {
                this.menu.removeItems( [ this.menu.getItemFromData( item.getID() ) ] );
-               this.button.toggle( !this.menu.isEmpty() );
+               this.placeholderItem.toggle( this.model.isEmpty() );
        };
 }( mediaWiki ) );