From c27612bf6198671aa9069ddfd66bb01c4198b1d4 Mon Sep 17 00:00:00 2001
From: Moriel Schottlender <moriel@gmail.com>
Date: Mon, 27 Feb 2017 16:26:46 -0800
Subject: [PATCH] RCFilters UI: Add 'select' state and styles to capsule items

When a user clicks a capsule item and it scrolls down to the filter
in the list, make sure the capsule is also showing it is selected.
Take that opportunity to apply the design per spec for the capsule
items.

Bug: T149391
Change-Id: Idac62dea0f7a699a6e80dd3dca3d30b8e28e63b8
---
 .../mw.rcfilters.ui.CapsuleItemWidget.less    | 33 ++++++++++++-------
 ...ers.ui.FilterCapsuleMultiselectWidget.less |  5 ---
 .../ui/mw.rcfilters.ui.CapsuleItemWidget.js   | 15 +++++++++
 ...lters.ui.FilterCapsuleMultiselectWidget.js | 33 +++++++++++++++++++
 .../ui/mw.rcfilters.ui.FilterWrapperWidget.js |  2 ++
 5 files changed, 72 insertions(+), 16 deletions(-)

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 2521899f49..5bc6dbbf1d 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.CapsuleItemWidget.less
@@ -1,6 +1,28 @@
 @import "mw.rcfilters.mixins";
 
 .mw-rcfilters-ui-capsuleItemWidget {
+	background-color: #fff;
+	border-color: #979797;
+	color: #222;
+
+	&-muted {
+		// Muted state
+		background-color: #eaecf0;
+		border-color: #c8ccd1;
+		.oo-ui-labelElement-label {
+			color: #72777d;
+		}
+
+		.oo-ui-buttonWidget {
+			opacity: @muted-opacity;
+		}
+	}
+
+	&-selected {
+		background-color: #eaf3ff;
+		border-color: #36c;
+	}
+
 	&-popup-content {
 		padding: 0.5em;
 		color: #54595d;
@@ -11,17 +33,6 @@
 		cursor: pointer;
 	}
 
-	&-muted {
-		// Muted state
-		// We want everything muted except the circle
-		background-color: rgba( 255, 255, 255, @muted-opacity );
-
-		.oo-ui-labelElement-label,
-		.oo-ui-buttonWidget {
-			opacity: @muted-opacity;
-		}
-	}
-
 	&-highlight {
 		display: none;
 		padding-right: 0.5em;
diff --git a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
index 8921f7acfc..a0ef293f12 100644
--- a/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
+++ b/resources/src/mediawiki.rcfilters/styles/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.less
@@ -25,9 +25,4 @@
 		text-align: right;
 		padding-left: 0.5em;
 	}
-
-	.oo-ui-capsuleItemWidget {
-		color: #222;
-		background-color: #fff;
-	}
 }
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 933a500cc0..800e7ea578 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.CapsuleItemWidget.js
@@ -175,6 +175,21 @@
 		this.popupTimeoutShow = null;
 	};
 
+	/**
+	 * Set selected state on this widget
+	 *
+	 * @param {boolean} [isSelected] Widget is selected
+	 */
+	mw.rcfilters.ui.CapsuleItemWidget.prototype.toggleSelected = function ( isSelected ) {
+		isSelected = isSelected !== undefined ? isSelected : !this.selected;
+
+		if ( this.selected !== isSelected ) {
+			this.selected = isSelected;
+
+			this.$element.toggleClass( 'mw-rcfilters-ui-capsuleItemWidget-selected', this.selected );
+		}
+	};
+
 	/**
 	 * Remove and destroy external elements of this widget
 	 */
diff --git a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
index 8e0b2592fc..a06b103bf5 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterCapsuleMultiselectWidget.js
@@ -31,6 +31,7 @@
 		this.model = model;
 		this.filterInput = filterInput;
 		this.isSelecting = false;
+		this.selected = null;
 
 		this.resetButton = new OO.ui.ButtonWidget( {
 			icon: 'trash',
@@ -184,6 +185,38 @@
 		this.emptyFilterMessage.toggle( currFiltersAreEmpty );
 	};
 
+	/**
+	 * Mark an item widget as selected
+	 *
+	 * @param {mw.rcfilters.ui.CapsuleItemWidget} item Capsule widget
+	 */
+	mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.select = function ( item ) {
+		if ( this.selected !== item ) {
+			// Unselect previous
+			if ( this.selected ) {
+				this.selected.toggleSelected( false );
+			}
+
+			// Select new one
+			this.selected = item;
+			if ( this.selected ) {
+				item.toggleSelected( true );
+			}
+		}
+	};
+
+	/**
+	 * Reset selection and remove selected states from all items
+	 */
+	mw.rcfilters.ui.FilterCapsuleMultiselectWidget.prototype.resetSelection = function () {
+		if ( this.selected !== null ) {
+			this.selected = null;
+			this.getItems().forEach( function ( capsuleWidget ) {
+				capsuleWidget.toggleSelected( false );
+			} );
+		}
+	};
+
 	/**
 	 * @inheritdoc
 	 */
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 bb213fd5ec..dc3cfe55e7 100644
--- a/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
+++ b/resources/src/mediawiki.rcfilters/ui/mw.rcfilters.ui.FilterWrapperWidget.js
@@ -82,6 +82,7 @@
 
 		// Highlight item
 		this.filterPopup.select( filterName );
+		this.capsule.select( item );
 
 		this.scrollToTop( filterWidget.$element );
 	};
@@ -94,6 +95,7 @@
 	mw.rcfilters.ui.FilterWrapperWidget.prototype.onCapsulePopupToggle = function ( isVisible ) {
 		if ( !isVisible ) {
 			this.filterPopup.resetSelection();
+			this.capsule.resetSelection();
 		} else {
 			this.scrollToTop( this.capsule.$element, 10 );
 		}
-- 
2.20.1