From 38ff514d21b85a80f4a078e3fa0f1a9543dbc3df Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Thu, 13 Jul 2017 20:45:36 -0500
Subject: [PATCH] RCFilters: Emphasize UI when saved query is loaded

Bug: T169063
Change-Id: Ia300ca7bb4afb7d8e247e57e53ecff826ddf0d7e
---
 ...filters.ui.FilterTagMultiselectWidget.less | 13 +++++++++-
 ...rcfilters.ui.FilterTagMultiselectWidget.js | 24 +++++++++++++++++++
 .../ui/mw.rcfilters.ui.FilterWrapperWidget.js |  1 -
 .../mw.rcfilters.ui.SavedLinksListWidget.js   |  2 ++
 4 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
index 420bb4433e..7ee601fb9a 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterTagMultiselectWidget.less
@@ -1,3 +1,5 @@
+@import 'mediawiki.mixins';
+
 .mw-rcfilters-ui-filterTagMultiselectWidget {
 	max-width: none;
 
@@ -17,6 +19,14 @@
 		margin-top: 1.6em;
 	}
 
+	.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-animate.oo-ui-tagMultiselectWidget-handle {
+		.transition( background-color 500ms ease-out );
+	}
+
+	.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled &-emphasize.oo-ui-tagMultiselectWidget-handle {
+		background-color: #eaf3ff; // Accent90
+	}
+
 	&-wrapper {
 		.mw-rcfilters-ui-table {
 			margin-top: 0.3em;
@@ -29,7 +39,8 @@
 			}
 
 			&-savedQueryTitle {
-				color: #72777d;
+				color: #222; // Base10
+				font-weight: bold;
 				margin-left: 1em;
 			}
 		}
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
index dcada85d7d..7789b556c5 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterTagMultiselectWidget.js
@@ -378,6 +378,10 @@
 				!this.isEmpty() &&
 				!this.matchingQuery
 			);
+
+			if ( this.matchingQuery ) {
+				this.emphasize();
+			}
 		}
 	};
 
@@ -588,6 +592,26 @@
 		}
 	};
 
+	mw.rcfilters.ui.FilterTagMultiselectWidget.prototype.emphasize = function () {
+		if (
+			!this.$handle.hasClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' )
+		) {
+			this.$handle
+				.addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' )
+				.addClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
+
+			setTimeout( function () {
+				this.$handle
+					.removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-emphasize' );
+
+				setTimeout( function () {
+					this.$handle
+						.removeClass( 'mw-rcfilters-ui-filterTagMultiselectWidget-animate' );
+				}.bind( this ), 1000 );
+			}.bind( this ), 500 );
+
+		}
+	};
 	/**
 	 * Scroll the element to top within its container
 	 *
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
index a748063461..e36067dd70 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@ -52,7 +52,6 @@
 			this.$element.append(
 				this.savedLinksListWidget.$element
 			);
-
 		}
 
 		$bottom = $( '<div>' )
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js
index 3b5e7d9eae..27a21d693c 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.SavedLinksListWidget.js
@@ -86,6 +86,8 @@
 	/* Initialization */
 	OO.inheritClass( mw.rcfilters.ui.SavedLinksListWidget, OO.ui.Widget );
 
+	/* Methods */
+
 	/**
 	 * Respond to menu item click event
 	 *
-- 
2.20.1