RCFilters UI: Adjust styles for filter list elements

* Add bottom border between filters
* Adjust the placement of the header label (use table layout)

Bug: T149452
Change-Id: Ie3892b34e5ca5e00380862fa65959d148f2196f4

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less
index bbde9ce..1c3caa0 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterItemWidget.less
@@ -4,6 +4,10 @@
        padding: 0 0.5em;
        .box-sizing( border-box );
 
+       &:not( :last-child ) {
+               border-bottom: solid 1px #eaecf0; // Base 80 AAA
+       }
+
        &:hover {
                background-color: #f8f9fa; // Base90 AAA
        }

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FiltersListWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FiltersListWidget.less
index 7fd3a21..3334d84 100644 (file)
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FiltersListWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FiltersListWidget.less
@@ -4,9 +4,22 @@
                padding: 0.75em;
                // TODO: Unify colors with official design palette
                color: #54595d;
+       }
+
+       &-header {
                border-bottom: 1px solid #c8ccd1;
                background: #f8f9fa;
                overflow: hidden;
+
+               &-highlight {
+                       width: 1em;
+                       vertical-align: middle;
+               }
+
+               &-title {
+                       width: 100%;
+                       vertical-align: middle;
+               }
        }
 
        &-noresults {
@@ -14,8 +27,4 @@
                // TODO: Unify colors with official design palette
                color: #666;
        }
-
-       &-hightlightButton {
-               float: right;
-       }
 }

diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js
index 8c730a2..cefe749 100644 (file)
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FiltersListWidget.js
@@ -34,8 +34,6 @@
                        classes: [ 'mw-rcfilters-ui-filtersListWidget-hightlightButton' ]
                } );
 
-               this.$label.append( this.highlightButton.$element );
-
                this.noResultsLabel = new OO.ui.LabelWidget( {
                        label: mw.msg( 'rcfilters-filterlist-noresults' ),
                        classes: [ 'mw-rcfilters-ui-filtersListWidget-noresults' ]
@@ -53,7 +51,24 @@
                this.$element
                        .addClass( 'mw-rcfilters-ui-filtersListWidget' )
                        .append(
-                               this.$label,
+                               $( '<div>' )
+                                       .addClass( 'mw-rcfilters-ui-table' )
+                                       .addClass( 'mw-rcfilters-ui-filtersListWidget-header' )
+                                       .append(
+                                               $( '<div>' )
+                                                       .addClass( 'mw-rcfilters-ui-row' )
+                                                       .append(
+                                                               $( '<div>' )
+                                                                       .addClass( 'mw-rcfilters-ui-cell' )
+                                                                       .addClass( 'mw-rcfilters-ui-filtersListWidget-header-title' )
+                                                                       .append( this.$label ),
+                                                               $( '<div>' )
+                                                                       .addClass( 'mw-rcfilters-ui-cell' )
+                                                                       .addClass( 'mw-rcfilters-ui-filtersListWidget-header-highlight' )
+                                                                       .append( this.highlightButton.$element )
+                                                       )
+                                       ),
+                               // this.$label,
                                this.$group
                                        .addClass( 'mw-rcfilters-ui-filtersListWidget-group' ),
                                this.noResultsLabel.$element