mirror of
https://github.com/gitbutlerapp/gitbutler.git
synced 2024-10-26 13:12:25 +03:00
add loading state
This commit is contained in:
Nikita Galaiko
parent
9b564198d3
commit
375bbcda55
@ -25,8 +25,12 @@
|
||||
{#each [true, false] as filled}
|
||||
{#each content as [icon, label]}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button role="basic" {filled} {disabled} {height} {width} {icon}>{label}</Button>
|
||||
{#each [false, true] as loading}
|
||||
{#each [false, true] as disabled}
|
||||
<Button role="basic" {filled} {disabled} {height} {width} {icon} {loading}>
|
||||
{label}
|
||||
</Button>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
@ -45,9 +49,12 @@
|
||||
{#each [true, false] as filled}
|
||||
{#each content as [icon, label]}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button role="primary" {filled} {disabled} {height} {width} {icon}>{label}</Button
|
||||
>
|
||||
{#each [false, true] as loading}
|
||||
{#each [false, true] as disabled}
|
||||
<Button role="primary" {filled} {disabled} {height} {width} {icon} {loading}>
|
||||
{label}
|
||||
</Button>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
@ -66,10 +73,20 @@
|
||||
{#each [true, false] as filled}
|
||||
{#each content as [icon, label]}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button role="destructive" {filled} {disabled} {height} {width} {icon}
|
||||
>{label}</Button
|
||||
>
|
||||
{#each [false, true] as loading}
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
role="destructive"
|
||||
{filled}
|
||||
{disabled}
|
||||
{height}
|
||||
{width}
|
||||
{icon}
|
||||
{loading}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
@ -89,17 +106,20 @@
|
||||
{#each content as [icon, label]}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
href="https://gitbutler.com"
|
||||
role="basic"
|
||||
{filled}
|
||||
{disabled}
|
||||
{height}
|
||||
{width}
|
||||
{icon}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
{#each [false, true] as loading}
|
||||
<Button
|
||||
href="https://gitbutler.com"
|
||||
role="basic"
|
||||
{filled}
|
||||
{disabled}
|
||||
{height}
|
||||
{width}
|
||||
{icon}
|
||||
{loading}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
@ -118,18 +138,21 @@
|
||||
{#each [true, false] as filled}
|
||||
{#each content as [icon, label]}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
href="https://gitbutler.com"
|
||||
role="primary"
|
||||
{filled}
|
||||
{disabled}
|
||||
{height}
|
||||
{width}
|
||||
{icon}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
{#each [false, true] as loading}
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
href="https://gitbutler.com"
|
||||
role="primary"
|
||||
{filled}
|
||||
{disabled}
|
||||
{height}
|
||||
{width}
|
||||
{icon}
|
||||
{loading}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
@ -148,18 +171,21 @@
|
||||
{#each [true, false] as filled}
|
||||
{#each content as [icon, label]}
|
||||
<div class="flex gap-2">
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
href="https://gitbutler.com"
|
||||
role="destructive"
|
||||
{filled}
|
||||
{disabled}
|
||||
{height}
|
||||
{width}
|
||||
{icon}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
{#each [false, true] as loading}
|
||||
{#each [false, true] as disabled}
|
||||
<Button
|
||||
href="https://gitbutler.com"
|
||||
role="destructive"
|
||||
{filled}
|
||||
{disabled}
|
||||
{height}
|
||||
{width}
|
||||
{icon}
|
||||
{loading}
|
||||
>
|
||||
{label}
|
||||
</Button>
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import type { ComponentType } from 'svelte';
|
||||
import { IconLoading } from '../icons';
|
||||
|
||||
export let role: 'basic' | 'primary' | 'destructive' = 'basic';
|
||||
export let filled = true;
|
||||
@ -10,37 +11,75 @@
|
||||
export let type: 'button' | 'submit' = 'button';
|
||||
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="{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 {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
|
||||
class:pointer-events-none={loading}
|
||||
class:outlined
|
||||
{type}
|
||||
on:click
|
||||
class:disabled
|
||||
on:click={onClick}
|
||||
>
|
||||
<svelte:component this={icon} class="h-[16px] w-[16px]" />
|
||||
<slot />
|
||||
{#if loading}
|
||||
{#if icon}
|
||||
<IconLoading class="h-[16px] w-[16px] animate-spin" />
|
||||
<slot />
|
||||
{:else}
|
||||
<div class="items-around absolute flex h-full w-full justify-center">
|
||||
<IconLoading class="h-[16px] w-[16px] animate-spin" />
|
||||
</div>
|
||||
<div class="opacity-0">
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<svelte:component this={icon} class="h-[16px] w-[16px]" />
|
||||
<slot />
|
||||
{/if}
|
||||
</a>
|
||||
{:else}
|
||||
<button
|
||||
class="{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 {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}
|
||||
class:filled
|
||||
class:outlined
|
||||
{disabled}
|
||||
{type}
|
||||
on:click
|
||||
class:disabled
|
||||
on:click={onClick}
|
||||
>
|
||||
<svelte:component this={icon} class="h-[16px] w-[16px]" />
|
||||
<slot />
|
||||
{#if loading}
|
||||
{#if icon}
|
||||
<IconLoading class="h-[16px] w-[16px] animate-spin" />
|
||||
<slot />
|
||||
{:else}
|
||||
<div class="items-around absolute flex h-full w-full justify-center">
|
||||
<IconLoading class="h-[16px] w-[16px] animate-spin" />
|
||||
</div>
|
||||
<div class="opacity-0">
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
<svelte:component this={icon} class="h-[16px] w-[16px]" />
|
||||
<slot />
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
|
||||
19
src/lib/components/icons/IconLoading.svelte
Normal file
19
src/lib/components/icons/IconLoading.svelte
Normal file
@ -0,0 +1,19 @@
|
||||
<script lang="ts">
|
||||
let className = '';
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
<svg
|
||||
class={className}
|
||||
width="17"
|
||||
height="18"
|
||||
viewBox="0 0 17 18"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10.2319 16.778C10.3291 17.3917 9.90965 17.9754 9.28864 17.9954C8.01444 18.0363 6.74156 17.8061 5.55585 17.3149C4.02239 16.6797 2.69445 15.6329 1.71885 14.2901C0.743241 12.9473 0.157971 11.3608 0.027744 9.70613C-0.102483 8.05145 0.227407 6.39298 0.980941 4.91409C1.73448 3.43519 2.8823 2.19348 4.29751 1.32624C5.71273 0.458995 7.3402 2.9673e-08 9 0C10.6598 -2.9673e-08 12.2873 0.458995 13.7025 1.32624C14.7968 1.99682 15.7312 2.89128 16.4471 3.94617C16.796 4.46028 16.5703 5.14275 16.0167 5.42482C15.4631 5.7069 14.7926 5.47939 14.4226 4.98026C13.9097 4.28843 13.2671 3.69827 12.5269 3.24468C11.4655 2.59425 10.2449 2.25 9 2.25C7.75515 2.25 6.53454 2.59425 5.47313 3.24468C4.41172 3.89511 3.55086 4.82639 2.98571 5.93556C2.42056 7.04473 2.17314 8.28859 2.27081 9.5296C2.36848 10.7706 2.80743 11.9604 3.53914 12.9676C4.27084 13.9747 5.26679 14.7598 6.41689 15.2362C7.21892 15.5684 8.07412 15.7414 8.93527 15.7497C9.55656 15.7557 10.1347 16.1644 10.2319 16.778Z"
|
||||
fill="#F4F4F5"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
@ -20,3 +20,4 @@ export { default as IconChevronLeft } from './IconChevronLeft.svelte';
|
||||
export { default as IconChevronRight } from './IconChevronRight.svelte';
|
||||
export { default as IconGitBranch } from './IconGitBranch.svelte';
|
||||
export { default as IconHome } from './IconHome.svelte';
|
||||
export { default as IconLoading } from './IconLoading.svelte';
|
||||
|
||||
Loading…
Reference in New Issue
Block a user