Merge pull request #128845 from microsoft/tyriar/skip_fade

Show hover immediately when moving from related icons
This commit is contained in:
Sandeep Somavarapu 2021-07-19 09:44:02 +02:00 committed by GitHub
commit 4e8851e90a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 26 additions and 6 deletions

View file

@ -152,6 +152,8 @@ export class ActivityActionViewItem extends BaseActionViewItem {
private readonly hover = this._register(new MutableDisposable<IDisposable>());
private readonly showHoverScheduler = new RunOnceScheduler(() => this.showHover(), 0);
private static _hoverLeaveTime = 0;
constructor(
action: ActivityAction,
options: IActivityActionViewItemOptions,
@ -387,12 +389,17 @@ export class ActivityActionViewItem extends BaseActionViewItem {
this.hoverDisposables.clear();
this.updateTitle();
this.hoverDisposables.add(addDisposableListener(this.container, EventType.MOUSE_OVER, () => {
this.hoverDisposables.add(addDisposableListener(this.label, EventType.MOUSE_OVER, () => {
if (!this.showHoverScheduler.isScheduled()) {
this.showHoverScheduler.schedule(this.configurationService.getValue<number>('workbench.hover.delay'));
if (Date.now() - ActivityActionViewItem._hoverLeaveTime < 200) {
this.showHover(true);
} else {
this.showHoverScheduler.schedule(this.configurationService.getValue<number>('workbench.hover.delay'));
}
}
}, true));
this.hoverDisposables.add(addDisposableListener(this.container, EventType.MOUSE_LEAVE, () => {
this.hoverDisposables.add(addDisposableListener(this.label, EventType.MOUSE_LEAVE, () => {
ActivityActionViewItem._hoverLeaveTime = Date.now();
this.hover.value = undefined;
this.showHoverScheduler.cancel();
}, true));
@ -402,7 +409,7 @@ export class ActivityActionViewItem extends BaseActionViewItem {
}));
}
private showHover(): void {
private showHover(skipFadeInAnimation: boolean = false): void {
if (this.hover.value) {
return;
}
@ -412,7 +419,8 @@ export class ActivityActionViewItem extends BaseActionViewItem {
hoverPosition,
text: this.computeTitle(),
showPointer: true,
compact: true
compact: true,
skipFadeInAnimation
});
}

View file

@ -96,6 +96,12 @@ export interface IHoverOptions {
* Whether to show a compact hover
*/
compact?: boolean;
/**
* Whether to skip the fade in animation, this should be used when hovering from one hover to
* another in the same group so it looks like the hover is moving from one element to the other.
*/
skipFadeInAnimation?: boolean;
}
export interface IHoverAction {

View file

@ -82,6 +82,9 @@ export class HoverWidget extends Widget {
if (options.compact) {
this._hover.containerDomNode.classList.add('workbench-hover', 'compact');
}
if (options.skipFadeInAnimation) {
this._hover.containerDomNode.classList.add('skip-fade-in');
}
if (options.additionalClasses) {
this._hover.containerDomNode.classList.add(...options.additionalClasses);
}

View file

@ -7,13 +7,16 @@
position: relative;
font-size: 13px;
line-height: 19px;
animation: fadein 100ms linear;
/* Must be higher than sash's z-index and terminal canvases */
z-index: 40;
overflow: hidden;
max-width: 700px;
}
.monaco-workbench .workbench-hover:not(.skip-fade-in) {
animation: fadein 100ms linear;
}
.monaco-workbench .workbench-hover.compact {
font-size: 12px;
}