From: Roan Kattouw <roan.kattouw@gmail.com>
Date: Thu, 11 May 2017 01:28:39 +0000 (-0700)
Subject: RCFilters UI: Add a placeholder to SavedLinksListWidget when it's empty
X-Git-Tag: 1.31.0-rc.0~3261
X-Git-Url: http://git.cyclocoop.org/%22%20.%20generer_url_aide%28?a=commitdiff_plain;h=960e85b44367956d726265a085815eee2650db59;p=lhc%2Fweb%2Fwiklou.git

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 15e82b6153..00e0013108 100644
--- 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 cd42665a33..75fd99b047 100644
--- 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 e8c8f61a9c..ad836329e6 100644
--- 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 e1e55a77f5..5bda034c32 100644
--- 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 3f701ea795..91c05b268f 100644
--- 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 ) );