From: Moriel Schottlender <moriel@gmail.com>
Date: Fri, 3 Mar 2017 00:53:08 +0000 (-0800)
Subject: RCFilters UI: Adopt conflict colors
X-Git-Tag: 1.31.0-rc.0~3905^2
X-Git-Url: http://git.cyclocoop.org/%7B%24www_url%7Dadmin/membres/fiche.php?a=commitdiff_plain;h=00ec42206d4821962d41b6f233765f5b860c6130;p=lhc%2Fweb%2Fwiklou.git

RCFilters UI: Adopt conflict colors

Bug: T156427
Bug: T156861
Change-Id: I8765dfb0554e6351b9cb3516a2bc979c57b20053
---

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
index c70da38029..8173150d5f 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
@@ -5,20 +5,34 @@
 	border-color: #979797;
 	color: #222;
 
-	&-muted {
+	// Background and color of the capsule widget need a bit
+	// more specificity to override ooui internals
+	&-muted.oo-ui-capsuleItemWidget.oo-ui-widget-enabled {
 		// Muted state
 		background-color: #eaecf0;
 		border-color: #c8ccd1;
+
 		.oo-ui-labelElement-label {
 			color: #72777d;
 		}
+		.oo-ui-buttonWidget {
+			opacity: @muted-opacity;
+		}
+	}
+
+	&-conflicted.oo-ui-capsuleItemWidget.oo-ui-widget-enabled {
+		background-color: #fee7e6; // Red90 AAA
+		border-color: #b32424; // Red30 AAA
 
+		.oo-ui-labelElement-label {
+			color: #b32424;
+		}
 		.oo-ui-buttonWidget {
 			opacity: @muted-opacity;
 		}
 	}
 
-	&-selected {
+	&-selected.oo-ui-capsuleItemWidget.oo-ui-widget-enabled {
 		background-color: #eaf3ff;
 		border-color: #36c;
 	}
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
index 800e7ea578..a7ad95423e 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
@@ -135,8 +135,11 @@
 				'mw-rcfilters-ui-capsuleItemWidget-muted',
 				!this.model.isSelected() ||
 				this.model.isIncluded() ||
-				this.model.isConflicted() ||
 				this.model.isFullyCovered()
+			)
+			.toggleClass(
+				'mw-rcfilters-ui-capsuleItemWidget-conflicted',
+				this.model.isConflicted()
 			);
 	};