wikimedia/mediawiki-extensions-RevisionSlider
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/RevisionSlider synced 2024-11-14 19:24:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Highlight revisions from the same user

Browse source 
Completed subtasks

* Added bubble in the Tootltip
* Added border on clicking or hovering the bubble
* Highlites Bubble on hover
* When Clicked or hover on the Bubble: Highlights
  revisions from the same user
* Added filter revisions.

Bug: T136105
Change-Id: I64cfef395ce1812d501980067edffe210fc99227
This commit is contained in:
gopavasanth 2018-08-13 10:12:09 +05:30
parent bd4cc06f14
commit 154180ba52
2 changed files with 104 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

77
modules/ext.RevisionSlider.RevisionListView.js
View file

@ -45,6 +45,11 @@
*/
dir: null,
/**
* @type {string}
*/
selectedUser: '',
/**
* @type {jQuery}
*/
@ -381,19 +386,85 @@
* @return {string|jQuery}
*/
makeUserLine: function ( userString, userGender ) {
var revs,
self = this,
$userLine,
$userBubble;
if ( typeof this.revisionList !== 'undefined' ) {
revs = this.revisionList.getRevisions();
}
if ( !userString ) {
return '';
}
if ( !userGender ) {
userGender = 'unknown';
}
return $( '<p>' ).append(
$userLine = $( '<p class="mw-revslider-username-row">' ).append(
$( '<strong>' ).text( mw.msg( 'revisionslider-label-username', userGender ) + mw.msg( 'colon-separator' ) ),
$( '<bdi>' ).append(
$( '<a>' ).addClass( 'mw-userlink' ).attr( 'href', mw.util.getUrl( this.getUserPage( userString ) ) ).text( this.stripInvalidCharacters( userString ) )
)
),
$userBubble = $( '<div>' ).addClass( 'mw-revslider-bubble' )
.on( 'click', function () {
if ( self.selectedUser !== userString ) {
$( '.mw-revslider-username-row' ).addClass( 'mw-highlight-user-row' );
$( this ).addClass( 'mw-revslider-highlite-bubble' );
self.highlightSameUserRevisions( userString, revs, 'addClass' );
self.selectedUser = userString;
} else {
$( '.mw-revslider-username-row' ).addClass( 'mw-highlight-user-row' );
$( this ).addClass( 'mw-revslider-highlite-bubble' );
self.highlightSameUserRevisions( userString, revs, 'removeClass' );
self.selectedUser = '';
}
} )
.on( {
mouseenter: function () {
if ( self.selectedUser !== userString ) {
$( '.mw-revslider-username-row' ).addClass( 'mw-highlight-user-row' );
$( this ).addClass( 'mw-revslider-highlite-bubble' );
self.highlightSameUserRevisions( userString, revs, 'addClass' );
}
},
mouseleave: function () {
if ( self.selectedUser !== userString ) {
$( '.mw-revslider-username-row' ).removeClass( 'mw-highlight-user-row' );
$( this ).removeClass( 'mw-revslider-highlite-bubble' );
self.highlightSameUserRevisions( userString, revs, 'removeClass' );
}
}
} )
);
if ( self.selectedUser === userString ) {
$userLine.addClass( 'mw-highlight-user-row' );
$userBubble.addClass( 'mw-revslider-highlite-bubble' );
}
return $userLine;
},
/**
* Highlights revisions of the sameUser
* @param {string} userString
* @param {Object[]} revs
* @param {string} event
*/
highlightSameUserRevisions: function ( userString, revs, event ) {
var i;
$( '.mw-revslider-revision-wrapper' ).removeClass( 'mw-revslider-revision-highlight' );
for ( i = 0; i < revs.length; i++ ) {
if ( userString === revs[ i ].getUser() ) {
if ( event === 'addClass' ) {
$( '[data-revid~="' + revs[ i ].id + '"]' ).parent().addClass( 'mw-revslider-revision-highlight' );
} else if ( event === 'removeClass' ) {
$( '[data-revid~="' + revs[ i ].id + '"]' ).parent().removeClass( 'mw-revslider-revision-highlight' );
}
}
}
},
/**

30
modules/ext.RevisionSlider.less
View file

@ -57,6 +57,11 @@
.mw-revslider-revision-new & {
border-bottom: 2px solid @new;
}
.mw-revslider-revision-highlight & {
border: 1px solid #72777d;
background-color: #989898;
}
}
.mw-revslider-revision-wrapper {
@ -401,3 +406,28 @@ of the frameless one (to fit the size of the toggle button */
.mw-revslider-pointer-line-underline {
border-bottom: 2px solid;
}
.mw-revslider-bubble {
height: 17px;
width: 17px;
background-color: #ccc;
border-radius: 100%;
display: inline-block;
float: right;
}
.mw-revslider-highlite-bubble {
background-color: #72777d;
border: #e0e0e0;
}
.mw-revslider-username-row {
border: 1px solid transparent;
border-radius: 40px;
margin-left: -3px;
padding-left: 2px;
}
.mw-highlight-user-row {
border-color: #e0e0e0;
}