From 37ea49b3268d32a39280b8fe3a368e86ce681716 Mon Sep 17 00:00:00 2001
From: Andrew-WMDE <andrew.kostka@wikimedia.de>
Date: Fri, 16 Dec 2016 14:13:00 +0100
Subject: [PATCH] All connector-lines should be contained within the
 RevisionSlider

Bug: T151450
Change-Id: I317a2fc81a85d20cf07b1e45d5501cadaaa0b727
---
 modules/ext.RevisionSlider.PointerLine.js | 39 ++++++++++++++++++++++-
 modules/ext.RevisionSlider.css            | 16 ++++++----
 modules/ext.RevisionSlider.init.js        |  4 +++
 3 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/modules/ext.RevisionSlider.PointerLine.js b/modules/ext.RevisionSlider.PointerLine.js
index e466530a..92446d8f 100644
--- a/modules/ext.RevisionSlider.PointerLine.js
+++ b/modules/ext.RevisionSlider.PointerLine.js
@@ -99,7 +99,12 @@
 		drawLine: function () {
 			var $upperLineDiv = this.$html.find( '.mw-revslider-pointer-line-upper' ),
 				$lowerLineDiv = this.$html.find( '.mw-revslider-pointer-line-lower' ),
+				$newerUnderLineDiv = this.$html.find( '.mw-revslider-pointer-line-underline' )
+					.filter( '.mw-revslider-pointer-newer' ),
+				$olderUnderLineDiv = this.$html.find( '.mw-revslider-pointer-line-underline' )
+					.filter( '.mw-revslider-pointer-older' ),
 				$sourcePointer = this.pointer.getView().getElement(),
+				$table = $( '.diff-otitle' ),
 				$targetColumn;
 
 			if ( this.offsetNotAvailable() ) {
@@ -110,10 +115,14 @@
 			if ( this.pointer.getView().isUpperPointer() ) {
 				$lowerLineDiv.removeClass( 'mw-revslider-lower-color' ).addClass( 'mw-revslider-upper-color' );
 				$upperLineDiv.removeClass( 'mw-revslider-lower-color' ).addClass( 'mw-revslider-upper-color' );
+				$newerUnderLineDiv.removeClass( 'mw-revslider-lower-color' ).addClass( 'mw-revslider-upper-color' );
+				$olderUnderLineDiv.removeClass( 'mw-revslider-lower-color' ).addClass( 'mw-revslider-upper-color' );
 				$targetColumn = $( '.diff-ntitle' );
 			} else {
 				$lowerLineDiv.removeClass( 'mw-revslider-upper-color' ).addClass( 'mw-revslider-lower-color' );
 				$upperLineDiv.removeClass( 'mw-revslider-upper-color' ).addClass( 'mw-revslider-lower-color' );
+				$olderUnderLineDiv.removeClass( 'mw-revslider-upper-color' ).addClass( 'mw-revslider-lower-color' );
+				$newerUnderLineDiv.removeClass( 'mw-revslider-upper-color' ).addClass( 'mw-revslider-lower-color' );
 				$targetColumn = $( '.diff-otitle' );
 			}
 
@@ -124,9 +133,35 @@
 			if ( this.targetColumnIsRightFromPointer( $sourcePointer, $targetColumn ) ) {
 				$upperLineDiv.addClass( 'mw-revslider-left-line' );
 				$lowerLineDiv.addClass( 'mw-revslider-right-line' );
+
+				$( $newerUnderLineDiv ).css( {
+					width: $table.width() + 'px',
+					'margin-right': -$table.width() / 2 + 'px',
+					'margin-left': 0,
+					'float': 'right'
+				} );
+				$( $olderUnderLineDiv ).css( {
+					width: $table.width() + 'px',
+					'margin-right': -$table.width() / 2 + 'px',
+					'margin-left': 0,
+					'float': 'right'
+				} );
 			} else {
 				$upperLineDiv.addClass( 'mw-revslider-right-line' );
 				$lowerLineDiv.addClass( 'mw-revslider-left-line' );
+
+				$( $newerUnderLineDiv ).css( {
+					width: $table.width() + 'px',
+					'margin-left': -$table.width() / 2 + 'px',
+					'margin-right': 0,
+					'float': 'left'
+				} );
+				$( $olderUnderLineDiv ).css( {
+					width: $table.width() + 'px',
+					'margin-left': -$table.width() / 2 + 'px',
+					'margin-right': 0,
+					'float': 'left'
+				} );
 			}
 
 			return true;
@@ -140,7 +175,8 @@
 				.addClass( 'mw-revslider-pointer-line ' + this.name )
 				.append(
 					$( '<div>' ).addClass( 'mw-revslider-pointer-line-upper ' + this.name ),
-					$( '<div>' ).addClass( 'mw-revslider-pointer-line-lower ' + this.name )
+					$( '<div>' ).addClass( 'mw-revslider-pointer-line-lower ' + this.name ),
+					$( '<div>' ).addClass( 'mw-revslider-pointer-line-underline ' + this.name )
 				);
 		},
 
@@ -184,6 +220,7 @@
 		getElement: function () {
 			return this.$html;
 		}
+
 	} );
 
 	mw.libs.revisionSlider = mw.libs.revisionSlider || {};
diff --git a/modules/ext.RevisionSlider.css b/modules/ext.RevisionSlider.css
index 281bef74..70c5ca13 100644
--- a/modules/ext.RevisionSlider.css
+++ b/modules/ext.RevisionSlider.css
@@ -12,6 +12,14 @@
 	z-index: 8;
 }
 
+.mw-revslider-container-expanded {
+	margin-bottom: 15px;
+}
+
+.mw-revslider-container-collapsed {
+	margin-bottom: 0;
+}
+
 .mw-revslider-toggle-button {
 	width: 100%;
 	text-align: center;
@@ -357,10 +365,6 @@ of the frameless one (to fit the size of the toggle button */
 	height: 27px;
 }
 
-.mw-revslider-older-diff-column {
-	border-top: 2px solid #fc3;
-}
-
-.mw-revslider-newer-diff-column {
-	border-top: 2px solid #1e6db8;
+.mw-revslider-pointer-line-underline {
+	border-bottom: 2px solid;
 }
diff --git a/modules/ext.RevisionSlider.init.js b/modules/ext.RevisionSlider.init.js
index ff60c3ab..ea46b27b 100644
--- a/modules/ext.RevisionSlider.init.js
+++ b/modules/ext.RevisionSlider.init.js
@@ -61,12 +61,16 @@
 
 		expand = function () {
 			toggleButton.setIcon( 'collapse' ).setTitle( mw.message( 'revisionslider-toggle-title-collapse' ).text() );
+			$( '.mw-revslider-container' ).removeClass( 'mw-revslider-container-collapsed' )
+				.addClass( 'mw-revslider-container-expanded' );
 			$( '.mw-revslider-slider-wrapper' ).show();
 			expanded = true;
 		},
 
 		collapse = function () {
 			toggleButton.setIcon( 'expand' ).setTitle( mw.message( 'revisionslider-toggle-title-expand' ).text() );
+			$( '.mw-revslider-container' ).removeClass( 'mw-revslider-container-expanded' )
+				.addClass( 'mw-revslider-container-collapsed' );
 			$( '.mw-revslider-slider-wrapper' ).hide();
 		};