gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-11-24 05:29:51 +03:00
Code Issues Packages Projects Releases Wiki Activity

alert on stories click

Browse Source
This commit is contained in:
Nikita Galaiko 2023-03-31 19:40:42 +02:00
parent 375bbcda55
commit 1127203208
3 changed files with 24 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/lib/components/Button/Button.stories.svelte
View File

@ -27,7 +27,16 @@
<div class="flex gap-2">
{#each [false, true] as loading}
{#each [false, true] as disabled}
<Button role="basic" {filled} {disabled} {height} {width} {icon} {loading}>
<Button
role="basic"
{filled}
{disabled}
{height}
{width}
{icon}
{loading}
on:click={() => alert('Clicked!')}
>
{label}
</Button>
{/each}
@ -51,7 +60,16 @@
<div class="flex gap-2">
{#each [false, true] as loading}
{#each [false, true] as disabled}
<Button role="primary" {filled} {disabled} {height} {width} {icon} {loading}>
<Button
role="primary"
{filled}
{disabled}
{height}
{width}
{icon}
{loading}
on:click={() => alert('Clicked!')}
>
{label}
</Button>
{/each}
@ -83,6 +101,7 @@
{width}
{icon}
{loading}
on:click={() => alert('Clicked!')}
>
{label}
</Button>

14
src/lib/components/Button/Button.svelte
View File

@ -12,19 +12,12 @@
export let href: string | undefined = undefined;
export let icon: ComponentType | undefined = undefined;
export let loading = false;
const onClick = (e: MouseEvent) => {
if (loading) {
e.preventDefault();
e.stopPropagation();
}
};
</script>
{#if href}
<a
{href}
class="relative {role} flex w-fit justify-center gap-[10px] whitespace-nowrap rounded border text-base font-medium text-zinc-50 transition ease-in-out"
class="relative cursor-pointer {role} flex w-fit justify-center gap-[10px] whitespace-nowrap rounded border text-base font-medium text-zinc-50 transition ease-in-out"
class:small={height === 'small'}
class:long={width === 'long'}
class:filled
@ -32,7 +25,6 @@
class:outlined
{type}
class:disabled
on:click={onClick}
>
{#if loading}
{#if icon}
@ -53,7 +45,7 @@
</a>
{:else}
<button
class="relative {role} flex w-fit justify-center gap-[10px] whitespace-nowrap rounded border text-base font-medium text-zinc-50 transition ease-in-out"
class="relative cursor-pointer {role} flex w-fit justify-center gap-[10px] whitespace-nowrap rounded border text-base font-medium text-zinc-50 transition ease-in-out"
class:small={height === 'small'}
class:long={width === 'long'}
class:pointer-events-none={loading}
@ -62,7 +54,7 @@
{disabled}
{type}
class:disabled
on:click={onClick}
on:click
>
{#if loading}
{#if icon}

1
src/lib/components/icons/IconLoading.svelte
View File

@ -16,4 +16,3 @@
fill="#F4F4F5"
/>
</svg>