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

Tweak colors and timing of the highlight on posted comments

Browse source 
* Use a slightly different color
* Use 'mix-blend-mode: multiply' when available to avoid fading
  the text color
* Add fade-in animation and make fade-out animation slower

Bug: T268994
Change-Id: I210ed4fd55c3dc184d13daf915fa93bee3699ad5
This commit is contained in:
Bartosz Dziewoński 2020-12-01 00:32:29 +01:00
parent 7c01e20e47
commit b92ae47e00
2 changed files with 51 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

37
modules/controller.js
View file

@ -2,6 +2,7 @@
var
$pageContainer,
$overlay,
Parser = require( './Parser.js' ),
ThreadItem = require( './ThreadItem.js' ),
logger = require( './logger.js' ),
@ -20,26 +21,42 @@ function getApi() {
function highlight( comment ) {
var padding = 5,
// $container must be position:relative/absolute
$container = OO.ui.getDefaultOverlay(),
containerRect = $container[ 0 ].getBoundingClientRect(),
rect = RangeFix.getBoundingClientRect( comment.getNativeRange() ),
overlayRect, rect,
$highlight = $( '<div>' ).addClass( 'dt-init-highlight' );
if ( !$overlay ) {
// $overlay must be position:relative/absolute
$overlay = $( '<div>' ).addClass( 'oo-ui-defaultOverlay' ).appendTo( 'body' );
}
overlayRect = $overlay[ 0 ].getBoundingClientRect();
rect = RangeFix.getBoundingClientRect( comment.getNativeRange() );
$highlight.css( {
top: rect.top - containerRect.top - padding,
left: rect.left - containerRect.left - padding,
top: rect.top - overlayRect.top - padding,
left: rect.left - overlayRect.left - padding,
width: rect.width + ( padding * 2 ),
height: rect.height + ( padding * 2 )
} );
$container.prepend( $highlight );
$overlay.prepend( $highlight );
// Pause for 500ms
// Fade in for 100ms
// 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 () {
setTimeout( function () {
$highlight.addClass( 'dt-init-highlight-fade' );
// 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 () {
$highlight.remove();
}, 500 );
$highlight.addClass( 'dt-init-highlight-fadeout' );
setTimeout( function () {
$highlight.remove();
$overlay.removeClass( 'dt-init-highlight-overlay' );
}, 500 );
}, 1000 + 100 );
}, 500 );
} );
}

30
modules/dt.init.less
View file

@ -44,13 +44,31 @@
}
.dt-init-highlight {
background: rgba( 255, 204, 51, 0.5 );
// Support: IE11
// On supporting browsers, we instead use non-transparent color with mix-blend-mode.
// Identical to #ffe29e on white background.
background-color: rgba( 255, 198, 60, 0.5 );
position: absolute;
pointer-events: none;
opacity: 1;
transition: opacity 500ms;
}
.dt-init-highlight-fade {
opacity: 0;
}
@supports ( mix-blend-mode: multiply ) {
.dt-init-highlight-overlay {
mix-blend-mode: multiply;
}
.dt-init-highlight {
background-color: #ffe29e;
}
}
.dt-init-highlight-fadein {
opacity: 1;
transition: opacity 100ms;
}
.dt-init-highlight-fadeout {
opacity: 0;
transition: opacity 500ms ease-out;
}