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

Merge pull request #8 from Ku6epXBOCTuK/style/animations

Browse Source 
style: change inline edit animations
This commit is contained in:
Ku6epXBOCTuK
2026-02-23 14:04:10 +05:00
committed by GitHub
parent 63f0e7a056 eaddc366ef
commit 7207f8d72a
2 changed files with 14 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/text/TextInlineEdit.svelte
+13 -4
View File
@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import Button from "$components/ui/Button.svelte"; import Button from "$components/ui/Button.svelte";
import { TRANSITION_DURATION } from "$lib/constants"; import { TRANSITION_DURATION } from "$lib/constants";
import { fly } from "svelte/transition"; import { fly, slide } from "svelte/transition";
import Cross from "~icons/lucide/x"; import Cross from "~icons/lucide/x";
interface Props { interface Props {
@@ -13,9 +13,18 @@
let { text = $bindable(), id, ondelete }: Props = $props(); let { text = $bindable(), id, ondelete }: Props = $props();
</script> </script>
<li class="text-item" transition:fly={{ x: 600, duration: TRANSITION_DURATION }}> <li
<input type="text" bind:value={text} /> in:slide={{ duration: TRANSITION_DURATION / 2 }}
<Button icon={Cross} ariaLabel="Delete" type="danger" onclick={() => ondelete(id)} /> out:slide={{ duration: TRANSITION_DURATION / 2, delay: TRANSITION_DURATION }}
>
<div
class="text-item"
in:fly={{ x: 600, duration: TRANSITION_DURATION, delay: TRANSITION_DURATION }}
out:fly={{ x: 600, duration: TRANSITION_DURATION }}
>
<input type="text" bind:value={text} />
<Button icon={Cross} ariaLabel="Delete" type="danger" onclick={() => ondelete(id)} />
</div>
</li> </li>
<style> <style>
src/lib/constants.ts
+1 -1
View File
@@ -99,4 +99,4 @@ export const Theme = {
export type ThemeType = (typeof Theme)[keyof typeof Theme]; export type ThemeType = (typeof Theme)[keyof typeof Theme];
export const TRANSITION_DURATION = import.meta.env.MODE === "test" ? 0 : 300; export const TRANSITION_DURATION = import.meta.env.MODE === "test" ? 0 : 200;