Tweak UI for main filtering entry point

- Change the hamburger icon to plus sign.
- Change the search bar input placeholder text to "Main filter menu".
- Adjust the font style of main entry point placeholder.
- Adjust the font style of the advanced filters label.

Bug: T175217
Change-Id: I24742b68ef8bfeb9f3f71d5dc8818464412ab3f2

diff --git a/languages/i18n/en.json b/languages/i18n/en.json
index 75e0c5c..a3560d9 100644 (file)
--- a/languages/i18n/en.json
+++ b/languages/i18n/en.json
@@ -1383,7 +1383,7 @@
        "rcfilters-restore-default-filters": "Restore default filters",
        "rcfilters-clear-all-filters": "Clear all filters",
        "rcfilters-show-new-changes": "View newest changes",
-       "rcfilters-search-placeholder": "Filter recent changes (browse or start typing)",
+       "rcfilters-search-placeholder": "Main filter menu",
        "rcfilters-invalid-filter": "Invalid filter",
        "rcfilters-empty-filter": "No active filters. All contributions are shown.",
        "rcfilters-filterlist-title": "Filters",

diff --git a/resources/Resources.php b/resources/Resources.php
index 246d9f3..ae8436a 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1928,7 +1928,7 @@ return [
                        'oojs-ui.styles.icons-editing-styling',
                        'oojs-ui.styles.icons-interactions',
                        'oojs-ui.styles.icons-content',
-                       'oojs-ui.styles.icons-layout',
+                       'oojs-ui.styles.icons-interactions',
                        'oojs-ui.styles.icons-media',
                ],
        ],

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
index b4e3b0e..a6b219b 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
@@ -85,3 +85,35 @@
                .highlight-changesListWrapperWidget( tint( mix( @@c1var, mix( @@c2var, average( @@c3var, @@c4var ), 25% ), 25% ), 25% ) );
        }
 }
+
+.input-placeholder-color( @color, @font-weight: bold ) {
+       /* stylelint-disable selector-no-vendor-prefix */
+       &::-webkit-input-placeholder { /* WebKit, Blink */
+               color: @color;
+               font-weight: @font-weight;
+       }
+       &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+               color: @color;
+               opacity: 1; //  Firefox's placeholder defaults with a reduced opacity
+               font-weight: @font-weight;
+       }
+       &::-moz-placeholder { /* Mozilla Firefox 19+ */
+               color: @color;
+               opacity: 1;
+               font-weight: @font-weight;
+       }
+       &:-ms-input-placeholder { /* Internet Explorer 10-11 */
+               color: @color;
+               font-weight: @font-weight;
+       }
+       &::-ms-input-placeholder { /* Microsoft Edge */
+               color: @color;
+               font-weight: @font-weight;
+       }
+       /* stylelint-enable */
+       &::placeholder {
+               color: @color;
+               opacity: 1;
+               font-weight: @font-weight;
+       }
+}

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
index e7233a8..7e7b9c3 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
@@ -1,4 +1,5 @@
-@import 'mediawiki.mixins';
+@import 'mediawiki.ui/variables';
+@import 'mw.rcfilters.mixins.less';
 
 .mw-rcfilters-ui-filterTagMultiselectWidget {
        max-width: none;
@@ -8,6 +9,8 @@
                direction: ltr;
                border-bottom-right-radius: 0;
                height: 2.5em;
+
+               .input-placeholder-color( @colorGray5 );
        }
 
        &.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
@@ -78,6 +81,10 @@
 
                                .oo-ui-labelElement.oo-ui-optionWidget.oo-ui-buttonElement:first-child {
                                        margin-left: 0;
+
+                                       > .oo-ui-buttonElement-button {
+                                               color: @colorGray5;
+                                       }
                                }
                        }
                }

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
index df3263a..0ef27eb 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
@@ -70,7 +70,7 @@
                                ]
                        },
                        input: {
-                               icon: 'menu',
+                               icon: 'add',
                                placeholder: mw.msg( 'rcfilters-search-placeholder' )
                        }
                }, config ) );
@@ -313,7 +313,7 @@
                        this.controller.trackFilterGroupings( 'filtermenu' );
                }
 
-               this.input.setIcon( isVisible ? 'search' : 'menu' );
+               this.input.setIcon( isVisible ? 'search' : 'add' );
        };
 
        /**