add background color to language status animation, https://github.com/microsoft/vscode/issues/145950

This commit is contained in:
Johannes 2022-04-06 11:51:40 +02:00
parent 18377e6ee2
commit 14c8d53371
No known key found for this signature in database
GPG key ID: 6DEF802A22264FCA
2 changed files with 30 additions and 10 deletions

View file

@ -202,16 +202,18 @@ class EditorStatusContribution implements IWorkbenchContribution {
// animate the status bar icon whenever language status changes, repeat animation
// when severity is warning or error, don't show animation when showing progress/busy
const userHasInteractedWithStatus = this._interactionCounter.value >= 3;
const node = document.querySelector('.monaco-workbench .statusbar DIV#status\\.languageStatus span.codicon');
const node = document.querySelector('.monaco-workbench .statusbar DIV#status\\.languageStatus A');
if (node instanceof HTMLElement) {
const _sev = `sev${first.severity}`;
const _wiggle = 'wiggle';
const _repeat = 'repeat';
if (!isOneBusy) {
node.classList.toggle(_wiggle, showSeverity || !userHasInteractedWithStatus);
node.classList.toggle(_sev, showSeverity || !userHasInteractedWithStatus);
node.classList.toggle(_repeat, showSeverity);
this._renderDisposables.add(dom.addDisposableListener(node, 'animationend', _e => node.classList.remove(_wiggle, _repeat)));
this._renderDisposables.add(dom.addDisposableListener(node, 'animationend', _e => node.classList.remove(_wiggle, _repeat, _sev)));
} else {
node.classList.remove(_wiggle, _repeat);
node.classList.remove(_wiggle, _repeat, _sev);
}
}
@ -226,7 +228,7 @@ class EditorStatusContribution implements IWorkbenchContribution {
observer.disconnect();
}
});
observer.observe(document.body, { childList: true, subtree: true });
observer.observe(hoverTarget, { childList: true, subtree: true });
this._renderDisposables.add(toDisposable(() => observer.disconnect()));
}
}

View file

@ -6,31 +6,49 @@
@keyframes wiggle {
0% {
transform: rotate(0) scale(1)
transform: rotate(0) scale(1);
opacity: 0;
}
30% {
opacity: .75;
}
15%,
45% {
transform: rotate(.04turn) scale(1.1)
transform: rotate(.04turn) scale(1.1);
}
30%,
60% {
transform: rotate(-.04turn) scale(1.2)
transform: rotate(-.04turn) scale(1.2);
}
100% {
transform: rotate(0) scale(1)
transform: rotate(0) scale(1);
opacity: 0;
}
}
.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus span.codicon.wiggle {
.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus A.wiggle {
animation-duration: .8s;
animation-iteration-count: 1;
animation-name: wiggle;
}
.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus span.codicon.wiggle.repeat {
.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus A.wiggle.sev1 {
background-color: var(--vscode-statusBarItem-prominentBackground);
}
.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus A.wiggle.sev2 {
background-color: var(--vscode-statusBarItem-warningBackground);
}
.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus A.wiggle.sev3 {
background-color: var(--vscode-statusBarItem-errorBackground);
}
.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus A.wiggle.repeat {
animation-iteration-count: 3;
}