From 8f56e150cccd0e724a6b5c7492046396b28fcc78 Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Fri, 25 Aug 2017 18:02:48 -0700
Subject: [PATCH] RCFilters: Adjust highlight for seen/unseen states in
 Watchlist

Bug: T171235
Change-Id: I33d059d2be83e4730e6dc82f689f49a514286874
---
 includes/specials/SpecialWatchlist.php        |  2 +
 resources/Resources.php                       |  6 ++
 .../styles/mw.rcfilters.mixins.less           | 12 +++-
 ...perWidget.highlightCircles.seenunseen.less | 66 +++++++++++++++++++
 ...rcfilters.ui.ChangesListWrapperWidget.less |  4 +-
 .../styles/mw.rcfilters.variables.less        |  2 +
 ...w.rcfilters.ui.ChangesListWrapperWidget.js |  2 +
 7 files changed, 90 insertions(+), 4 deletions(-)
 create mode 100644 resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less

diff --git a/includes/specials/SpecialWatchlist.php b/includes/specials/SpecialWatchlist.php
index cecc182f72..862863ae35 100644
--- a/includes/specials/SpecialWatchlist.php
+++ b/includes/specials/SpecialWatchlist.php
@@ -97,6 +97,8 @@ class SpecialWatchlist extends ChangesListSpecialPage {
 		parent::execute( $subpage );
 
 		if ( $this->isStructuredFilterUiEnabled() ) {
+			$output->addModuleStyles( [ 'mediawiki.rcfilters.highlightCircles.seenunseen.styles' ] );
+
 			$output->addJsConfigVars( 'wgStructuredChangeFiltersLiveUpdateSupported', false );
 			$output->addJsConfigVars(
 				'wgStructuredChangeFiltersSavedQueriesPreferenceName',
diff --git a/resources/Resources.php b/resources/Resources.php
index 4a7f3e494f..459ad83e87 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1748,6 +1748,12 @@ return [
 			'resources/src/mediawiki.rcfilters/styles/mw.rcfilters.less',
 		],
 	],
+	'mediawiki.rcfilters.highlightCircles.seenunseen.styles' => [
+		'styles' => [
+			'resources/src/mediawiki.rcfilters/' .
+			'styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less',
+		],
+	],
 	'mediawiki.rcfilters.filters.dm' => [
 		'scripts' => [
 			'resources/src/mediawiki.rcfilters/mw.rcfilters.js',
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
index 5a885eccf5..27acd75141 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.mixins.less
@@ -8,8 +8,7 @@
 }
 
 // This is a general mixin for a color circle
-.mw-rcfilters-mixin-circle( @color: #fff, @diameter: 2em, @padding: 0.5em, @border: false ) {
-	background-color: @color;
+.mw-rcfilters-mixin-circle( @color: #fff, @diameter: 2em, @padding: 0.5em, @border: false, @borderColor: #54595d, @emptyBackground: false ) {
 	.box-sizing( border-box );
 	min-width: @diameter;
 	width: @diameter;
@@ -18,8 +17,15 @@
 	margin: @padding;
 	border-radius: 50%;
 
+	& when ( @emptyBackground = false ) {
+		background-color: @color;
+	}
+	& when ( @emptyBackground = true ) {
+		background-color: @highlight-none;
+	}
+
 	& when ( @border = true ) {
-		border: 1px solid #54595d;
+		border: 1px solid @borderColor;
 	}
 }
 
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less
new file mode 100644
index 0000000000..f4ca717273
--- /dev/null
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.highlightCircles.seenunseen.less
@@ -0,0 +1,66 @@
+@import 'mw.rcfilters.mixins';
+
+.mw-rcfilters-ui-changesListWrapperWidget {
+	ul {
+		list-style: none;
+
+		li {
+			list-style: none;
+		}
+	}
+
+	// Make more specific for the overrides
+	div&-highlights {
+		display: inline-block;
+
+		&-color {
+			&-none {
+				display: inline-block;
+				li.mw-changeslist-watchedseen & {
+					.mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
+						.mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-grey, true );
+					}
+
+					.mw-rcfilters-ui-changesListWrapperWidget:not(.mw-rcfilters-ui-changesListWrapperWidget-highlighted) & {
+						.mw-rcfilters-mixin-circle( @highlight-none, @result-circle-diameter, 0, true, @highlight-bluedot, true );
+					}
+				}
+
+				li.mw-changeslist-watchedunseen & {
+					.mw-rcfilters-ui-changesListWrapperWidget.mw-rcfilters-ui-changesListWrapperWidget-highlighted & {
+						.mw-rcfilters-mixin-circle( @highlight-grey, @result-circle-diameter, 0, true, @highlight-grey );
+					}
+
+					.mw-rcfilters-ui-changesListWrapperWidget:not(.mw-rcfilters-ui-changesListWrapperWidget-highlighted) & {
+						.mw-rcfilters-mixin-circle( @highlight-bluedot, @result-circle-diameter, 0, true, @highlight-bluedot );
+					}
+				}
+
+			}
+
+			// Watchlist unseen highlighted fixes
+			// Seen (empty circle)
+			// There's no need to correct 'unseen' because that would be
+			// a filled colorful circle, which is the regular rendering
+			.mw-changeslist-watchedseen &-c1 {
+				.mw-rcfilters-mixin-circle( @highlight-c1, @result-circle-diameter, 0, true, @highlight-c1, true );
+			}
+
+			.mw-changeslist-watchedseen &-c2 {
+				.mw-rcfilters-mixin-circle( @highlight-c2, @result-circle-diameter, 0, true, @highlight-c2, true );
+			}
+
+			.mw-changeslist-watchedseen &-c3 {
+				.mw-rcfilters-mixin-circle( @highlight-c3, @result-circle-diameter, 0, true, @highlight-c3, true );
+			}
+
+			.mw-changeslist-watchedseen &-c4 {
+				.mw-rcfilters-mixin-circle( @highlight-c4, @result-circle-diameter, 0, true, @highlight-c4, true );
+			}
+
+			.mw-changeslist-watchedseen &-c5 {
+				.mw-rcfilters-mixin-circle( @highlight-c5, @result-circle-diameter, 0, true, @highlight-c5, true );
+			}
+		}
+	}
+}
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
index dc7afab1b5..3fe9b4ca2f 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.ChangesListWrapperWidget.less
@@ -84,7 +84,9 @@
 			display: inline-block;
 		}
 
-		div {
+		// This needs to be very specific, since these are
+		// position rules that should apply to all overrides
+		.mw-rcfilters-ui-changesListWrapperWidget .mw-rcfilters-ui-changesListWrapperWidget-highlights > div&-circle {
 			.box-sizing( border-box );
 			margin-right: @result-circle-margin;
 			vertical-align: middle;
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less
index 3060f255cd..fc8c9efe11 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.variables.less
@@ -5,6 +5,8 @@
 @highlight-c3: #fc3;
 @highlight-c4: #ff6d22;
 @highlight-c5: #d33;
+@highlight-bluedot: #1d4aad; // Simulates the 'known' browser <li> blue dot
+@highlight-grey: #54595d; // The color of full dots on Watchlist when highlight is enabled
 
 // Muted state
 @muted-opacity: 0.5;
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
index a97ffe93d6..ec12783b0f 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.ChangesListWrapperWidget.js
@@ -251,6 +251,7 @@
 				.addClass( highlightClass )
 				.append(
 					$( '<div>' )
+						.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-circle' )
 						.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-color-none' )
 						.prop( 'data-color', 'none' )
 				);
@@ -264,6 +265,7 @@
 			$highlights.append(
 				$( '<div>' )
 					.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-color-' + color )
+					.addClass( 'mw-rcfilters-ui-changesListWrapperWidget-highlights-circle' )
 					.prop( 'data-color', color )
 			);
 		} );
-- 
2.20.1