Ku6epXBOCTuK/twitch-panels
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add aria label, fix test, transition constant for better testing

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-02-09 09:37:13 +05:00
parent ede31942d0
commit 2bbe59107c
12 changed files with 232 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/panel/PreviewControls.svelte
+2 -5
View File
@@ -1,7 +1,6 @@
<script lang="ts">
import Button from "$components/ui/Button.svelte";
import type { SlideDirectionType } from "$lib/constants";
import { PANEL_SETTINGS } from "$lib/constants";
import ChevronLeft from "~icons/lucide/chevron-left";
import ChevronRight from "~icons/lucide/chevron-right";
@@ -25,13 +24,11 @@
if (current < max - 1) current++;
direction = "next";
}
let xDirection = $derived(direction == "next" ? PANEL_SETTINGS.PANEL_WIDTH : -PANEL_SETTINGS.PANEL_WIDTH);
</script>
<Button icon={ChevronLeft} type="mini" onclick={prev} disabled={isFirst} />
<Button icon={ChevronLeft} ariaLabel="Previous slide" type="mini" onclick={prev} disabled={isFirst} />
<span class="panel-indicator">{current + 1} / {max}</span>
<Button icon={ChevronRight} type="mini" onclick={next} disabled={isLast} />
<Button icon={ChevronRight} ariaLabel="Next slide" type="mini" onclick={next} disabled={isLast} />
<style>
.panel-indicator {
src/components/panel/PreviewManager.svelte
+5 -5
View File
@@ -2,7 +2,7 @@
import Card from "$components/layout/Card.svelte";
import Badge from "$components/ui/Badge.svelte";
import Button from "$components/ui/Button.svelte";
import { PANEL_SETTINGS, type SlideDirectionType } from "$lib/constants";
import { PANEL_SETTINGS, TRANSITION_DURATION, type SlideDirectionType } from "$lib/constants";
import { downloadService, type DownloadItem } from "$services/downloadService";
import { konvaAllStagesState } from "$states/konvaAllStages.svelte";
import { konvaStageState } from "$states/konvaStage.svelte";
@@ -62,8 +62,8 @@
{@const text = textsState?.texts[current]?.text}
<div
class="konva-wrapper"
in:fly={{ x: xDirection, duration: 300 }}
out:fly={{ x: -xDirection, duration: 300 }}
in:fly={{ x: xDirection, duration: TRANSITION_DURATION }}
out:fly={{ x: -xDirection, duration: TRANSITION_DURATION }}
>
<Preview {text} bind:stage={konvaStageState.stage} />
</div>
@@ -77,8 +77,8 @@
</div>
<div class="panel-actions">
<Button label="Скачать всё" icon={Download} onclick={downloadAll} />
<Button label="Скачать" type="outline" icon={Download} onclick={downloadCurrent} />
<Button label="Скачать всё" ariaLabel="Download all" icon={Download} onclick={downloadAll} />
<Button label="Скачать" ariaLabel="Download current" type="outline" icon={Download} onclick={downloadCurrent} />
</div>
</div>
</Card>