From e126efa95335f98e244d61d8cb23d171b0f1b65c Mon Sep 17 00:00:00 2001 From: WMDE-Fisch Date: Fri, 20 May 2016 10:51:21 +0200 Subject: [PATCH] Add annotation labels to the slider Bug: T133270 Change-Id: Ibfc16196d35305a56c63d6c23a174712442f31a8 --- extension.json | 5 +++ i18n/en.json | 7 ++-- i18n/qqq.json | 5 ++- modules/ext.RevisionSlider.SliderView.js | 8 +++++ modules/ext.RevisionSlider.css | 42 ++++++++++++++++++++++++ 5 files changed, 64 insertions(+), 3 deletions(-) diff --git a/extension.json b/extension.json index 8fb3456a..8195c552 100755 --- a/extension.json +++ b/extension.json @@ -80,6 +80,11 @@ "dependencies": [ "ext.RevisionSlider.DiffPage", "ext.RevisionSlider.Pointer" + ], + "messages": [ + "revisionslider-annotations-newer", + "revisionslider-annotations-older", + "revisionslider-annotations-diffsize" ] }, "ext.RevisionSlider.DiffPage": { diff --git a/i18n/en.json b/i18n/en.json index e62411e7..626005f6 100755 --- a/i18n/en.json +++ b/i18n/en.json @@ -12,5 +12,8 @@ "revisionslider-loading-placeholder": "The revision slider is loading.", "revisionslider-loading-failed": "The revision slider failed to load.", "revisionslider-loading-out-of-range": "The revision slider failed to load as the requested revisions are not in the top 500 versions of the page.", - "revisionslider-loading-noscript": "As you have JavaScript disabled the revision slider will not be able to load." -} + "revisionslider-loading-noscript": "As you have JavaScript disabled the revision slider will not be able to load.", + "revisionslider-annotations-newer": "newer", + "revisionslider-annotations-older": "older", + "revisionslider-annotations-diffsize": "diff size" +} \ No newline at end of file diff --git a/i18n/qqq.json b/i18n/qqq.json index a6d8a61a..9c531c8c 100755 --- a/i18n/qqq.json +++ b/i18n/qqq.json @@ -12,5 +12,8 @@ "revisionslider-loading-placeholder": "Message shown while the RevisionSlider is still loading on a diff page. Once loaded the message is removed.", "revisionslider-loading-failed": "Message shown if the RevisionSlider fails to initially load.", "revisionslider-loading-out-of-range": "Message shown if the RevisionSlider fails to initially load due to revisions being requested that are not in the most recent 500 revisions.", - "revisionslider-loading-noscript": "Message shown while the RevisionSlider is trying to load but when JavaScript is disabled and thus it will not be successful." + "revisionslider-loading-noscript": "Message shown while the RevisionSlider is trying to load but when JavaScript is disabled and thus it will not be successful.", + "revisionslider-annotations-newer": "Label shown to indicate the direction to newer revisions.", + "revisionslider-annotations-older": "Label shown to indicate direction to older revisions.", + "revisionslider-annotations-diffsize": "Label shown vertically to indicate meaning of revision bar heights." } diff --git a/modules/ext.RevisionSlider.SliderView.js b/modules/ext.RevisionSlider.SliderView.js index e384e47d..be764fdb 100644 --- a/modules/ext.RevisionSlider.SliderView.js +++ b/modules/ext.RevisionSlider.SliderView.js @@ -42,6 +42,7 @@ width: ( containerWidth + this.containerMargin ) + 'px' } ) .append( $( '' ) ) + .append( $( '
' + mw.message( 'revisionslider-annotations-diffsize' ).text() + '
' ) ) .append( $( '
' ) .css( { width: containerWidth + 'px' @@ -99,12 +100,19 @@ this.$element = $slider; $container.html( $slider ); + $slider.after( this.makeAnnotations() ); this.slide( Math.floor( this.pointerTwo.getPosition() / this.slider.getRevisionsPerWindow() ), 0 ); diffPage.pushState( mw.config.values.extRevisionSliderOldRev, mw.config.values.extRevisionSliderNewRev, this ); diffPage.initOnPopState( this ); }, + makeAnnotations: function () { + return $( '
' ) + .append( '← ' + mw.message( 'revisionslider-annotations-older' ).text() + '' ) + .append( '' + mw.message( 'revisionslider-annotations-newer' ).text() + ' →' ); + }, + initializePointers: function ( $revisions ) { var oldRevElement = $revisions.find( 'div.revision[data-revid=\'' + mw.config.values.extRevisionSliderOldRev + '\']' ), newRevElement = $revisions.find( 'div.revision[data-revid=\'' + mw.config.values.extRevisionSliderNewRev + '\']' ); diff --git a/modules/ext.RevisionSlider.css b/modules/ext.RevisionSlider.css index 9b99cd5b..54914f16 100755 --- a/modules/ext.RevisionSlider.css +++ b/modules/ext.RevisionSlider.css @@ -104,6 +104,48 @@ background-repeat: no-repeat; } + +.revisions-annotations { + color: #bcbcbc; + font-size: 88%; + margin: 0 60px; +} +.revisions-older { + float:left; +} +.revisions-newer { + float:right; +} +.revisions-diffsize { + color: #bcbcbc; + font-size: 88%; + + width: 140px; + height: 20px; + border-bottom: solid 1px #bcbcbc; + + position: absolute; + top: 60px; + left: -30px; + + /* see http://stackoverflow.com/a/1080812/4782503 */ + -webkit-transform: rotate(-90deg); + -moz-transform: rotate(-90deg); + -ms-transform: rotate(-90deg); + -o-transform: rotate(-90deg); + transform: rotate(-90deg); + + /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */ + -webkit-transform-origin: 50% 50%; + -moz-transform-origin: 50% 50%; + -ms-transform-origin: 50% 50%; + -o-transform-origin: 50% 50%; + transform-origin: 50% 50%; + + /* Should be unset in IE9+ I think. */ + filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); +} + #revision-slider-darkness { background-color: white; filter:alpha(opacity=50); /* IE */