WMDE-leszek has uploaded a new change for review.
https://gerrit.wikimedia.org/r/302911
Change subject: Use OOjs UI help icon widget instead of button with message
......................................................................
Use OOjs UI help icon widget instead of button with message
This also adjusts position of the help icon so it better fits
the available space.
Bug: T139150
Change-Id: Iec7ec31a83a1a847cd68a994ecac12acf960d699
---
M extension.json
M i18n/en.json
M i18n/qqq.json
M modules/ext.RevisionSlider.SliderView.js
M modules/ext.RevisionSlider.css
M modules/ext.RevisionSlider.init.js
6 files changed, 23 insertions(+), 30 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/RevisionSlider
refs/changes/11/302911/1
diff --git a/extension.json b/extension.json
index 139df76..ecee199 100644
--- a/extension.json
+++ b/extension.json
@@ -93,7 +93,9 @@
],
"dependencies": [
"jquery.ui.draggable",
+ "oojs-ui",
"ext.RevisionSlider.DiffPage",
+ "ext.RevisionSlider.HelpDialog",
"ext.RevisionSlider.Pointer"
],
"messages": [
diff --git a/i18n/en.json b/i18n/en.json
index f43cf67..4a3e762 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -20,7 +20,6 @@
"revisionslider-loading-failed": "The RevisionSlider failed to load.",
"revisionslider-arrow-tooltip-newer": "See newer revisions",
"revisionslider-arrow-tooltip-older": "See older revisions",
- "revisionslider-show-help": "?",
"revisionslider-show-help-tooltip": "Show help text",
"revisionslider-help-dialog-slide1": "The RevisionSlider helps you to
navigate and compare revisions on the diff page. It is based on a
[[m:WMDE_Technical_Wishes/RevisionSlider|community wish]] from the
German-speaking community technical wishlist.",
"revisionslider-help-dialog-slide2": "Each bar represents a page revision.
Bars on the top show growth in size of the page, bars on the bottom show a
reduction. In the image, revision 1 represents added content, while revision 2
represents removal of content.",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index c96d1c7..6458cfa 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -22,7 +22,6 @@
"revisionslider-loading-failed": "Message shown if the RevisionSlider
fails to initially load.",
"revisionslider-arrow-tooltip-newer": "Text shown after hovering the
button scrolling to newer revisions.",
"revisionslider-arrow-tooltip-older": "Text shown after hovering the
button scrolling to older revisions.",
- "revisionslider-show-help": "A symbol shown in the \"Show help\"
button.",
"revisionslider-show-help-tooltip": "Text shown in a tooltip for the
\"Show help\" button.",
"revisionslider-help-dialog-slide1": "Text shown on the first slide of
the help dialog.",
"revisionslider-help-dialog-slide2": "Text shown on the second slide of
the help dialog.",
diff --git a/modules/ext.RevisionSlider.SliderView.js
b/modules/ext.RevisionSlider.SliderView.js
index 746a674..bd54a71 100644
--- a/modules/ext.RevisionSlider.SliderView.js
+++ b/modules/ext.RevisionSlider.SliderView.js
@@ -13,7 +13,7 @@
$.extend( SliderView.prototype, {
revisionWidth: 16,
- containerMargin: 120,
+ containerMargin: 140,
/**
* @type {jQuery}
@@ -70,6 +70,7 @@
$slider = $( '<div>' )
.addClass(
'mw-revslider-revision-slider' )
.css( { direction: $container.css(
'direction' ) } ),
+ helpIcon,
self = this;
if ( $slider.css( 'direction' ) === 'rtl' ) {
@@ -78,6 +79,22 @@
this.pointerOlder = new mw.libs.revisionSlider.Pointer(
'mw-revslider-pointer-older' );
this.pointerNewer = new mw.libs.revisionSlider.Pointer(
'mw-revslider-pointer-newer' );
+
+ helpIcon = new OO.ui.IconWidget( {
+ icon: 'help',
+ classes: [ 'mw-revslider-show-help' ]
+ } );
+ helpIcon.$element
+ .click( function () {
+
mw.libs.revisionSlider.HelpDialog.show();
+ } )
+ .tipsy( {
+ gravity: $( 'body' ).hasClass( 'ltr' )
? 'se' : 'sw',
+ offset: 15,
+ title: function () {
+ return mw.msg(
'revisionslider-show-help-tooltip' );
+ }
+ } );
pointerContainerStyle = { left:
pointerContainerPosition + 'px', width: pointerContainerWidth + 'px' };
if ( $slider.css( 'direction' ) === 'rtl' ) {
@@ -127,6 +144,7 @@
return
mw.message( 'revisionslider-arrow-tooltip-newer' ).text();
}
} ),
+ helpIcon.$element,
$( '<div>' ).css( { clear: 'both' } ),
$( '<div>' )
.addClass(
'mw-revslider-pointer-container' )
diff --git a/modules/ext.RevisionSlider.css b/modules/ext.RevisionSlider.css
index fac1fe4..ba522e0 100644
--- a/modules/ext.RevisionSlider.css
+++ b/modules/ext.RevisionSlider.css
@@ -232,16 +232,7 @@
.mw-revslider-show-help {
position: absolute;
- right: -18px;
- bottom: 7px;
- color: #347bff;
- border: 2px solid #347bff;
- padding: 0;
- background: #fff;
- font-size: 15px;
- line-height: 15px;
- font-weight: bold;
+ right: 0;
+ bottom: 0;
cursor: pointer;
- height: 25px;
- width: 25px;
}
diff --git a/modules/ext.RevisionSlider.init.js
b/modules/ext.RevisionSlider.init.js
index 84f9bf1..c01537d 100644
--- a/modules/ext.RevisionSlider.init.js
+++ b/modules/ext.RevisionSlider.init.js
@@ -32,22 +32,6 @@
( new mw.Api() ).saveOption(
'userjs-revslider-hidehelp', true );
}
- $container.append(
- $( '<button>' )
- .click( function () {
-
mw.libs.revisionSlider.HelpDialog.show();
- } )
- .text( mw.message(
'revisionslider-show-help' ).text() )
- .addClass(
'mw-revslider-show-help' )
- .tipsy( {
- gravity: $( 'body'
).hasClass( 'ltr' ) ? 'se' : 'sw',
- offset: 15,
- title: function () {
- return mw.msg(
'revisionslider-show-help-tooltip' );
- }
- } )
- );
-
$( '#mw-revslider-placeholder' ).remove();
mw.track(
'timing.MediaWiki.RevisionSlider.timing.init', mw.now() - startTime );
} catch ( err ) {
--
To view, visit https://gerrit.wikimedia.org/r/302911
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Iec7ec31a83a1a847cd68a994ecac12acf960d699
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
