mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/RevisionSlider
synced 2024-12-12 07:25:13 +00:00
Merge "Adjust arrow styles"
This commit is contained in:
commit
768df0fa7e
|
@ -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",
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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>
|
After Width: | Height: | Size: 229 B |
|
@ -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>
|
After Width: | Height: | Size: 232 B |
|
@ -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>
|
After Width: | Height: | Size: 229 B |
|
@ -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>
|
After Width: | Height: | Size: 235 B |
|
@ -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>
|
After Width: | Height: | Size: 238 B |
|
@ -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>
|
After Width: | Height: | Size: 235 B |
Loading…
Reference in a new issue