development/vscode
development/vscode
1
0
Fork 0
mirror of https://github.com/Microsoft/vscode synced 2024-10-04 02:14:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

flash background with prominent color only and only for warning and error, https://github.com/microsoft/vscode/issues/145950

Browse source
This commit is contained in:
Johannes 2022-04-06 18:28:25 +02:00
parent 368c39cd7a
commit 807596b4a2
No known key found for this signature in database
GPG key ID: 6DEF802A22264FCA
2 changed files with 30 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/vs/workbench/contrib/languageStatus/browser/languageStatus.contribution.ts
View file

@ -204,18 +204,21 @@ 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 A');
if (node instanceof HTMLElement) {
const _sev = `sev${first.severity}`;
const node = document.querySelector('.monaco-workbench.enable-motion .statusbar DIV#status\\.languageStatus A>SPAN.codicon');
const container = document.querySelector('.monaco-workbench.enable-motion .statusbar DIV#status\\.languageStatus');
if (node instanceof HTMLElement && container) {
const _wiggle = 'wiggle';
const _repeat = 'repeat';
const _flash = 'flash';
if (!isOneBusy) {
// wiggle icon when severe or "new"
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, _sev)));
this._renderDisposables.add(dom.addDisposableListener(node, 'animationend', _e => node.classList.remove(_wiggle)));
// flash background when severe
container.classList.toggle(_flash, showSeverity);
this._renderDisposables.add(dom.addDisposableListener(container, 'animationend', _e => container.classList.remove(_flash)));
} else {
node.classList.remove(_wiggle, _repeat, _sev);
node.classList.remove(_wiggle);
container.classList.remove(_flash);
}
}

37
src/vs/workbench/contrib/languageStatus/browser/media/languageStatus.css
View file

@ -3,15 +3,11 @@
* Licensed under the MIT License. See License.txt in the project root for license information.
*--------------------------------------------------------------------------------------------*/
/* status bar animation */
@keyframes wiggle {
0% {
transform: rotate(0) scale(1);
opacity: 0;
}
30% {
opacity: .75;
}
15%,
@ -26,31 +22,36 @@
100% {
transform: rotate(0) scale(1);
opacity: 0;
}
}
.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus A.wiggle {
.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus A>SPAN.codicon.wiggle {
animation-duration: .8s;
animation-iteration-count: 1;
animation-name: wiggle;
}
.monaco-workbench.enable-motion .statusbar DIV#status\.languageStatus A.wiggle.sev1 {
background-color: var(--vscode-statusBarItem-prominentBackground);
@keyframes flash {
0% {
background-color: initial;
}
50% {
background-color: var(--vscode-statusBarItem-prominentBackground);
}
100% {
background-color: initial;
}
}
.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.flash {
animation-duration: .8s;
animation-iteration-count: 1;
animation-name: flash;
}
.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;
}
/* --- hover */
.monaco-workbench .hover-language-status {
display: flex;