From f2f29832e5bad585e4d75bd70ef786f6777884d0 Mon Sep 17 00:00:00 2001
From: Leszek Manicki <leszek.manicki@wikimedia.de>
Date: Thu, 19 May 2016 18:39:58 +0200
Subject: [PATCH] Mark selected and intermediate revisions with colours

Change-Id: If8e2268540a9e5f8110256e779cbee92c6a413ca
---
 modules/ext.RevisionSlider.DiffPage.js   |  3 ++
 modules/ext.RevisionSlider.SliderView.js | 19 +++++++++++
 modules/ext.RevisionSlider.css           | 40 ++++++++++++++++++++----
 3 files changed, 56 insertions(+), 6 deletions(-)

diff --git a/modules/ext.RevisionSlider.DiffPage.js b/modules/ext.RevisionSlider.DiffPage.js
index 8f9c0fff..63b6dab2 100644
--- a/modules/ext.RevisionSlider.DiffPage.js
+++ b/modules/ext.RevisionSlider.DiffPage.js
@@ -64,6 +64,9 @@
 				sliderView.slider.setFirstVisibleRevisionIndex( event.state.sliderPos );
 				sliderView.slide( 0 );
 				sliderView.resetPointerStylesBasedOnPosition();
+				sliderView.resetRevisionStylesBasedOnPointerPosition(
+					sliderView.$element.find( 'div.revisions' )
+				);
 				self.refresh( event.state.revid1, event.state.revid2 );
 			} );
 		}
diff --git a/modules/ext.RevisionSlider.SliderView.js b/modules/ext.RevisionSlider.SliderView.js
index 14717f11..d1c43d49 100644
--- a/modules/ext.RevisionSlider.SliderView.js
+++ b/modules/ext.RevisionSlider.SliderView.js
@@ -77,6 +77,7 @@
 					mw.track( 'counter.MediaWiki.RevisionSlider.event.pointerMove' );
 					pointer.setPosition( self.slider.getFirstVisibleRevisionIndex() + relativeIndex );
 					self.resetPointerStylesBasedOnPosition();
+					self.resetRevisionStylesBasedOnPointerPosition( $revisions );
 
 					revId1 = $revisions
 						.find( 'div.revision[data-pos=\'' + self.pointerOne.getPosition() + '\']' )
@@ -96,6 +97,7 @@
 			this.slider.setRevisionsPerWindow( $slider.find( '.revisions-container' ).width() / this.revisionWidth );
 
 			this.initializePointers( $revisions );
+			this.resetRevisionStylesBasedOnPointerPosition( $revisions );
 
 			this.$element = $slider;
 			$container.html( $slider );
@@ -144,6 +146,23 @@
 			}
 		},
 
+		resetRevisionStylesBasedOnPointerPosition: function ( $revisions ) {
+			var pointerOnePosition = this.pointerOne.getPosition(),
+				pointerTwoPosition = this.pointerTwo.getPosition(),
+				olderRevPosition = Math.min( pointerOnePosition, pointerTwoPosition ),
+				newerRevPosition = Math.max( pointerOnePosition, pointerTwoPosition ),
+				positionIndex = olderRevPosition + 1;
+			$revisions.find( 'div.revision' ).each( function () {
+				$( this ).removeClass( 'revision-intermediate' ).removeClass( 'revision-old' ).removeClass( 'revision-new' );
+			} );
+			$revisions.find( 'div.revision[data-pos=\'' + olderRevPosition + '\']' ).addClass( 'revision-old' );
+			$revisions.find( 'div.revision[data-pos=\'' + newerRevPosition + '\']' ).addClass( 'revision-new' );
+			while ( positionIndex < newerRevPosition ) {
+				$revisions.find( 'div.revision[data-pos=\'' + positionIndex + '\']' ).addClass( 'revision-intermediate' );
+				positionIndex++;
+			}
+		},
+
 		calculateRevisionsPerWindow: function () {
 			return Math.floor( ( $( '#mw-content-text' ).width() - this.containerMargin ) / this.revisionWidth );
 		},
diff --git a/modules/ext.RevisionSlider.css b/modules/ext.RevisionSlider.css
index 2ed42084..d2655e90 100755
--- a/modules/ext.RevisionSlider.css
+++ b/modules/ext.RevisionSlider.css
@@ -1,21 +1,49 @@
 .revision {
     position: absolute;
     margin-top: 70px;
-    background-color: #bcbcbc;
+    background-color: #e3e3e3;
+    border-color: #e3e3e3;
 }
 .revision:hover {
-    background-color: #a6a6a6;
-    border-color: #a6a6a6;
+    background-color: #cccccc;
+    border-color: #cccccc;
     transition: all ease 0.2s;
     -webkit-transition: all ease 0.2s;
     -moz-transition: all ease 0.2s;
     -o-transition: all ease 0.2s;
 }
 .revision-up {
-    border-bottom: 2px solid #bcbcbc;
+    border-bottom-width: 2px;
+    border-bottom-style: solid;
 }
 .revision-down {
-    border-top: 2px solid #bcbcbc;
+    border-top-width: 2px;
+    border-top-style: solid;
+}
+
+.revision-old {
+    background-color: #fee6a8;
+    border-color: #e8bd4f;
+}
+.revision-old:hover {
+    background-color: #fdc44b;
+    border-color: #dda000;
+}
+.revision-new {
+    background-color: #c3e2ff;
+    border-color: #1e6db8;
+}
+.revision-new:hover {
+    background-color: #45a6ff;
+    border-color: #065cad;
+}
+.revision-intermediate {
+    background-color: #bcbcbc;
+    border-color: #989898;
+}
+.revision-intermediate:hover {
+    background-color: #a6a6a6;
+    border-color: #828282;
 }
 
 .revision-wrapper {
@@ -24,7 +52,7 @@
     height: 140px;
 }
 .revision-wrapper:hover {
-    background-color: #e3e3e3;
+    background-color: #f2f2f2;
     transition: all ease 0.2s;
     -webkit-transition: all ease 0.2s;
     -moz-transition: all ease 0.2s;