WMDE-leszek has uploaded a new change for review.
https://gerrit.wikimedia.org/r/291241
Change subject: Adjust arrow styles
......................................................................
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
---
M extension.json
M modules/ext.RevisionSlider.SliderView.js
M modules/ext.RevisionSlider.css
A resources/ext.RevisionSlider.arrows/arrow-left-disabled.svg
A resources/ext.RevisionSlider.arrows/arrow-left-enabled.svg
A resources/ext.RevisionSlider.arrows/arrow-left-hovered.svg
A resources/ext.RevisionSlider.arrows/arrow-right-disabled.svg
A resources/ext.RevisionSlider.arrows/arrow-right-enabled.svg
A resources/ext.RevisionSlider.arrows/arrow-right-hovered.svg
9 files changed, 113 insertions(+), 17 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/RevisionSlider
refs/changes/41/291241/1
diff --git a/extension.json b/extension.json
index e1e92ef..61d1867 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 76a4f53..4e22cd7 100644
--- a/modules/ext.RevisionSlider.SliderView.js
+++ b/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>' )
- .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,8 +85,40 @@
);
$slider.find( '.arrow' ).click( function () {
+ var $arrow = $( this );
+ if ( $arrow.hasClass( 'arrow-disabled' ) ) {
+ return;
+ }
mw.track(
'counter.MediaWiki.RevisionSlider.event.arrowClick' );
- self.slide( $( this ).data( 'dir' ) );
+ self.slide( $arrow.data( 'dir' ) );
+ } );
+ $slider.find( '.arrow' ).mouseenter( function () {
+ var $arrow = $( this );
+ if ( $arrow.hasClass( 'arrow-disabled' ) ) {
+ return;
+ }
+ $arrow.removeClass( 'arrow-enabled' ).addClass(
'arrow-hovered' );
+ } );
+ $slider.find( '.arrow' ).mouseleave( function () {
+ var $arrow = $( this );
+ if ( $arrow.hasClass( 'arrow-disabled' ) ) {
+ return;
+ }
+ $arrow.removeClass( 'arrow-hovered' ).addClass(
'arrow-enabled' );
+ } );
+ $slider.find( '.arrow' ).mousedown( function ( event ) {
+ var $arrow = $( this );
+ if ( $arrow.hasClass( 'arrow-disabled' ) ||
event.which !== 1 ) {
+ return;
+ }
+ $arrow.addClass( 'arrow-active' );
+ } );
+ $slider.find( '.arrow' ).mouseup( function ( event ) {
+ var $arrow = $( this );
+ if ( $arrow.hasClass( 'arrow-disabled' ) ||
event.which !== 1 ) {
+ return;
+ }
+ $arrow.removeClass( 'arrow-active' );
} );
$slider.find( '.pointer' ).draggable( {
@@ -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 0c0509e..a5c2a0c 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 0000000..4df619d
--- /dev/null
+++ b/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>
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 0000000..74b5115
--- /dev/null
+++ b/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>
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 0000000..998ea9c
--- /dev/null
+++ b/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>
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 0000000..e13da27
--- /dev/null
+++ b/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>
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 0000000..d2c2b72
--- /dev/null
+++ b/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>
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 0000000..389cfb7
--- /dev/null
+++ b/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>
--
To view, visit https://gerrit.wikimedia.org/r/291241
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: If5f7df475eef36dcb6d038297ad97717b8c96f77
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/RevisionSlider
Gerrit-Branch: master
Gerrit-Owner: WMDE-leszek <leszek.mani...@wikimedia.de>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
