mirror of
https://github.com/Microsoft/vscode
synced 2024-08-27 13:00:58 +00:00
add background color to language status animation, https://github.com/microsoft/vscode/issues/145950
This commit is contained in:
parent
18377e6ee2
commit
14c8d53371
|
@ -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()));
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in a new issue