Skip to content

Commit aa842fa

Browse files
jacksyrmjacksyrm
committed
refactor: streamline worker script by removing redundant link handling logic and enhance Windows ISO download component with updated UI and improved accessibility features
1 parent 11b2595 commit aa842fa

2 files changed

Lines changed: 151 additions & 113 deletions

File tree

‎src/components/docs/install/WindowsIsoDownload.astro‎

Lines changed: 136 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const { includeAmeBeta = false } = Astro.props;
1616
const msdlId = `msdl-${Math.random().toString(36).substring(2, 9)}`;
1717
1818
const tabItems = [
19-
{ label: 'MSDL (Recommended)', value: 'msdl' },
19+
{ label: 'ISO Downloader (Recommended)', value: 'iso-downloader' },
2020
{ label: 'Microsoft website', value: 'microsoft-site' },
2121
{ label: 'Media Creation Tool', value: 'media-creation-tool' },
2222
...(includeAmeBeta ? [{ label: 'AME Beta', value: 'ame-beta' }] : []),
@@ -34,71 +34,74 @@ const tabItems = [
3434
)}
3535
</Callout>
3636

37-
<Tabs items={tabItems} defaultTab="msdl">
38-
<TabPanel value="msdl" default>
37+
<Tabs items={tabItems} defaultTab="iso-downloader">
38+
<TabPanel value="iso-downloader" default>
3939
<div class="msdl-widget not-prose" data-msdl-root={msdlId}>
4040

4141
<!-- Step: idle — architecture selection -->
4242
<div data-msdl-step="idle">
43-
<p class="mb-4 text-sm text-white/60">Select your CPU architecture</p>
44-
<div class="flex gap-2">
43+
<p class="mb-3 text-[11px] font-medium uppercase tracking-widest text-white/25">Architecture</p>
44+
<div class="grid grid-cols-2 gap-2">
4545
<button
4646
type="button"
4747
data-msdl-arch-btn="x64"
48-
class="flex-1 cursor-pointer rounded-md border border-white/[0.06] bg-white/[0.03] px-4 py-4 text-left transition-colors duration-150 hover:border-white/[0.12] hover:bg-white/[0.06] active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
48+
class="iso-arch-btn group relative flex cursor-pointer flex-col gap-3 rounded-lg border border-white/[0.06] bg-white/[0.02] px-4 py-4 text-left focus-visible:outline-none active:scale-[0.98]"
4949
>
50-
<Icon name="tabler:cpu" class="mb-2.5 h-4 w-4 text-white/25" />
51-
<p class="text-sm font-medium text-white/90">x64</p>
52-
<p class="text-xs text-white/35">Intel &amp; AMD</p>
50+
<Icon name="tabler:cpu" class="h-5 w-5 text-white/30 transition-colors duration-200 group-hover:text-primary/70" />
51+
<div>
52+
<p class="text-sm font-semibold text-white/85">x64</p>
53+
<p class="text-xs text-white/35">Intel &amp; AMD</p>
54+
</div>
5355
</button>
5456
<button
5557
type="button"
5658
data-msdl-arch-btn="arm64"
57-
class="flex-1 cursor-pointer rounded-md border border-white/[0.06] bg-white/[0.03] px-4 py-4 text-left transition-colors duration-150 hover:border-white/[0.12] hover:bg-white/[0.06] active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
59+
class="iso-arch-btn group relative flex cursor-pointer flex-col gap-3 rounded-lg border border-white/[0.06] bg-white/[0.02] px-4 py-4 text-left focus-visible:outline-none active:scale-[0.98]"
5860
>
59-
<Icon name="tabler:device-mobile" class="mb-2.5 h-4 w-4 text-white/25" />
60-
<p class="text-sm font-medium text-white/90">ARM64</p>
61-
<p class="text-xs text-white/35">Qualcomm Snapdragon</p>
61+
<Icon name="tabler:device-mobile" class="h-5 w-5 text-white/30 transition-colors duration-200 group-hover:text-primary/70" />
62+
<div>
63+
<p class="text-sm font-semibold text-white/85">ARM64</p>
64+
<p class="text-xs text-white/35">Qualcomm Snapdragon</p>
65+
</div>
6266
</button>
6367
</div>
6468
</div>
6569

6670
<!-- Step: loading-langs -->
6771
<div data-msdl-step="loading-langs" class="hidden">
68-
<div class="flex items-center gap-2.5 py-6 text-xs text-white/40">
69-
<span class="loading-spinner h-3.5 w-3.5 shrink-0" aria-hidden="true"></span>
70-
<span>Fetching languages&hellip;</span>
72+
<div class="flex flex-col items-center gap-3 py-10">
73+
<span class="loading-spinner h-4 w-4 shrink-0 opacity-40" aria-hidden="true"></span>
74+
<span class="text-xs text-white/30">Fetching languages&hellip;</span>
7175
</div>
7276
</div>
7377

7478
<!-- Step: select-lang -->
7579
<div data-msdl-step="select-lang" class="hidden">
76-
<div class="mb-4 flex items-center gap-2">
80+
<div class="mb-4 flex items-center gap-1.5">
7781
<button
7882
type="button"
7983
data-msdl-back
80-
class="flex items-center gap-1 rounded text-xs text-white/40 transition-colors duration-150 hover:text-white/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
84+
class="flex items-center gap-1 rounded text-xs text-white/35 transition-colors duration-150 hover:text-white/65 focus-visible:outline-none"
8185
>
8286
<Icon name="tabler:arrow-left" class="h-3.5 w-3.5" />
8387
Back
8488
</button>
85-
<span class="text-white/20">/</span>
86-
<span class="text-xs text-white/50" data-msdl-arch-label></span>
89+
<span class="text-white/15">/</span>
90+
<span class="text-[11px] font-medium text-white/40" data-msdl-arch-label></span>
8791
</div>
8892
<div class="space-y-3">
89-
9093
<div data-msdl-select-wrapper>
9194
<button
9295
type="button"
9396
data-msdl-select-trigger
94-
class="msdl-select-trigger flex w-full cursor-pointer items-center justify-between gap-2 rounded-md border border-white/[0.06] bg-white/[0.03] px-3 py-2 text-sm text-left transition-colors duration-150 hover:border-white/[0.10] hover:bg-white/[0.06] focus-visible:outline-none active:scale-[0.99]"
97+
class="msdl-select-trigger flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg border border-white/[0.07] bg-white/[0.03] px-3 py-2.5 text-sm text-left transition-colors duration-150 hover:border-white/[0.12] hover:bg-white/[0.05] focus-visible:outline-none active:scale-[0.99]"
9598
aria-haspopup="listbox"
9699
aria-expanded="false"
97100
>
98-
<span data-msdl-select-value class="text-white/35">Choose a language&hellip;</span>
101+
<span data-msdl-select-value class="text-white/30">Choose a language&hellip;</span>
99102
<svg
100103
data-msdl-select-chevron
101-
class="h-3.5 w-3.5 shrink-0 text-white/30 transition-transform duration-200"
104+
class="h-3.5 w-3.5 shrink-0 text-white/25 transition-transform duration-200"
102105
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
103106
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
104107
aria-hidden="true"
@@ -109,69 +112,77 @@ const tabItems = [
109112
<!-- Panel injected by JS -->
110113
</div>
111114

112-
<p class="text-xs text-white/35">
113-
Choose the same language you use on Windows — check <strong class="font-medium text-white/50">Settings &rarr; Time &amp; language</strong>.
115+
<p class="text-xs text-white/30">
116+
Match your Windows display language — check <strong class="font-medium text-white/45">Settings &rarr; Time &amp; language</strong>.
114117
</p>
115118
<button
116119
type="button"
117120
data-msdl-get-download
118121
disabled
119-
class="flex w-full items-center justify-center gap-2 rounded-md px-4 py-2.5 text-sm font-medium text-white transition-transform duration-100 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 disabled:cursor-not-allowed disabled:opacity-40"
120-
style="background: linear-gradient(180deg, #2563eb 0%, #1e40af 100%);"
122+
class="iso-get-download-btn flex w-full items-center justify-center gap-2 rounded-lg px-4 py-2.5 text-sm font-medium text-white transition-all duration-150 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-35"
121123
>
122124
Get download link
123-
<Icon name="tabler:arrow-right" class="h-4 w-4" />
125+
<Icon name="tabler:arrow-right" class="h-4 w-4 transition-transform duration-150" />
124126
</button>
125127
</div>
126128
</div>
127129

128130
<!-- Step: loading-download -->
129131
<div data-msdl-step="loading-download" class="hidden">
130-
<div class="flex items-center gap-2.5 py-6 text-xs text-white/40">
131-
<span class="loading-spinner h-3.5 w-3.5 shrink-0" aria-hidden="true"></span>
132-
<span>Generating link&hellip;</span>
132+
<div class="flex flex-col items-center gap-3 py-10">
133+
<span class="loading-spinner h-4 w-4 shrink-0 opacity-40" aria-hidden="true"></span>
134+
<span class="text-xs text-white/30">Generating link&hellip;</span>
133135
</div>
134136
</div>
135137

136138
<!-- Step: done -->
137139
<div data-msdl-step="done" class="hidden">
138-
<div class="mb-3 flex items-center gap-2">
139-
<Icon name="tabler:circle-check-filled" class="h-4 w-4 shrink-0 text-green-400" />
140-
<p class="text-sm font-medium text-white/80">Download started</p>
140+
<div class="flex flex-col items-center py-6 text-center">
141+
<div class="iso-success-rings relative mb-4 flex h-14 w-14 items-center justify-center">
142+
<div class="iso-success-ring-outer absolute inset-0 rounded-full border border-green-500/[0.12]"></div>
143+
<div class="iso-success-ring-inner absolute inset-2 rounded-full border border-green-500/20 bg-green-500/[0.04]"></div>
144+
<Icon name="tabler:check" class="relative z-10 h-5 w-5 text-green-400" />
145+
</div>
146+
<p class="mb-1 text-sm font-semibold text-white/90">Download started</p>
147+
<p class="text-xs text-white/35">Your ISO file is being downloaded</p>
141148
</div>
142-
<div class="mb-1 rounded-md border border-white/[0.06] bg-white/[0.03] p-3">
143-
<p class="mb-2 text-xs text-white/35">Didn&rsquo;t start automatically?</p>
144-
<div data-msdl-download-links class="space-y-1.5"></div>
149+
150+
<div class="rounded-lg border border-white/[0.05] bg-white/[0.02]">
151+
<div class="border-b border-white/[0.04] px-3 py-2">
152+
<p class="text-[10px] font-semibold uppercase tracking-widest text-white/20">Didn&rsquo;t start? Download manually</p>
153+
</div>
154+
<div data-msdl-download-links class="space-y-px p-2"></div>
145155
</div>
156+
146157
<button
147158
type="button"
148159
data-msdl-restart
149-
class="mt-2 flex items-center gap-1 rounded text-xs text-white/35 transition-colors duration-150 hover:text-white/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
160+
class="mt-4 flex items-center gap-1.5 text-xs text-white/25 transition-colors duration-150 hover:text-white/50 focus-visible:outline-none"
150161
>
151-
<Icon name="tabler:arrow-left" class="h-3.5 w-3.5" />
162+
<Icon name="tabler:arrow-left" class="h-3 w-3" />
152163
Start over
153164
</button>
154165
</div>
155166

156167
<div data-msdl-step="error" class="hidden">
157-
<div class="mb-3 flex items-start gap-2.5 rounded-md border border-red-500/[0.15] bg-red-500/[0.04] p-3">
158-
<Icon name="tabler:alert-circle" class="mt-0.5 h-4 w-4 shrink-0 text-red-400/80" />
159-
<p class="text-xs leading-relaxed text-white/55" data-msdl-error-msg></p>
168+
<div class="mb-4 flex items-start gap-3 rounded-lg border border-red-500/[0.12] bg-red-500/[0.03] p-3.5">
169+
<Icon name="tabler:alert-circle" class="mt-0.5 h-4 w-4 shrink-0 text-red-400/70" />
170+
<p class="text-xs leading-relaxed text-white/50" data-msdl-error-msg></p>
160171
</div>
161-
<div class="flex gap-2">
172+
<div class="flex items-center gap-3">
162173
<button
163174
type="button"
164175
data-msdl-retry
165-
class="flex items-center gap-1.5 rounded text-xs text-white/40 transition-colors duration-150 hover:text-white/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
176+
class="flex items-center gap-1.5 rounded text-xs text-white/35 transition-colors duration-150 hover:text-white/65 focus-visible:outline-none"
166177
>
167178
<Icon name="tabler:refresh" class="h-3.5 w-3.5" />
168179
Retry
169180
</button>
170-
<span class="text-white/20">·</span>
181+
<span class="h-3 w-px bg-white/10"></span>
171182
<button
172183
type="button"
173184
data-msdl-restart
174-
class="flex items-center gap-1.5 rounded text-xs text-white/40 transition-colors duration-150 hover:text-white/70 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50"
185+
class="text-xs text-white/35 transition-colors duration-150 hover:text-white/65 focus-visible:outline-none"
175186
>
176187
Start over
177188
</button>
@@ -228,8 +239,8 @@ const tabItems = [
228239
@keyframes msdl-in {
229240
from {
230241
opacity: 0;
231-
transform: translateY(5px);
232-
filter: blur(3px);
242+
transform: translateY(6px);
243+
filter: blur(4px);
233244
}
234245
to {
235246
opacity: 1;
@@ -238,6 +249,72 @@ const tabItems = [
238249
}
239250
}
240251

252+
/* Architecture selection cards */
253+
.iso-arch-btn {
254+
transition:
255+
border-color 180ms cubic-bezier(0.33, 1, 0.68, 1),
256+
background-color 180ms cubic-bezier(0.33, 1, 0.68, 1),
257+
box-shadow 180ms cubic-bezier(0.33, 1, 0.68, 1),
258+
transform 100ms cubic-bezier(0.33, 1, 0.68, 1);
259+
}
260+
261+
.iso-arch-btn:hover {
262+
border-color: color-mix(in oklch, var(--color-primary) 35%, transparent);
263+
background-color: color-mix(in oklch, var(--color-primary) 5%, transparent);
264+
box-shadow:
265+
0 0 0 1px color-mix(in oklch, var(--color-primary) 8%, transparent),
266+
0 4px 16px color-mix(in oklch, var(--color-primary) 6%, transparent);
267+
}
268+
269+
/* Get download link button */
270+
.iso-get-download-btn {
271+
background: linear-gradient(
272+
160deg,
273+
color-mix(in oklch, var(--color-primary) 90%, white 10%) 0%,
274+
color-mix(in oklch, var(--color-primary) 70%, black 30%) 100%
275+
);
276+
box-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 0 0 1px color-mix(in oklch, var(--color-primary) 40%, transparent);
277+
}
278+
279+
.iso-get-download-btn:not(:disabled):hover {
280+
box-shadow: 0 2px 8px color-mix(in oklch, var(--color-primary) 25%, transparent), 0 0 0 1px color-mix(in oklch, var(--color-primary) 50%, transparent);
281+
transform: translateY(-1px);
282+
}
283+
284+
.iso-get-download-btn:not(:disabled):hover svg {
285+
transform: translateX(2px);
286+
}
287+
288+
.iso-get-download-btn:not(:disabled):active {
289+
transform: scale(0.98) translateY(0);
290+
}
291+
292+
/* Success state rings */
293+
.iso-success-rings {
294+
animation: iso-success-pop 400ms cubic-bezier(0.32, 0.72, 0, 1) both;
295+
}
296+
297+
.iso-success-ring-outer {
298+
animation: iso-ring-pulse 2.4s ease-in-out 300ms infinite;
299+
}
300+
301+
@keyframes iso-success-pop {
302+
from {
303+
opacity: 0;
304+
transform: scale(0.7);
305+
}
306+
to {
307+
opacity: 1;
308+
transform: scale(1);
309+
}
310+
}
311+
312+
@keyframes iso-ring-pulse {
313+
0%, 100% { opacity: 0.5; transform: scale(1); }
314+
50% { opacity: 1; transform: scale(1.08); }
315+
}
316+
317+
/* Dropdown panel */
241318
.msdl-select-panel {
242319
transform-origin: top center;
243320
animation: msdl-dropdown-in 180ms cubic-bezier(0.33, 1, 0.68, 1) both;
@@ -259,19 +336,23 @@ const tabItems = [
259336

260337
.msdl-options-scroll {
261338
scrollbar-width: thin;
262-
scrollbar-color: rgba(255, 255, 255, 0.08) transparent;
339+
scrollbar-color: rgba(255, 255, 255, 0.06) transparent;
263340
}
264-
.msdl-options-scroll::-webkit-scrollbar { width: 4px; }
341+
.msdl-options-scroll::-webkit-scrollbar { width: 3px; }
265342
.msdl-options-scroll::-webkit-scrollbar-track { background: transparent; }
266343
.msdl-options-scroll::-webkit-scrollbar-thumb {
267-
background: rgba(255, 255, 255, 0.08);
344+
background: rgba(255, 255, 255, 0.07);
268345
border-radius: 2px;
269346
}
270347

271348
@media (prefers-reduced-motion: reduce) {
272349
.msdl-widget [data-msdl-step],
273-
.msdl-select-panel {
350+
.msdl-select-panel,
351+
.iso-arch-btn,
352+
.iso-success-rings,
353+
.iso-success-ring-outer {
274354
animation: none;
355+
transition: none;
275356
}
276357
}
277358
</style>
@@ -581,8 +662,8 @@ const tabItems = [
581662
link.target = '_blank';
582663
link.rel = 'noopener noreferrer';
583664
link.className =
584-
'flex items-center gap-2 text-xs text-primary transition-opacity duration-150 hover:opacity-70';
585-
link.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/><path d="M7 11l5 5 5-5"/><path d="M12 4v12"/></svg><span class="truncate font-medium">${filename}</span>`;
665+
'flex w-full items-center gap-2.5 rounded-md px-2.5 py-2 text-xs text-white/60 transition-colors duration-150 hover:bg-white/[0.04] hover:text-white/85';
666+
link.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 shrink-0 text-white/30" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/><path d="M7 11l5 5 5-5"/><path d="M12 4v12"/></svg><span class="truncate font-medium">${filename}</span>`;
586667
linksContainer.appendChild(link);
587668

588669
if (!didAutoDownload && index === 0) {

0 commit comments

Comments
 (0)