Skip to content

Commit 5d929e7

Browse files
WarningImHack3rWarningImHack3r
committed
feat: animate buttons
1 parent c41ca75 commit 5d929e7

File tree

10 files changed

+51
-32
lines changed

10 files changed

+51
-32
lines changed

‎src/lib/components/AnimatedButton.svelte‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script lang="ts" module>
2+
export const animatedClasses = "transition-transform active:scale-[0.97]";
3+
</script>
4+
5+
<script lang="ts">
6+
import Button, { type ButtonProps } from "./ui/button/button.svelte";
7+
8+
let { class: className, ...rest }: ButtonProps = $props();
9+
</script>
10+
11+
<Button {...rest} class={[className, rest.variant !== "link" && animatedClasses]} />

‎src/lib/components/MarkdownRenderer.svelte‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
import Markdown, { type Plugin } from "svelte-exmarkdown";
1313
import { gfmPlugin } from "svelte-exmarkdown/gfm";
1414
import { cn } from "$lib/utils";
15-
import { Button } from "$lib/components/ui/button";
15+
import AnimatedButton from "./AnimatedButton.svelte";
1616
1717
type MdSnippets = Omit<ComponentProps<typeof Markdown>, "md" | "plugins">;
1818
@@ -75,9 +75,13 @@
7575
report this issue
7676
</a> if it's not already known.
7777
</span>
78-
<Button variant="outline" class="ml-auto border-primary/50 bg-red-300/30" onclick={reset}>
78+
<AnimatedButton
79+
variant="outline"
80+
class="ml-auto border-primary/50 bg-red-300/30"
81+
onclick={reset}
82+
>
7983
Retry
80-
</Button>
84+
</AnimatedButton>
8185
</div>
8286
<Markdown {md} {...snippets} />
8387
{/if}

‎src/lib/components/ReactionToast.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { ArrowUpRight } from "@lucide/svelte";
3-
import { Button } from "$lib/components/ui/button";
3+
import AnimatedButton from "./AnimatedButton.svelte";
44
55
type Props = {
66
href?: string;
@@ -11,10 +11,10 @@
1111
<h3 class="text-sm">Sorry, you can't react to stuff here!</h3>
1212
<div class="mt-1 flex justify-between gap-4">
1313
<h4 class="text-sm text-muted-foreground">Click here to open this content on GitHub</h4>
14-
<Button size="sm" variant="secondary" {href} target="_blank" class="group/button">
14+
<AnimatedButton size="sm" variant="secondary" {href} target="_blank" class="group/button">
1515
<img src="/github.svg" alt="GitHub" class="size-4 dark:invert" />
1616
<ArrowUpRight
1717
class="size-4 transition-transform duration-300 group-hover/button:translate-x-0.5 group-hover/button:-translate-y-0.5"
1818
/>
19-
</Button>
19+
</AnimatedButton>
2020
</div>

‎src/routes/+layout.svelte‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,10 @@
1212
import { news } from "$lib/news/news.json";
1313
import type { Entries } from "$lib/types";
1414
import { cn } from "$lib/utils";
15-
import { Button, buttonVariants } from "$lib/components/ui/button";
15+
import { buttonVariants } from "$lib/components/ui/button";
1616
import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
1717
import { Toaster } from "$lib/components/ui/sonner";
18+
import AnimatedButton from "$lib/components/AnimatedButton.svelte";
1819
import MarkdownRenderer from "$lib/components/MarkdownRenderer.svelte";
1920
import ScreenSize from "$lib/components/ScreenSize.svelte";
2021
@@ -146,14 +147,14 @@
146147
{#each [{ link: resolve("/packages"), title: "Packages" }, { link: resolve("/tracker"), title: "Tracker" }, { link: resolve("/devlog"), title: "Devlog" }] as { link, title } (link)}
147148
{@const disabled = page.url.pathname.startsWith(link)}
148149
<li>
149-
<Button
150+
<AnimatedButton
150151
href={disabled ? undefined : link}
151152
variant="ghost"
152153
class="hover:bg-accent/75"
153154
{disabled}
154155
>
155156
{title}
156-
</Button>
157+
</AnimatedButton>
157158
</li>
158159
{/each}
159160
</ul>
@@ -162,19 +163,19 @@
162163
<!-- Right part -->
163164
<div class="flex flex-1 items-center justify-end space-x-2 sm:space-x-4">
164165
<nav class="flex items-center space-x-1">
165-
<Button
166+
<AnimatedButton
166167
href="https://github.com/WarningImHack3r/svelte-changelog"
167168
target="_blank"
168169
variant="ghost"
169170
size="icon"
170171
>
171172
<img src="/github.svg" alt="GitHub" class="size-5 dark:invert" />
172173
<span class="sr-only">Visit the repository</span>
173-
</Button>
174+
</AnimatedButton>
174175
<DropdownMenu.Root bind:open={themeSwitcherOpen}>
175176
<DropdownMenu.Trigger>
176177
{#snippet child({ props })}
177-
<Button {...props} variant="ghost" size="icon" class="w-14 gap-1">
178+
<AnimatedButton {...props} variant="ghost" size="icon" class="w-14 gap-1">
178179
<div class="flex items-center">
179180
<Sun
180181
class="!size-5 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
@@ -189,7 +190,7 @@
189190
: ''}"
190191
/>
191192
<span class="sr-only">Change theme</span>
192-
</Button>
193+
</AnimatedButton>
193194
{/snippet}
194195
</DropdownMenu.Trigger>
195196
<DropdownMenu.Content>
@@ -235,13 +236,13 @@
235236
inline
236237
class="mx-auto my-1 px-4 text-center text-foreground prose-a:font-semibold prose-a:text-foreground prose-a:underline"
237238
/>
238-
<Button
239+
<AnimatedButton
239240
variant="ghost"
240241
class="mr-4 h-auto rounded-none px-3 py-2 transition-transform hover:scale-110 hover:rotate-90 hover:bg-background/0"
241242
onclick={markCurrentNewsAsRead}
242243
>
243244
<X class="size-4" />
244-
</Button>
245+
</AnimatedButton>
245246
</div>
246247
{/if}
247248
</header>

‎src/routes/[pid=pid]/[org]/[repo]/[id=number]/PageRenderer.svelte‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,7 @@
6666
import { Button } from "$lib/components/ui/button";
6767
import { Separator } from "$lib/components/ui/separator";
6868
import * as Tooltip from "$lib/components/ui/tooltip";
69+
import AnimatedButton from "$lib/components/AnimatedButton.svelte";
6970
import GHBadge from "$lib/components/GHBadge.svelte";
7071
import MarkdownRenderer from "$lib/components/MarkdownRenderer.svelte";
7172
import Reactions from "$lib/components/Reactions.svelte";
@@ -739,7 +740,7 @@
739740
{#if linkedEntities.length > 0}
740741
<div class="flex flex-wrap justify-end gap-4">
741742
{#each linkedEntities as closingIssue (closingIssue.number)}
742-
<Button
743+
<AnimatedButton
743744
href={resolve("/[pid=pid]/[org]/[repo]/[id=number]", {
744745
pid: metadata.type === "pull" ? "issues" : "pull",
745746
org: closingIssue.repository.owner,
@@ -754,11 +755,11 @@
754755
{:else}
755756
{closingIssue.repository.owner}/{closingIssue.repository.name}#{closingIssue.number}
756757
{/if}
757-
</Button>
758+
</AnimatedButton>
758759
{/each}
759760
</div>
760761
{/if}
761-
<Button href={info.html_url} target="_blank" class="group gap-0 dark:text-black">
762+
<AnimatedButton href={info.html_url} target="_blank" class="group gap-0 dark:text-black">
762763
Open {metadata.type === "pull"
763764
? "pull request"
764765
: metadata.type === "issue"
@@ -767,7 +768,7 @@
767768
<ArrowUpRight
768769
class="ml-2 size-4 transition-transform duration-300 group-hover:translate-x-1 group-hover:-translate-y-1"
769770
/>
770-
</Button>
771+
</AnimatedButton>
771772
</div>
772773
</div>
773774

‎src/routes/package/+layout.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
import { onNavigate } from "$app/navigation";
33
import { page } from "$app/state";
44
import { Menu } from "@lucide/svelte";
5-
import { Button } from "$lib/components/ui/button";
65
import * as Sheet from "$lib/components/ui/sheet";
6+
import AnimatedButton from "$lib/components/AnimatedButton.svelte";
77
import SidePanel from "./SidePanel.svelte";
88
import { initPackageSettings } from "./settings.svelte";
99
@@ -27,7 +27,7 @@
2727
<Sheet.Root bind:open>
2828
<Sheet.Trigger>
2929
{#snippet child({ props })}
30-
<Button
30+
<AnimatedButton
3131
{...props}
3232
variant="secondary"
3333
class={[
@@ -37,7 +37,7 @@
3737
>
3838
<Menu />
3939
<span class="sr-only">Menu</span>
40-
</Button>
40+
</AnimatedButton>
4141
{/snippet}
4242
</Sheet.Trigger>
4343
<Sheet.Content class="overflow-y-auto">

‎src/routes/package/[...package]/+page.svelte‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
import { getPackageSettings } from "../settings.svelte";
1818
import type { Snapshot } from "./$types";
1919
import ReleaseCard from "./ReleaseCard.svelte";
20+
import AnimatedButton from "$lib/components/AnimatedButton.svelte";
2021
2122
const loadingSentences = [
2223
"Loading",
@@ -183,15 +184,15 @@
183184
<Collapsible.Root class="flex items-center">
184185
<Collapsible.Trigger>
185186
{#snippet child({ props })}
186-
<Button
187+
<AnimatedButton
187188
{...props}
188189
variant="ghost"
189190
size="sm"
190191
class="peer h-6 !px-1 data-[state=open]:text-primary"
191192
>
192193
<Rss />
193194
<span class="sr-only">RSS</span>
194-
</Button>
195+
</AnimatedButton>
195196
<ChevronRight
196197
class="size-4 -translate-x-1 scale-75 opacity-0 transition-all peer-hover:translate-x-0 peer-hover:scale-100 peer-hover:opacity-100 peer-data-[state=open]:translate-x-0 peer-data-[state=open]:scale-100 peer-data-[state=open]:rotate-180 peer-data-[state=open]:opacity-100"
197198
/>

‎src/routes/package/[...package]/ReleaseCard.svelte‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
import type { GitHubRelease } from "$lib/server/github-cache";
1010
import * as Accordion from "$lib/components/ui/accordion";
1111
import { Badge } from "$lib/components/ui/badge";
12-
import { Button } from "$lib/components/ui/button";
1312
import * as Tooltip from "$lib/components/ui/tooltip";
13+
import AnimatedButton from "$lib/components/AnimatedButton.svelte";
1414
import MarkdownRenderer from "$lib/components/MarkdownRenderer.svelte";
1515
import Reactions from "$lib/components/Reactions.svelte";
1616
import ListElementRenderer from "$lib/components/renderers/ListElementRenderer.svelte";
@@ -325,8 +325,8 @@
325325
<!-- Reactions -->
326326
<Reactions reactions={release.reactions} reactionItemUrl={release.html_url} />
327327
<!-- Open the release on GitHub in a new tab -->
328-
<Button variant="outline" size="sm" class="invisible w-16 sm:w-36" />
329-
<Button
328+
<AnimatedButton variant="outline" size="sm" class="invisible w-16 sm:w-36" />
329+
<AnimatedButton
330330
href={release.html_url}
331331
variant="outline"
332332
size="sm"
@@ -342,7 +342,7 @@
342342
<ArrowUpRight
343343
class="ml-2 size-4 transition-transform duration-300 sm:group-hover:translate-x-1 sm:group-hover:-translate-y-1"
344344
/>
345-
</Button>
345+
</AnimatedButton>
346346
</div>
347347
</div>
348348
</Accordion.Content>

‎src/routes/tracker/[org]/[repo]/+layout.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
import { resolve } from "$app/paths";
44
import { Menu } from "@lucide/svelte";
55
import { uniqueRepos } from "$lib/repositories";
6-
import { Button } from "$lib/components/ui/button";
76
import * as Sheet from "$lib/components/ui/sheet";
87
import RepoSidePanel from "./RepoSidePanel.svelte";
8+
import AnimatedButton from "$lib/components/AnimatedButton.svelte";
99
1010
let { params, children } = $props();
1111
@@ -50,14 +50,14 @@
5050
<Sheet.Root bind:open>
5151
<Sheet.Trigger>
5252
{#snippet child({ props })}
53-
<Button
53+
<AnimatedButton
5454
{...props}
5555
variant="secondary"
5656
class="absolute right-0 mt-12 ml-auto sm:mt-16 lg:hidden"
5757
>
5858
<Menu />
5959
<span class="sr-only">Menu</span>
60-
</Button>
60+
</AnimatedButton>
6161
{/snippet}
6262
</Sheet.Trigger>
6363
<Sheet.Content class="overflow-y-auto">

‎src/routes/tracker/[org]/[repo]/+page.svelte‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
import { buttonVariants } from "$lib/components/ui/button";
77
import * as Dialog from "$lib/components/ui/dialog";
88
import { Separator } from "$lib/components/ui/separator";
9+
import { animatedClasses } from "$lib/components/AnimatedButton.svelte";
910
import GHBadge from "$lib/components/GHBadge.svelte";
1011
import MarkdownRenderer from "$lib/components/MarkdownRenderer.svelte";
1112
@@ -181,7 +182,7 @@
181182
<Dialog.Root>
182183
<Dialog.Trigger
183184
class={[
184-
buttonVariants({ variant: "ghost", size: "sm" }),
185+
buttonVariants({ variant: "ghost", size: "sm", class: animatedClasses }),
185186
"!h-4 !rounded-full !px-0 pt-0.5"
186187
]}
187188
>

0 commit comments

Comments
 (0)