From: Moriel Schottlender <moriel@gmail.com>
Date: Fri, 21 Apr 2017 18:34:21 +0000 (-0700)
Subject: RCFilters UI: Fix FilterTagItemWidget styles
X-Git-Tag: 1.31.0-rc.0~3441^2
X-Git-Url: https://git.cyclocoop.org/%242?a=commitdiff_plain;h=662334953a3c7b98ff20659af2cf4629277583b4;p=lhc%2Fweb%2Fwiklou.git

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
---

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 c82903e757..0c89660031 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 f79e013228..d7e5f80d79 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()
+		} );
 	};
 
 	/**