wikimedia/mediawiki-extensions-RevisionSlider
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/RevisionSlider synced 2024-12-04 19:58:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Adjust arrow styles"

Browse source
This commit is contained in:
jenkins-bot 2016-05-30 10:51:27 +00:00 committed by Gerrit Code Review
parent 98389b0c0a f642fb44dc
commit 768df0fa7e
9 changed files with 115 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
extension.json
View file

@ -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",

65
modules/ext.RevisionSlider.SliderView.js
View file

@ -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>' )
.tipsy()
$( '<a class="arrow arrow-left" data-dir="-1"></a>' )
.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' );
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(

22
modules/ext.RevisionSlider.css
View file

@ -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 {

4
resources/ext.RevisionSlider.arrows/arrow-left-disabled.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 229 B

4
resources/ext.RevisionSlider.arrows/arrow-left-enabled.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 232 B

4
resources/ext.RevisionSlider.arrows/arrow-left-hovered.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 229 B

4
resources/ext.RevisionSlider.arrows/arrow-right-disabled.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 235 B

4
resources/ext.RevisionSlider.arrows/arrow-right-enabled.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 238 B

4
resources/ext.RevisionSlider.arrows/arrow-right-hovered.svg Normal file
View file

@ -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>
Side by side

After

Width:  |  Height:  |  Size: 235 B