Merge "Adjust new comment highlight timings"

This commit is contained in:
jenkins-bot 2021-02-08 18:51:06 +00:00 committed by Gerrit Code Review
commit 3da91953da
2 changed files with 12 additions and 18 deletions

View file

@ -41,13 +41,9 @@ 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 () {
setTimeout( function () {
// Toggle the 'dt-init-highlight-overlay' class only when needed, because using mix-blend-mode // 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 // affects the text rendering of the whole page, disabling subpixel antialiasing on Windows
$overlay.addClass( 'dt-init-highlight-overlay' ); $overlay.addClass( 'dt-init-highlight-overlay' );
@ -57,9 +53,8 @@ function highlight( comment ) {
setTimeout( function () { setTimeout( function () {
$highlight.remove(); $highlight.remove();
$overlay.removeClass( 'dt-init-highlight-overlay' ); $overlay.removeClass( 'dt-init-highlight-overlay' );
}, 500 ); }, 250 );
}, 1000 + 100 ); }, 3000 );
}, 500 );
} ); } );
} }

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;
} }