From f642fb44dc25afb9871872295e7dd99e3e9f8f20 Mon Sep 17 00:00:00 2001 From: Leszek Manicki Date: Fri, 27 May 2016 16:14:16 +0200 Subject: [PATCH] Adjust arrow styles This introduces styles for "not available" arrow, and styles for hovered arrow and "active" (under left mouse button click arrow). Bug: T135970 Change-Id: If5f7df475eef36dcb6d038297ad97717b8c96f77 --- extension.json | 23 ++++++- modules/ext.RevisionSlider.SliderView.js | 65 ++++++++++++++++--- modules/ext.RevisionSlider.css | 22 ++++--- .../arrow-left-disabled.svg | 4 ++ .../arrow-left-enabled.svg | 4 ++ .../arrow-left-hovered.svg | 4 ++ .../arrow-right-disabled.svg | 4 ++ .../arrow-right-enabled.svg | 4 ++ .../arrow-right-hovered.svg | 4 ++ 9 files changed, 115 insertions(+), 19 deletions(-) create mode 100644 resources/ext.RevisionSlider.arrows/arrow-left-disabled.svg create mode 100644 resources/ext.RevisionSlider.arrows/arrow-left-enabled.svg create mode 100644 resources/ext.RevisionSlider.arrows/arrow-left-hovered.svg create mode 100644 resources/ext.RevisionSlider.arrows/arrow-right-disabled.svg create mode 100644 resources/ext.RevisionSlider.arrows/arrow-right-enabled.svg create mode 100644 resources/ext.RevisionSlider.arrows/arrow-right-hovered.svg diff --git a/extension.json b/extension.json index e1e92efb..61d1867a 100755 --- a/extension.json +++ b/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", diff --git a/modules/ext.RevisionSlider.SliderView.js b/modules/ext.RevisionSlider.SliderView.js index 76a4f533..2e2fcdc2 100644 --- a/modules/ext.RevisionSlider.SliderView.js +++ b/modules/ext.RevisionSlider.SliderView.js @@ -47,8 +47,15 @@ width: ( containerWidth + this.containerMargin ) + 'px' } ) .append( - $( '' ) - .tipsy() + $( '' ) + .tipsy( { + title: function () { + if ( $( this ).hasClass( 'arrow-disabled' ) ) { + return ''; + } + return mw.message( 'revisionslider-arrow-tooltip-older' ).text(); + } + } ) ) .append( $( '
' ) .css( { @@ -56,10 +63,16 @@ } ) .append( $revisions ) ) .append( - $( '' ) + $( '' ) .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' ); - self.slide( $( this ).data( 'dir' ) ); - } ); + var $arrow = $( this ); + 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( diff --git a/modules/ext.RevisionSlider.css b/modules/ext.RevisionSlider.css index 0c0509ec..a5c2a0cf 100755 --- a/modules/ext.RevisionSlider.css +++ b/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 { - margin-right: 30px; - -} -.right-arrow { - margin-left: 30px; +.arrow-active { + border: #ccc solid 2px; } .revision-slider { diff --git a/resources/ext.RevisionSlider.arrows/arrow-left-disabled.svg b/resources/ext.RevisionSlider.arrows/arrow-left-disabled.svg new file mode 100644 index 00000000..4df619dc --- /dev/null +++ b/resources/ext.RevisionSlider.arrows/arrow-left-disabled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/resources/ext.RevisionSlider.arrows/arrow-left-enabled.svg b/resources/ext.RevisionSlider.arrows/arrow-left-enabled.svg new file mode 100644 index 00000000..74b51157 --- /dev/null +++ b/resources/ext.RevisionSlider.arrows/arrow-left-enabled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/resources/ext.RevisionSlider.arrows/arrow-left-hovered.svg b/resources/ext.RevisionSlider.arrows/arrow-left-hovered.svg new file mode 100644 index 00000000..998ea9c0 --- /dev/null +++ b/resources/ext.RevisionSlider.arrows/arrow-left-hovered.svg @@ -0,0 +1,4 @@ + + + + diff --git a/resources/ext.RevisionSlider.arrows/arrow-right-disabled.svg b/resources/ext.RevisionSlider.arrows/arrow-right-disabled.svg new file mode 100644 index 00000000..e13da274 --- /dev/null +++ b/resources/ext.RevisionSlider.arrows/arrow-right-disabled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/resources/ext.RevisionSlider.arrows/arrow-right-enabled.svg b/resources/ext.RevisionSlider.arrows/arrow-right-enabled.svg new file mode 100644 index 00000000..d2c2b72a --- /dev/null +++ b/resources/ext.RevisionSlider.arrows/arrow-right-enabled.svg @@ -0,0 +1,4 @@ + + + + diff --git a/resources/ext.RevisionSlider.arrows/arrow-right-hovered.svg b/resources/ext.RevisionSlider.arrows/arrow-right-hovered.svg new file mode 100644 index 00000000..389cfb70 --- /dev/null +++ b/resources/ext.RevisionSlider.arrows/arrow-right-hovered.svg @@ -0,0 +1,4 @@ + + + +