Merge "All connector-lines should be contained within the RevisionSlider"

This commit is contained in:
jenkins-bot 2017-01-16 14:34:27 +00:00 committed by Gerrit Code Review
commit fef3b044e5
3 changed files with 52 additions and 7 deletions

View file

@ -99,7 +99,12 @@
drawLine: function () {
var $upperLineDiv = this.$html.find( '.mw-revslider-pointer-line-upper' ),
$lowerLineDiv = this.$html.find( '.mw-revslider-pointer-line-lower' ),
$newerUnderLineDiv = this.$html.find( '.mw-revslider-pointer-line-underline' )
.filter( '.mw-revslider-pointer-newer' ),
$olderUnderLineDiv = this.$html.find( '.mw-revslider-pointer-line-underline' )
.filter( '.mw-revslider-pointer-older' ),
$sourcePointer = this.pointer.getView().getElement(),
$table = $( '.diff-otitle' ),
$targetColumn;
if ( this.offsetNotAvailable() ) {
@ -110,10 +115,14 @@
if ( this.pointer.getView().isUpperPointer() ) {
$lowerLineDiv.removeClass( 'mw-revslider-lower-color' ).addClass( 'mw-revslider-upper-color' );
$upperLineDiv.removeClass( 'mw-revslider-lower-color' ).addClass( 'mw-revslider-upper-color' );
$newerUnderLineDiv.removeClass( 'mw-revslider-lower-color' ).addClass( 'mw-revslider-upper-color' );
$olderUnderLineDiv.removeClass( 'mw-revslider-lower-color' ).addClass( 'mw-revslider-upper-color' );
$targetColumn = $( '.diff-ntitle' );
} else {
$lowerLineDiv.removeClass( 'mw-revslider-upper-color' ).addClass( 'mw-revslider-lower-color' );
$upperLineDiv.removeClass( 'mw-revslider-upper-color' ).addClass( 'mw-revslider-lower-color' );
$olderUnderLineDiv.removeClass( 'mw-revslider-upper-color' ).addClass( 'mw-revslider-lower-color' );
$newerUnderLineDiv.removeClass( 'mw-revslider-upper-color' ).addClass( 'mw-revslider-lower-color' );
$targetColumn = $( '.diff-otitle' );
}
@ -124,9 +133,35 @@
if ( this.targetColumnIsRightFromPointer( $sourcePointer, $targetColumn ) ) {
$upperLineDiv.addClass( 'mw-revslider-left-line' );
$lowerLineDiv.addClass( 'mw-revslider-right-line' );
$( $newerUnderLineDiv ).css( {
width: $table.width() + 'px',
'margin-right': -$table.width() / 2 + 'px',
'margin-left': 0,
'float': 'right'
} );
$( $olderUnderLineDiv ).css( {
width: $table.width() + 'px',
'margin-right': -$table.width() / 2 + 'px',
'margin-left': 0,
'float': 'right'
} );
} else {
$upperLineDiv.addClass( 'mw-revslider-right-line' );
$lowerLineDiv.addClass( 'mw-revslider-left-line' );
$( $newerUnderLineDiv ).css( {
width: $table.width() + 'px',
'margin-left': -$table.width() / 2 + 'px',
'margin-right': 0,
'float': 'left'
} );
$( $olderUnderLineDiv ).css( {
width: $table.width() + 'px',
'margin-left': -$table.width() / 2 + 'px',
'margin-right': 0,
'float': 'left'
} );
}
return true;
@ -140,7 +175,8 @@
.addClass( 'mw-revslider-pointer-line ' + this.name )
.append(
$( '<div>' ).addClass( 'mw-revslider-pointer-line-upper ' + this.name ),
$( '<div>' ).addClass( 'mw-revslider-pointer-line-lower ' + this.name )
$( '<div>' ).addClass( 'mw-revslider-pointer-line-lower ' + this.name ),
$( '<div>' ).addClass( 'mw-revslider-pointer-line-underline ' + this.name )
);
},
@ -184,6 +220,7 @@
getElement: function () {
return this.$html;
}
} );
mw.libs.revisionSlider = mw.libs.revisionSlider || {};

View file

@ -12,6 +12,14 @@
z-index: 8;
}
.mw-revslider-container-expanded {
margin-bottom: 15px;
}
.mw-revslider-container-collapsed {
margin-bottom: 0;
}
.mw-revslider-toggle-button {
width: 100%;
text-align: center;
@ -357,10 +365,6 @@ of the frameless one (to fit the size of the toggle button */
height: 27px;
}
.mw-revslider-older-diff-column {
border-top: 2px solid #fc3;
}
.mw-revslider-newer-diff-column {
border-top: 2px solid #1e6db8;
.mw-revslider-pointer-line-underline {
border-bottom: 2px solid;
}

View file

@ -61,12 +61,16 @@
expand = function () {
toggleButton.setIcon( 'collapse' ).setTitle( mw.message( 'revisionslider-toggle-title-collapse' ).text() );
$( '.mw-revslider-container' ).removeClass( 'mw-revslider-container-collapsed' )
.addClass( 'mw-revslider-container-expanded' );
$( '.mw-revslider-slider-wrapper' ).show();
expanded = true;
},
collapse = function () {
toggleButton.setIcon( 'expand' ).setTitle( mw.message( 'revisionslider-toggle-title-expand' ).text() );
$( '.mw-revslider-container' ).removeClass( 'mw-revslider-container-expanded' )
.addClass( 'mw-revslider-container-collapsed' );
$( '.mw-revslider-slider-wrapper' ).hide();
};