RCFilters: Emphasize UI when saved query is loaded

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

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..27a21d6 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
@@ -20,11 +30,17 @@
                this.model = model;
                this.$overlay = config.$overlay || this.$element;
 
+               this.placeholderItem = new OO.ui.DecoratedOptionWidget( {
+                       classes: [ 'mw-rcfilters-ui-savedLinksListWidget-placeholder' ],
+                       label: $labelNoEntries,
+                       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' ],
@@ -35,7 +51,7 @@
                        popup: {
                                width: 300,
                                anchor: false,
-                               align: 'forwards',
+                               align: 'backwards',
                                $autoCloseIgnore: this.$overlay,
                                $content: this.menu.$element
                        }
@@ -60,7 +76,7 @@
                        menuItemEdit: 'onMenuItemEdit'
                } );
 
-               this.button.toggle( !this.menu.isEmpty() );
+               this.placeholderItem.toggle( this.model.isEmpty() );
                // Initialize
                this.$element
                        .addClass( 'mw-rcfilters-ui-savedLinksListWidget' )
@@ -70,6 +86,8 @@
        /* Initialization */
        OO.inheritClass( mw.rcfilters.ui.SavedLinksListWidget, OO.ui.Widget );
 
+       /* Methods */
+
        /**
         * Respond to menu item click event
         *
@@ -122,7 +140,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 +150,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 ) );