wikimedia/mediawiki-extensions-DiscussionTools
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/DiscussionTools synced 2024-11-28 10:11:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge "Adjust new comment highlight timings"

Browse source
This commit is contained in:
jenkins-bot 2021-02-08 18:51:06 +00:00 committed by Gerrit Code Review
parent c0d4bd007a 3c7c9c6e3a
commit 3da91953da
2 changed files with 12 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
modules/controller.js
View file

@ -41,25 +41,20 @@ function highlight( comment ) {
} ); } );
$overlay.prepend( $highlight ); $overlay.prepend( $highlight );
// Pause for 500ms // Show a highlight with the same timing as the post-edit message (mediawiki.action.view.postEdit):
// Fade in for 100ms // show for 3000ms, fade out for 250ms (animation duration is defined in CSS).
// Show for 1000ms
// Fade out for 500ms
// (animation durations are defined in CSS)
OO.ui.Element.static.scrollIntoView( $highlight[ 0 ], { padding: { top: 10, bottom: 10 } } ).then( function () { OO.ui.Element.static.scrollIntoView( $highlight[ 0 ], { padding: { top: 10, bottom: 10 } } ).then( function () {
// Toggle the 'dt-init-highlight-overlay' class only when needed, because using mix-blend-mode
// affects the text rendering of the whole page, disabling subpixel antialiasing on Windows
$overlay.addClass( 'dt-init-highlight-overlay' );
$highlight.addClass( 'dt-init-highlight-fadein' );
setTimeout( function () { setTimeout( function () {
// Toggle the 'dt-init-highlight-overlay' class only when needed, because using mix-blend-mode $highlight.addClass( 'dt-init-highlight-fadeout' );
// affects the text rendering of the whole page, disabling subpixel antialiasing on Windows
$overlay.addClass( 'dt-init-highlight-overlay' );
$highlight.addClass( 'dt-init-highlight-fadein' );
setTimeout( function () { setTimeout( function () {
$highlight.addClass( 'dt-init-highlight-fadeout' ); $highlight.remove();
setTimeout( function () { $overlay.removeClass( 'dt-init-highlight-overlay' );
$highlight.remove(); }, 250 );
$overlay.removeClass( 'dt-init-highlight-overlay' ); }, 3000 );
}, 500 );
}, 1000 + 100 );
}, 500 );
} ); } );
} }

3
modules/dt.init.less
View file

@ -81,10 +81,9 @@
.dt-init-highlight-fadein { .dt-init-highlight-fadein {
opacity: 1; opacity: 1;
transition: opacity 100ms;
} }
.dt-init-highlight-fadeout { .dt-init-highlight-fadeout {
opacity: 0; opacity: 0;
transition: opacity 500ms ease-out; transition: opacity 250ms ease-out;
} }