gitbutlerapp/gitbutler
1
1
Fork 0
mirror of https://github.com/gitbutlerapp/gitbutler.git synced 2024-10-26 13:12:25 +03:00
Code Issues Packages Projects Releases Wiki Activity

support buttons with icons

Browse Source
This commit is contained in:
Nikita Galaiko 2023-03-31 14:55:39 +02:00
parent b514bb4400
commit f56362929e
4 changed files with 45 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/lib/components/Breadcrumbs.svelte
View File

@ -13,7 +13,7 @@
class="button-home group cursor-default rounded-md p-2 hover:bg-zinc-700 hover:text-zinc-200"
href="/"
>
<IconHome class="group-hover:fill-zinc-300 group-hover:text-zinc-200" />
<IconHome class="hover:fill-zinc-300 hover:text-zinc-200" />
</a>
{#if $project}

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

@ -1,5 +1,6 @@
<script lang="ts">
import { Meta, Story } from '@storybook/addon-svelte-csf';
import { IconHome } from '../icons';
import Button from './Button.svelte';
@ -12,6 +13,31 @@
<Button on:click={() => count++} label="You clicked: {count}" />
</Story>
<Story name="Basic With Icon">
<Button on:click={() => count++} label="You clicked: {count}">
<svelte:fragment slot="icon">
<IconHome />
</svelte:fragment>
</Button>
</Story>
<Story name="Small With Icon">
<Button on:click={() => count++} label="You clicked: {count}" small>
<svelte:fragment slot="icon">
<IconHome />
</svelte:fragment>
</Button>
</Story>
<Story name="Wide With Icon">
<Button on:click={() => count++} label="You clicked: {count}" wide>
<svelte:fragment slot="icon">
<IconHome />
</svelte:fragment>
</Button>
</Story>
<Story name="Basic Outlined">
<Button on:click={() => count++} label="You clicked: {count}" outlined />
</Story>
@ -43,3 +69,7 @@
<Story name="Primary Outlined Small">
<Button on:click={() => count++} label="You clicked: {count}" primary outlined small />
</Story>
<Story name="Link button">
<Button href="https://gitbutler.com" label="GitButler" />
</Story>

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

@ -62,19 +62,28 @@ And the following optional props:
class:btn-width-normal={wide}
class:btn-width-small={!wide}
>
{#if $$slots.icon}
<div class="icon">
<slot name="icon" />
</div>
{/if}
{label}
</button>
{/if}
<style lang="postcss">
.icon {
@apply h-4 w-4 text-zinc-50;
}
.btn-base {
@apply flex items-center justify-center rounded text-base text-zinc-50 shadow transition ease-in-out;
@apply flex w-fit items-center justify-center gap-2 whitespace-nowrap rounded text-base text-zinc-50 shadow transition ease-in-out;
border-top: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(255, 255, 255, 0);
border-right: 1px solid rgba(255, 255, 255, 0);
text-shadow: 0px 2px #00000021;
white-space: nowrap;
}
.btn-disabled {

6
src/lib/components/icons/IconHome.svelte
View File

@ -5,15 +5,15 @@
<svg
class={className}
xmlns="http://www.w3.org/2000/svg"
width="14"
height="14"
viewBox="0 0 14 14"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.5547 0.16795C7.2188 -0.0559832 6.7812 -0.0559832 6.4453 0.16795L0.8906 3.87108C0.334202 4.24201 0 4.86648 0 5.53518V12C0 13.1046 0.895431 14 2 14H4C4.55228 14 5 13.5523 5 13V9H9V13C9 13.5523 9.44771 14 10 14H12C13.1046 14 14 13.1046 14 12V5.53518C14 4.86648 13.6658 4.24202 13.1094 3.87108L7.5547 0.16795Z"
fill="#5C5F62"
class={className}
stroke-width="0"
fill="currentColor"
/>
</svg>