FilterTagMultiselectWidget: Use frameless buttons and fix height issues

Use a fixed height of 2.5em so the textinput and buttons line up.

Change-Id: Ifa50230084a88450eb5bcf8ca4faef28091cdf65

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 5ce7988..420bb44 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
@@ -5,6 +5,7 @@
                // Make sure this uses the interface direction, not the content direction
                direction: ltr;
                border-bottom-right-radius: 0;
+               height: 2.5em;
        }
 
        &.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
@@ -43,18 +44,19 @@
                        width: 1em;
 
                        &-widget.oo-ui-widget {
+                               border: 1px solid #a2a9b1;
+                               border-left-width: 0;
+                               border-top-left-radius: 0;
+                               border-top-right-radius: 0;
+                               border-bottom-left-radius: 0;
+
                                display: block;
                                text-align: right;
+                               height: 2.5em;
+                               box-sizing: border-box;
 
-                               // Override OOUI rules
-                               &.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child a.oo-ui-buttonElement-button,
-                               .oo-ui-buttonOptionWidget a.oo-ui-buttonElement-button {
-                                       border-radius: 0;
-                                       border-left: 0;
-                               }
-
-                               &.oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child a.oo-ui-buttonElement-button {
-                                       border-bottom-right-radius: 2px;
+                               .oo-ui-buttonElement-frameless.oo-ui-iconElement:first-child {
+                                       margin-left: 0;
                                }
 
                        }

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 752bbe6..7b49147 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
@@ -145,11 +145,13 @@
                                classes: [ 'mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget' ],
                                items: [
                                        new OO.ui.ButtonOptionWidget( {
+                                               framed: false,
                                                data: 'namespaces',
                                                icon: 'article',
                                                title: mw.msg( 'namespaces' )
                                        } ),
                                        new OO.ui.ButtonOptionWidget( {
+                                               framed: false,
                                                data: 'tags',
                                                icon: 'tag',
                                                title: mw.msg( 'rcfilters-view-tags' )