RCFilters: Style the Saved Links placeholder and add a title

Bug: T164861
Change-Id: I4cfdfdc82d53631008df35e9444781cf91bad06e

diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index 00e0013..4e9018d 100644 (file)
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -1366,7 +1366,8 @@
        "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-quickfilters-placeholder-title": "No links saved yet",
+       "rcfilters-quickfilters-placeholder-description": "To save your filter settings and reuse them later, click the bookmark icon in the Active Filter area, below.",
        "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 75fd99b..fd99b22 100644 (file)
--- a/languages/i18n/qqq.json
+++ b/languages/i18n/qqq.json
@@ -1554,7 +1554,8 @@
        "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-quickfilters-placeholder-title": "Title for the text shown in the quick filters menu on [[Special:RecentChanges]] if the user has not saved any quick filters.",
+       "rcfilters-quickfilters-placeholder-description": "Description for the 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 ad83632..109a676 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1803,7 +1803,8 @@ return [
                'messages' => [
                        'rcfilters-activefilters',
                        'rcfilters-quickfilters',
-                       'rcfilters-quickfilters-placeholder',
+                       'rcfilters-quickfilters-placeholder-title',
+                       'rcfilters-quickfilters-placeholder-description',
                        '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 5bda034..716ed03 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.SavedLinksListWidget.less
@@ -6,6 +6,11 @@
        }
 
        &-placeholder {
+               &-title {
+                       font-weight: bold;
+                       margin-bottom: 1em;
+               }
+
                // Extra specificity needed to override OOUI rule that sets white-space: nowrap;
                // on labels inside options
                &.oo-ui-optionWidget .oo-ui-labelElement-label {
@@ -15,6 +20,11 @@
 
                .oo-ui-iconElement-icon {
                        opacity: 0.5;
+                       // Override OOUI option widget rules for icons
+                       // we want the icon to appear at the top near the
+                       // title, not in the middle of the multiline option
+                       top: 0.7em !important; /* stylelint-disable-line declaration-no-important */
+                       height: inherit !important; /* stylelint-disable-line declaration-no-important */
                }
        }
 }

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 91c05b2..8c021d0 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js
@@ -11,6 +11,16 @@
         * @cfg {jQuery} [$overlay] A jQuery object serving as overlay for popups
         */
        mw.rcfilters.ui.SavedLinksListWidget = function MwRcfiltersUiSavedLinksListWidget( controller, model, config ) {
+               var $labelNoEntries = $( '<div>' )
+                       .append(
+                               $( '<div>' )
+                                       .addClass( 'mw-rcfilters-ui-savedLinksListWidget-placeholder-title' )
+                                       .text( mw.msg( 'rcfilters-quickfilters-placeholder-title' ) ),
+                               $( '<div>' )
+                                       .addClass( 'mw-rcfilters-ui-savedLinksListWidget-placeholder-description' )
+                                       .text( mw.msg( 'rcfilters-quickfilters-placeholder-description' ) )
+                       );
+
                config = config || {};
 
                // Parent
@@ -22,7 +32,7 @@
 
                this.placeholderItem = new OO.ui.DecoratedOptionWidget( {
                        classes: [ 'mw-rcfilters-ui-savedLinksListWidget-placeholder' ],
-                       label: mw.msg( 'rcfilters-quickfilters-placeholder' ),
+                       label: $labelNoEntries,
                        icon: 'unClip'
                } );
                // The only reason we're using "ButtonGroupWidget" here is that