From 0af4fe35d55829f172529ec6e443f99e3790acca Mon Sep 17 00:00:00 2001 From: Leszek Manicki Date: Thu, 4 Aug 2016 13:17:46 +0200 Subject: [PATCH] Make the "show help" button a OOjs ButtonWidget This also adjusts position of the help icon so it better fits the available space. Bug: T139150 Change-Id: Iec7ec31a83a1a847cd68a994ecac12acf960d699 --- extension.json | 2 ++ i18n/en.json | 1 - i18n/qqq.json | 1 - modules/ext.RevisionSlider.SliderView.js | 21 ++++++++++++++++++++- modules/ext.RevisionSlider.css | 15 +++------------ modules/ext.RevisionSlider.init.js | 18 +----------------- 6 files changed, 26 insertions(+), 32 deletions(-) diff --git a/extension.json b/extension.json index 139df767..ecee199c 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 f43cf67e..4a3e762b 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 b403e969..783d9b5d 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 746a674c..eb17ade9 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 = $( '
' ) .addClass( 'mw-revslider-revision-slider' ) .css( { direction: $container.css( 'direction' ) } ), + helpButton, self = this; if ( $slider.css( 'direction' ) === 'rtl' ) { @@ -79,6 +80,23 @@ this.pointerOlder = new mw.libs.revisionSlider.Pointer( 'mw-revslider-pointer-older' ); this.pointerNewer = new mw.libs.revisionSlider.Pointer( 'mw-revslider-pointer-newer' ); + helpButton = new OO.ui.ButtonWidget( { + icon: 'help', + framed: false, + classes: [ 'mw-revslider-show-help' ] + } ); + helpButton.$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' ) { // Due to properly limit dragging a pointer on the right side of the screen, @@ -127,6 +145,7 @@ return mw.message( 'revisionslider-arrow-tooltip-newer' ).text(); } } ), + helpButton.$element, $( '
' ).css( { clear: 'both' } ), $( '
' ) .addClass( 'mw-revslider-pointer-container' ) diff --git a/modules/ext.RevisionSlider.css b/modules/ext.RevisionSlider.css index fac1fe45..ac60c367 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; - cursor: pointer; - height: 25px; - width: 25px; + right: 0; + bottom: 0; + margin-right: 0; } diff --git a/modules/ext.RevisionSlider.init.js b/modules/ext.RevisionSlider.init.js index 84f9bf15..03f72280 100644 --- a/modules/ext.RevisionSlider.init.js +++ b/modules/ext.RevisionSlider.init.js @@ -7,7 +7,7 @@ api.fetchRevisionData( mw.config.get( 'wgPageName' ), { startId: mw.config.values.extRevisionSliderNewRev, - limit: mw.libs.revisionSlider.calculateRevisionsPerWindow( 120, 16 ), + limit: mw.libs.revisionSlider.calculateRevisionsPerWindow( 140, 16 ), success: function ( data ) { var revs, @@ -32,22 +32,6 @@ ( new mw.Api() ).saveOption( 'userjs-revslider-hidehelp', true ); } - $container.append( - $( '