Merge "Adjust arrow styles"

extension.json

@@ -28,11 +28,12 @@
 			],
 			"dependencies": [
 				"mediawiki.jqueryMsg",
-				"oojs-ui.styles.icons-movement",
 				"ext.RevisionSlider.Slider",
 				"ext.RevisionSlider.Revision",
 				"ext.RevisionSlider.RevisionList",
 				"ext.RevisionSlider.fetchRevisions",
+				"ext.RevisionSlider.arrows.left",
+				"ext.RevisionSlider.arrows.right",
 				"ext.RevisionSlider.pointers.lower",
 				"ext.RevisionSlider.pointers.upper"
 			],
@@ -114,6 +115,26 @@
 				"revisionslider-label-comment"
 			]
 		},
+		"ext.RevisionSlider.arrows.left": {
+			"position": "top",
+			"class": "ResourceLoaderImageModule",
+			"selector": ".arrow-left.arrow-{name}",
+			"images": {
+				"enabled": "resources/ext.RevisionSlider.arrows/arrow-left-enabled.svg",
+				"hovered": "resources/ext.RevisionSlider.arrows/arrow-left-hovered.svg",
+				"disabled": "resources/ext.RevisionSlider.arrows/arrow-left-disabled.svg"
+			}
+		},
+		"ext.RevisionSlider.arrows.right": {
+			"position": "top",
+			"class": "ResourceLoaderImageModule",
+			"selector": ".arrow-right.arrow-{name}",
+			"images": {
+				"enabled": "resources/ext.RevisionSlider.arrows/arrow-right-enabled.svg",
+				"hovered": "resources/ext.RevisionSlider.arrows/arrow-right-hovered.svg",
+				"disabled": "resources/ext.RevisionSlider.arrows/arrow-right-disabled.svg"
+			}
+		},
 		"ext.RevisionSlider.pointers.lower": {
 			"position": "top",
 			"class": "ResourceLoaderImageModule",

modules/ext.RevisionSlider.SliderView.js

@@ -47,8 +47,15 @@
 					width: ( containerWidth + this.containerMargin ) + 'px'
 				} )
 				.append(
-					$( '<a class="arrow left-arrow oo-ui-icon-caretLast" data-dir="-1" title="' + mw.message( 'revisionslider-arrow-tooltip-older' ).text() + '"></a>' )
+					$( '<a class="arrow arrow-left" data-dir="-1"></a>' )
-					.tipsy()
+					.tipsy( {
+						title: function () {
+							if ( $( this ).hasClass( 'arrow-disabled' ) ) {
+								return '';
+							}
+							return mw.message( 'revisionslider-arrow-tooltip-older' ).text();
+						}
+					} )
 				)
 				.append( $( '<div class="revisions-container" />' )
 					.css( {
@@ -56,10 +63,16 @@
 					} )
 					.append( $revisions ) )
 				.append(
-					$( '<a class="arrow right-arrow oo-ui-icon-caretNext" data-dir="1" title="' + mw.message( 'revisionslider-arrow-tooltip-newer' ).text() + '"></a>' )
+					$( '<a class="arrow arrow-right" data-dir="1"></a>' )
 					.tipsy( {
 						gravity: function () {
 							return Math.abs( window.innerWidth - this.getBoundingClientRect().right ) > 90 ? 'n' : 'ne';
+						},
+						title: function () {
+							if ( $( this ).hasClass( 'arrow-disabled' ) ) {
+								return '';
+							}
+							return mw.message( 'revisionslider-arrow-tooltip-newer' ).text();
 						}
 					} )
 				)
@@ -72,9 +85,41 @@
 				);
 
 			$slider.find( '.arrow' ).click( function () {
-				mw.track( 'counter.MediaWiki.RevisionSlider.event.arrowClick' );
+					var $arrow = $( this );
-				self.slide( $( this ).data( 'dir' ) );
+					if ( $arrow.hasClass( 'arrow-disabled' ) ) {
-			} );
+						return;
+					}
+					mw.track( 'counter.MediaWiki.RevisionSlider.event.arrowClick' );
+					self.slide( $arrow.data( 'dir' ) );
+				} )
+				.mouseenter( function () {
+					var $arrow = $( this );
+					if ( $arrow.hasClass( 'arrow-disabled' ) ) {
+						return;
+					}
+					$arrow.removeClass( 'arrow-enabled' ).addClass( 'arrow-hovered' );
+				} )
+				.mouseleave( function () {
+					var $arrow = $( this );
+					if ( $arrow.hasClass( 'arrow-disabled' ) ) {
+						return;
+					}
+					$arrow.removeClass( 'arrow-hovered' ).addClass( 'arrow-enabled' );
+				} )
+				.mousedown( function ( event ) {
+					var $arrow = $( this );
+					if ( $arrow.hasClass( 'arrow-disabled' ) || event.which !== 1 ) {
+						return;
+					}
+					$arrow.addClass( 'arrow-active' );
+				} )
+				.mouseup( function ( event ) {
+					var $arrow = $( this );
+					if ( $arrow.hasClass( 'arrow-disabled' ) || event.which !== 1 ) {
+						return;
+					}
+					$arrow.removeClass( 'arrow-active' );
+				} );
 
 			$slider.find( '.pointer' ).draggable( {
 				axis: 'x',
@@ -232,14 +277,14 @@
 			self.pointerTwo.getView().getElement().draggable( 'disable' );
 
 			if ( this.slider.isAtStart() ) {
-				$( '.left-arrow' ).css( 'visibility', 'hidden' );
+				$( '.arrow-left' ).removeClass( 'arrow-enabled' ).removeClass( 'arrow-hovered' ).addClass( 'arrow-disabled' );
 			} else {
-				$( '.left-arrow' ).css( 'visibility', '' );
+				$( '.arrow-left' ).removeClass( 'arrow-disabled' ).addClass( 'arrow-enabled' );
 			}
 			if ( this.slider.isAtEnd() ) {
-				$( '.right-arrow' ).css( 'visibility', 'hidden' );
+				$( '.arrow-right' ).removeClass( 'arrow-enabled' ).removeClass( 'arrow-hovered' ).addClass( 'arrow-disabled' );
 			} else {
-				$( '.right-arrow' ).css( 'visibility', '' );
+				$( '.arrow-right' ).removeClass( 'arrow-disabled' ).addClass( 'arrow-enabled' );
 			}
 
 			this.$element.find( '.revisions-container' ).animate(

modules/ext.RevisionSlider.css

@@ -87,19 +87,25 @@
 .arrow {
     width: 20px;
     height: 140px;
-    border: #e4e4e4 solid 2px;
     background-position: center center;
     background-repeat: no-repeat;
 }
-.arrow:hover{
+.arrow-left {
+    margin-right: 30px;
+}
+.arrow-right {
+    margin-left: 30px;
+}
+.arrow-enabled, .arrow-disabled {
+    border: #ddd solid 2px;
+}
+.arrow-hovered {
+    border: #ddd solid 2px;
+    background-color: #e5e5e5;
     cursor: pointer;
 }
-.left-arrow {
+.arrow-active {
-    margin-right: 30px;
+    border: #ccc solid 2px;
-
-}
-.right-arrow {
-    margin-left: 30px;
 }
 
 .revision-slider {

resources/ext.RevisionSlider.arrows/arrow-left-disabled.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M7 13.1l8.9 8.9c.8-.8.8-2 0-2.8l-6.1-6.1 6-6.1c.8-.8.8-2 0-2.8L7 13.1z" fill="#ddd"/>
+</svg>

resources/ext.RevisionSlider.arrows/arrow-left-enabled.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M7 13.1l8.9 8.9c.8-.8.8-2 0-2.8l-6.1-6.1 6-6.1c.8-.8.8-2 0-2.8L7 13.1z" fill="#4c4c4c"/>
+</svg>

resources/ext.RevisionSlider.arrows/arrow-left-hovered.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M7 13.1l8.9 8.9c.8-.8.8-2 0-2.8l-6.1-6.1 6-6.1c.8-.8.8-2 0-2.8L7 13.1z" fill="#000"/>
+</svg>

resources/ext.RevisionSlider.arrows/arrow-right-disabled.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M16.5 13.1L7.6 22c-.8-.8-.8-2 0-2.8l6.1-6.1-6-6.1c-.8-.8-.8-2 0-2.8l8.8 8.9z" fill="#ddd"/>
+</svg>

resources/ext.RevisionSlider.arrows/arrow-right-enabled.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M16.5 13.1L7.6 22c-.8-.8-.8-2 0-2.8l6.1-6.1-6-6.1c-.8-.8-.8-2 0-2.8l8.8 8.9z" fill="#4c4c4c"/>
+</svg>

resources/ext.RevisionSlider.arrows/arrow-right-hovered.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <path d="M16.5 13.1L7.6 22c-.8-.8-.8-2 0-2.8l6.1-6.1-6-6.1c-.8-.8-.8-2 0-2.8l8.8 8.9z" fill="#000"/>
+</svg>