mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-16 10:58:30 -05:00
Merge from vscode f2d41726ba5a0e8abfe61b2c743022b1b6372010 (#7415)
* Merge from vscode f2d41726ba5a0e8abfe61b2c743022b1b6372010 * add missing files
This commit is contained in:
Anthony Dresser
31
extensions/image-preview/media/loading-dark.svg
Normal file
31
extensions/image-preview/media/loading-dark.svg
Normal file
@@ -0,0 +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 0.6s linear infinite;
|
||||
}
|
||||
|
||||
circle:nth-child(2) { animation-delay: 0.075s; }
|
||||
circle:nth-child(3) { animation-delay: 0.15s; }
|
||||
circle:nth-child(4) { animation-delay: 0.225s; }
|
||||
circle:nth-child(5) { animation-delay: 0.3s; }
|
||||
circle:nth-child(6) { animation-delay: 0.375s; }
|
||||
circle:nth-child(7) { animation-delay: 0.45s; }
|
||||
circle:nth-child(8) { animation-delay: 0.525s; }
|
||||
|
||||
@keyframes ball {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0.3; }
|
||||
}
|
||||
</style>
|
||||
<g style="fill:grey;">
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
31
extensions/image-preview/media/loading-hc.svg
Normal file
31
extensions/image-preview/media/loading-hc.svg
Normal file
@@ -0,0 +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 0.6s linear infinite;
|
||||
}
|
||||
|
||||
circle:nth-child(2) { animation-delay: 0.075s; }
|
||||
circle:nth-child(3) { animation-delay: 0.15s; }
|
||||
circle:nth-child(4) { animation-delay: 0.225s; }
|
||||
circle:nth-child(5) { animation-delay: 0.3s; }
|
||||
circle:nth-child(6) { animation-delay: 0.375s; }
|
||||
circle:nth-child(7) { animation-delay: 0.45s; }
|
||||
circle:nth-child(8) { animation-delay: 0.525s; }
|
||||
|
||||
@keyframes ball {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0.3; }
|
||||
}
|
||||
</style>
|
||||
<g style="fill:white;">
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
31
extensions/image-preview/media/loading.svg
Normal file
31
extensions/image-preview/media/loading.svg
Normal file
@@ -0,0 +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 0.6s linear infinite;
|
||||
}
|
||||
|
||||
circle:nth-child(2) { animation-delay: 0.075s; }
|
||||
circle:nth-child(3) { animation-delay: 0.15s; }
|
||||
circle:nth-child(4) { animation-delay: 0.225s; }
|
||||
circle:nth-child(5) { animation-delay: 0.3s; }
|
||||
circle:nth-child(6) { animation-delay: 0.375s; }
|
||||
circle:nth-child(7) { animation-delay: 0.45s; }
|
||||
circle:nth-child(8) { animation-delay: 0.525s; }
|
||||
|
||||
@keyframes ball {
|
||||
from { opacity: 1; }
|
||||
to { opacity: 0.3; }
|
||||
}
|
||||
</style>
|
||||
<g>
|
||||
<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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
@@ -62,11 +62,11 @@ body img {
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.container.zoom-in {
|
||||
.container.ready.zoom-in {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.container.zoom-out {
|
||||
.container.ready.zoom-out {
|
||||
cursor: zoom-out;
|
||||
}
|
||||
|
||||
@@ -76,3 +76,23 @@ body img {
|
||||
text-decoration: underline;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
position: fixed;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
margin-top: -15px;
|
||||
margin-left: -15px;
|
||||
background-image: url('./loading.svg');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.vscode-dark .loading {
|
||||
background-image: url('./loading-dark.svg');
|
||||
}
|
||||
|
||||
.vscode-high-contrast .loading {
|
||||
background-image: url('./loading-hc.svg');
|
||||
}
|
||||
|
||||
@@ -69,13 +69,14 @@
|
||||
let scale = initialState.scale;
|
||||
let ctrlPressed = false;
|
||||
let altPressed = false;
|
||||
let hasLoadedImage = false;
|
||||
|
||||
// Elements
|
||||
const container = /** @type {HTMLElement} */(document.querySelector('body'));
|
||||
const image = document.createElement('img');
|
||||
|
||||
function updateScale(newScale) {
|
||||
if (!image || !image.parentElement) {
|
||||
if (!image || !hasLoadedImage || !image.parentElement) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -125,7 +126,7 @@
|
||||
}
|
||||
|
||||
function firstZoom() {
|
||||
if (!image) {
|
||||
if (!image || !hasLoadedImage) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -134,7 +135,7 @@
|
||||
}
|
||||
|
||||
window.addEventListener('keydown', (/** @type {KeyboardEvent} */ e) => {
|
||||
if (!image) {
|
||||
if (!image || !hasLoadedImage) {
|
||||
return;
|
||||
}
|
||||
ctrlPressed = e.ctrlKey;
|
||||
@@ -147,7 +148,7 @@
|
||||
});
|
||||
|
||||
window.addEventListener('keyup', (/** @type {KeyboardEvent} */ e) => {
|
||||
if (!image) {
|
||||
if (!image || !hasLoadedImage) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -161,7 +162,7 @@
|
||||
});
|
||||
|
||||
container.addEventListener('click', (/** @type {MouseEvent} */ e) => {
|
||||
if (!image) {
|
||||
if (!image || !hasLoadedImage) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -194,7 +195,7 @@
|
||||
});
|
||||
|
||||
container.addEventListener('wheel', (/** @type {WheelEvent} */ e) => {
|
||||
if (!image) {
|
||||
if (!image || !hasLoadedImage) {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -215,7 +216,7 @@
|
||||
});
|
||||
|
||||
window.addEventListener('scroll', () => {
|
||||
if (!image || !image.parentElement || scale === 'fit') {
|
||||
if (!image || !hasLoadedImage || !image.parentElement || scale === 'fit') {
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -229,9 +230,11 @@
|
||||
container.classList.add('zoom-in');
|
||||
|
||||
image.classList.add('scale-to-fit');
|
||||
image.style.visibility = 'hidden';
|
||||
|
||||
image.addEventListener('load', () => {
|
||||
document.querySelector('.loading').remove();
|
||||
hasLoadedImage = true;
|
||||
|
||||
if (!image) {
|
||||
return;
|
||||
}
|
||||
@@ -241,7 +244,9 @@
|
||||
value: `${image.naturalWidth}x${image.naturalHeight}`,
|
||||
});
|
||||
|
||||
image.style.visibility = 'visible';
|
||||
container.classList.add('ready');
|
||||
document.body.append(image);
|
||||
|
||||
updateScale(scale);
|
||||
|
||||
if (initialState.scale !== 'fit') {
|
||||
@@ -250,7 +255,6 @@
|
||||
});
|
||||
|
||||
image.src = decodeURI(settings.src);
|
||||
document.body.append(image);
|
||||
|
||||
window.addEventListener('message', e => {
|
||||
switch (e.data.type) {
|
||||
|
||||
Reference in New Issue
Block a user