Mooeypoo has uploaded a new change for review. (
https://gerrit.wikimedia.org/r/339580 )
Change subject: Align trash icon with filter list
......................................................................
Align trash icon with filter list
Bug: T149391
Change-Id: Icf867bf572253d288602f00890551909d869a459
---
M
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
M
resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
2 files changed, 37 insertions(+), 42 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/core
refs/changes/80/339580/1
diff --git
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
index 6c11cdb..8921f7a 100644
---
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
+++
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
@@ -18,21 +18,12 @@
color: #72777d;
}
- &-table {
- display: table;
+ &-cell-filters {
width: 100%;
}
-
- &-row {
- display: table-row;
- }
-
- &-cell {
- display: table-cell;
-
- &:last-child {
- text-align: right;
- }
+ &-cell-reset {
+ text-align: right;
+ padding-left: 0.5em;
}
.oo-ui-capsuleItemWidget {
diff --git
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
index 910e8e1..50b7d15 100644
---
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
+++
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
@@ -13,6 +13,13 @@
* @cfg {jQuery} [$overlay] A jQuery object serving as overlay for
popups
*/
mw.rcfilters.ui.FilterCapsuleMultiselectWidget = function
MwRcfiltersUiFilterCapsuleMultiselectWidget( controller, model, filterInput,
config ) {
+ var title = new OO.ui.LabelWidget( {
+ label: mw.msg( 'rcfilters-activefilters' ),
+ classes: [
'mw-rcfilters-ui-filterCapsuleMultiselectWidget-wrapper-content-title' ]
+ } ),
+ $contentWrapper = $( '<div>' )
+ .addClass(
'mw-rcfilters-ui-filterCapsuleMultiselectWidget-wrapper' );
+
this.$overlay = config.$overlay || this.$element;
// Parent
@@ -25,12 +32,6 @@
this.filterInput = filterInput;
- this.$content.prepend(
- $( '<div>' )
- .addClass(
'mw-rcfilters-ui-filterCapsuleMultiselectWidget-content-title' )
- .text( mw.msg( 'rcfilters-activefilters' ) )
- );
-
this.resetButton = new OO.ui.ButtonWidget( {
icon: 'trash',
framed: false,
@@ -42,6 +43,7 @@
label: mw.msg( 'rcfilters-empty-filter' ),
classes: [
'mw-rcfilters-ui-filterCapsuleMultiselectWidget-emptyFilters' ]
} );
+ this.$content.append( this.emptyFilterMessage.$element );
// Events
this.resetButton.connect( this, { click: 'onResetButtonClick' }
);
@@ -53,30 +55,32 @@
this.filterInput.$input
.on( 'focus', this.focus.bind( this ) );
+ // Build the content
+ $contentWrapper.append(
+ title.$element,
+ $( '<div>' )
+ .addClass( 'mw-rcfilters-ui-table' )
+ .append(
+ // The filter list and button should
appear side by side regardless of how
+ // wide the button is; the button also
changes its width depending
+ // on language and its state, so the
safest way to present both side
+ // by side is with a table layout
+ $( '<div>' )
+ .addClass(
'mw-rcfilters-ui-row' )
+ .append(
+ this.$content
+ .addClass(
'mw-rcfilters-ui-cell' )
+ .addClass(
'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell-filters' ),
+ $( '<div>' )
+ .addClass(
'mw-rcfilters-ui-cell' )
+ .addClass(
'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell-reset' )
+ .append(
this.resetButton.$element )
+ )
+ )
+ );
+
// Initialize
- this.$content.append( this.emptyFilterMessage.$element );
- this.$handle
- .append(
- // The content and button should appear side by
side regardless of how
- // wide the button is; the button also changes
its width depending
- // on language and its state, so the safest way
to present both side
- // by side is with a table layout
- $( '<div>' )
- .addClass(
'mw-rcfilters-ui-filterCapsuleMultiselectWidget-table' )
- .append(
- $( '<div>' )
- .addClass(
'mw-rcfilters-ui-filterCapsuleMultiselectWidget-row' )
- .append(
- $( '<div>' )
-
.addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-content' )
-
.addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell' )
-
.append( this.$content ),
- $( '<div>' )
-
.addClass( 'mw-rcfilters-ui-filterCapsuleMultiselectWidget-cell' )
-
.append( this.resetButton.$element )
- )
- )
- );
+ this.$handle.append( $contentWrapper );
this.$element
.addClass(
'mw-rcfilters-ui-filterCapsuleMultiselectWidget' );
--
To view, visit https://gerrit.wikimedia.org/r/339580
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Icf867bf572253d288602f00890551909d869a459
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <mor...@gmail.com>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
