mirror of
https://github.com/Microsoft/vscode
synced 2024-08-28 13:29:44 +00:00
fixes wobbly progress indicator
This commit is contained in:
SteVen Batten
parent
6cc34bb4f6
commit
0fde661917
|
|
@ -40,7 +40,6 @@ export class Dialog extends Disposable {
|
|||
private buttonGroup: ButtonGroup | undefined;
|
||||
private styles: IDialogStyles | undefined;
|
||||
private focusToReturn: HTMLElement | undefined;
|
||||
private iconRotatingInternal: number | undefined;
|
||||
|
||||
constructor(private container: HTMLElement, private message: string, private buttons: string[], private options: IDialogOptions) {
|
||||
super();
|
||||
|
|
@ -163,15 +162,6 @@ export class Dialog extends Disposable {
|
|||
break;
|
||||
case 'pending':
|
||||
addClass(this.iconElement, 'icon-pending');
|
||||
let deg = 0;
|
||||
this.iconRotatingInternal = window.setInterval(() => {
|
||||
if (this.iconElement) {
|
||||
this.iconElement.style.transform = `rotate(${deg}deg)`;
|
||||
deg += 45; // 360 / 8
|
||||
} else {
|
||||
this.stopAnimation();
|
||||
}
|
||||
}, 125 /** 1000 / 8 */);
|
||||
break;
|
||||
case 'none':
|
||||
case 'info':
|
||||
|
|
@ -199,13 +189,6 @@ export class Dialog extends Disposable {
|
|||
});
|
||||
}
|
||||
|
||||
private stopAnimation() {
|
||||
if (this.iconRotatingInternal) {
|
||||
window.clearInterval(this.iconRotatingInternal);
|
||||
this.iconRotatingInternal = undefined;
|
||||
}
|
||||
}
|
||||
|
||||
private applyStyles() {
|
||||
if (this.styles) {
|
||||
const style = this.styles;
|
||||
|
|
@ -240,8 +223,6 @@ export class Dialog extends Disposable {
|
|||
this.modal = undefined;
|
||||
}
|
||||
|
||||
this.stopAnimation();
|
||||
|
||||
if (this.focusToReturn && isAncestor(this.focusToReturn, document.body)) {
|
||||
this.focusToReturn.focus();
|
||||
this.focusToReturn = undefined;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,31 @@
|
|||
<?xml version='1.0' standalone='no' ?>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
|
||||
<style>
|
||||
circle {
|
||||
animation: ball 1.04s steps(8) infinite;
|
||||
}
|
||||
|
||||
circle:nth-child(2) { animation-delay: 0.13s; }
|
||||
circle:nth-child(3) { animation-delay: 0.26s; }
|
||||
circle:nth-child(4) { animation-delay: 0.39s; }
|
||||
circle:nth-child(5) { animation-delay: 0.52s; }
|
||||
circle:nth-child(6) { animation-delay: 0.65s; }
|
||||
circle:nth-child(7) { animation-delay: 0.78s; }
|
||||
circle:nth-child(8) { animation-delay: 0.91s; }
|
||||
|
||||
@keyframes ball {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0.3; }
|
||||
}
|
||||
</style>
|
||||
<g style="fill:grey;">
|
||||
<circle cx='5' cy='1' r='1' style='opacity: 1.0;' />
|
||||
<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.9;' />
|
||||
<circle cx='9' cy='5' r='1' style='opacity:0.8;' />
|
||||
<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.7;' />
|
||||
<circle cx='5' cy='9' r='1' style='opacity:0.6;' />
|
||||
<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.5;' />
|
||||
<circle cx='1' cy='5' r='1' style='opacity:0.4;' />
|
||||
<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
|
||||
<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
|
||||
<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
|
||||
<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
|
||||
<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
|
||||
<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
|
||||
<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
|
||||
<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 631 B After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,13 +1,31 @@
|
|||
<?xml version='1.0' standalone='no' ?>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
|
||||
<style>
|
||||
circle {
|
||||
animation: ball 1.04s steps(8) infinite;
|
||||
}
|
||||
|
||||
circle:nth-child(2) { animation-delay: 0.13s; }
|
||||
circle:nth-child(3) { animation-delay: 0.26s; }
|
||||
circle:nth-child(4) { animation-delay: 0.39s; }
|
||||
circle:nth-child(5) { animation-delay: 0.52s; }
|
||||
circle:nth-child(6) { animation-delay: 0.65s; }
|
||||
circle:nth-child(7) { animation-delay: 0.78s; }
|
||||
circle:nth-child(8) { animation-delay: 0.91s; }
|
||||
|
||||
@keyframes ball {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0.3; }
|
||||
}
|
||||
</style>
|
||||
<g style="fill:white;">
|
||||
<circle cx='5' cy='1' r='1' style='opacity: 1.0;' />
|
||||
<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.9;' />
|
||||
<circle cx='9' cy='5' r='1' style='opacity:0.8;' />
|
||||
<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.7;' />
|
||||
<circle cx='5' cy='9' r='1' style='opacity:0.6;' />
|
||||
<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.5;' />
|
||||
<circle cx='1' cy='5' r='1' style='opacity:0.4;' />
|
||||
<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
|
||||
<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
|
||||
<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
|
||||
<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
|
||||
<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
|
||||
<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
|
||||
<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
|
||||
<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 632 B After Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,13 +1,31 @@
|
|||
<?xml version='1.0' standalone='no' ?>
|
||||
<svg xmlns='http://www.w3.org/2000/svg' version='1.1' width='10px' height='10px'>
|
||||
<style>
|
||||
circle {
|
||||
animation: ball 1.04s steps(8) infinite;
|
||||
}
|
||||
|
||||
circle:nth-child(2) { animation-delay: 0.13s; }
|
||||
circle:nth-child(3) { animation-delay: 0.26s; }
|
||||
circle:nth-child(4) { animation-delay: 0.39s; }
|
||||
circle:nth-child(5) { animation-delay: 0.52s; }
|
||||
circle:nth-child(6) { animation-delay: 0.65s; }
|
||||
circle:nth-child(7) { animation-delay: 0.78s; }
|
||||
circle:nth-child(8) { animation-delay: 0.91s; }
|
||||
|
||||
@keyframes ball {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0.3; }
|
||||
}
|
||||
</style>
|
||||
<g>
|
||||
<circle cx='5' cy='1' r='1' style='opacity: 1.0;' />
|
||||
<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.9;' />
|
||||
<circle cx='9' cy='5' r='1' style='opacity:0.8;' />
|
||||
<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.7;' />
|
||||
<circle cx='5' cy='9' r='1' style='opacity:0.6;' />
|
||||
<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.5;' />
|
||||
<circle cx='1' cy='5' r='1' style='opacity:0.4;' />
|
||||
<circle cx='5' cy='1' r='1' style='opacity:0.3;' />
|
||||
<circle cx='7.8284' cy='2.1716' r='1' style='opacity:0.3;' />
|
||||
<circle cx='9' cy='5' r='1' style='opacity:0.3;' />
|
||||
<circle cx='7.8284' cy='7.8284' r='1' style='opacity:0.3;' />
|
||||
<circle cx='5' cy='9' r='1' style='opacity:0.3;' />
|
||||
<circle cx='2.1716' cy='7.8284' r='1' style='opacity:0.3;' />
|
||||
<circle cx='1' cy='5' r='1' style='opacity:0.3;' />
|
||||
<circle cx='2.1716' cy='2.1716' r='1' style='opacity:0.3;' />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 612 B After Width: | Height: | Size: 1.1 KiB |
Loading…
Reference in a new issue