jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/349507 )
Change subject: RCFilters UI: Fix FilterTagItemWidget styles
......................................................................
RCFilters UI: Fix FilterTagItemWidget styles
The styles got a bit messed up when we switched to using
TagMultiselectWidget. Fixes:
* Switch to using the methods of flaggable element (which TagItemWidget
already is using) instead of custom css classes
* Use flag:invalid for conflicts, so the styles are consistent with
OOUI styling for invalid tags, but keep the label red color, so it
is still evident when the tag is selected.
* Bonus: Actually apply filterTagMultiselectWidget base class, because
it wasn't applied before (oops)
Bug: T163522
Change-Id: I1cc3bd743d8b930bee23386516ca123ee3c36983
---
M
resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagItemWidget.less
M resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagItemWidget.js
2 files changed, 13 insertions(+), 22 deletions(-)
Approvals:
Catrope: Looks good to me, approved
jenkins-bot: Verified
diff --git
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagItemWidget.less
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagItemWidget.less
index c82903e..0c89660 100644
---
a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagItemWidget.less
+++
b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagItemWidget.less
@@ -1,13 +1,9 @@
@import 'mw.rcfilters.mixins';
.mw-rcfilters-ui-filterTagItemWidget {
- background-color: #fff;
- border-color: #979797;
- color: #222;
-
// Background and color of the capsule widget need a bit
// more specificity to override ooui internals
- &-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled {
+ &.oo-ui-flaggedElement-muted.oo-ui-tagItemWidget.oo-ui-widget-enabled {
// Muted state
background-color: #eaecf0;
border-color: #c8ccd1;
@@ -20,19 +16,17 @@
}
}
- &-conflicted.oo-ui-tagItemWidget.oo-ui-widget-enabled {
- background-color: #fee7e6; // Red90 AAA
- border-color: #b32424; // Red30 AAA
-
+ &.oo-ui-flaggedElement-invalid.oo-ui-tagItemWidget.oo-ui-widget-enabled
{
.oo-ui-labelElement-label {
color: #b32424;
}
- .oo-ui-buttonWidget {
- opacity: @muted-opacity;
- }
}
- &-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
+ // OOUI classes require super-specificity in order to override
+ // the white background
+ // The specificity is fixed in the patch:
https://gerrit.wikimedia.org/r/#/c/349525/
+ // and will be available in the next OOUI release.
+
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined
.oo-ui-tagMultiselectWidget-handle
&-selected.oo-ui-tagItemWidget.oo-ui-widget-enabled {
background-color: #eaf3ff;
border-color: #36c;
}
@@ -43,7 +37,6 @@
}
&.oo-ui-labelElement .oo-ui-labelElement-label {
- vertical-align: middle;
cursor: pointer;
}
diff --git
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagItemWidget.js
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagItemWidget.js
index f79e013..d7e5f80 100644
---
a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagItemWidget.js
+++
b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagItemWidget.js
@@ -55,6 +55,7 @@
// Initialization
this.$overlay.append( this.popup.$element );
this.$element
+ .addClass( 'mw-rcfilters-ui-filterTagItemWidget' )
.prepend( this.$highlight )
.attr( 'aria-haspopup', 'true' )
.on( 'mouseenter', this.onMouseEnter.bind( this ) )
@@ -95,17 +96,14 @@
* Set the current mute state for this item
*/
mw.rcfilters.ui.FilterTagItemWidget.prototype.setCurrentMuteState =
function () {
- this.$element
- .toggleClass(
- 'mw-rcfilters-ui-filterTagItemWidget-muted',
+ this.setFlags( {
+ muted: (
!this.model.isSelected() ||
this.model.isIncluded() ||
this.model.isFullyCovered()
- )
- .toggleClass(
-
'mw-rcfilters-ui-filterTagItemWidget-conflicted',
- this.model.isSelected() &&
this.model.isConflicted()
- );
+ ),
+ invalid: this.model.isSelected() &&
this.model.isConflicted()
+ } );
};
/**
--
To view, visit https://gerrit.wikimedia.org/r/349507
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I1cc3bd743d8b930bee23386516ca123ee3c36983
Gerrit-PatchSet: 3
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Mooeypoo <[email protected]>
Gerrit-Reviewer: Catrope <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
