RCFilters UI: Display 'no results found' if... no results were found!

The "normal" operation of an OO.ui.MenuSelectWidget is to hide itself
if no results are found in the filtering process. However, we want
the menu to remain visible but display a 'no filters found' message
like it did before the migration to a MenuTagMultiselectWidget.

Bug: T163170
Change-Id: Iee7b07961b90ac514a4aa1f7c56019ecd7b4c3cc

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterFloatingMenuSelectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterFloatingMenuSelectWidget.less
index 194b1b2..7602465 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterFloatingMenuSelectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterFloatingMenuSelectWidget.less
@@ -4,6 +4,20 @@
        z-index: auto;
        max-width: 650px;
 
+       &.oo-ui-menuSelectWidget-invisible {
+               display: block;
+       }
+
+       &-noresults {
+               display: none;
+               padding: 0.5em;
+               color: #666;
+
+               .oo-ui-menuSelectWidget-invisible & {
+                       display: inline-block;
+               }
+       }
+
        &-body {
                max-height: 70vh;
        }

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterFloatingMenuSelectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterFloatingMenuSelectWidget.js
index ec85df9..748eea8 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterFloatingMenuSelectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterFloatingMenuSelectWidget.js
@@ -45,11 +45,16 @@
                        }
                );
 
+               this.noResults = new OO.ui.LabelWidget( {
+                       label: mw.msg( 'rcfilters-filterlist-noresults' ),
+                       classes: [ 'mw-rcfilters-ui-filterFloatingMenuSelectWidget-noresults' ]
+               } );
+
                this.$element
                        .addClass( 'mw-rcfilters-ui-filterFloatingMenuSelectWidget' )
                        .append(
                                this.$body
-                                       .append( header.$element, this.$group )
+                                       .append( header.$element, this.$group, this.noResults.$element )
                        );
 
                if ( this.$footer ) {