iptv-org-mirror/iptv-org.github.io
1
0
Fork 0
mirror of https://github.com/iptv-org/iptv-org.github.io.git synced 2025-05-12 01:50:05 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update buttons

Browse source
This commit is contained in:
freearhey 2023-10-10 18:10:35 +03:00
parent 53b4de0132
commit 5db8d14b33
6 changed files with 17 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/components/ActionButton.svelte
View file

@ -1,16 +1,18 @@
<script> <script>
export let disabled = false export let disabled = false
export let active = false
</script> </script>
<button <button
{...$$restProps} {...$$restProps}
class="rounded-md transition-colors duration-200 border border-transparent text-white text-sm font-semibold text-center px-4 h-10 flex items-center justify-center space-x-3 shrink-0 min-w-14 w-auto" class="rounded-md transition-colors duration-200 border border-transparent text-white text-sm font-semibold text-center h-10 flex items-center justify-center space-x-3 px-4"
class:bg-gray-200={disabled} class:bg-gray-200={disabled || active}
class:bg-primary-600={!disabled} class:bg-primary-600={!disabled && !active}
class:dark:bg-gray-700={disabled} class:dark:bg-gray-700={disabled || active}
class:dark:hover:bg-primary-500={!disabled} class:dark:hover:bg-primary-500={!disabled && !active}
class:hover:bg-gray-200={disabled} class:dark:hover:bg-gray-700={active}
class:hover:bg-primary-700={!disabled} class:hover:bg-gray-200={disabled || active}
class:hover:bg-primary-700={!disabled && !active}
class:pointer-events-none={disabled} class:pointer-events-none={disabled}
on:click on:click
> >

6
src/components/CreatePlaylistButton.svelte
View file

@ -8,9 +8,9 @@
</script> </script>
<ActionButton <ActionButton
disabled={$downloadMode} active={$downloadMode}
on:click={() => { on:click={() => {
downloadMode.set(true) downloadMode.set(!$downloadMode)
dispatch('click') dispatch('click')
}} }}
aria-label="Create Playlist" aria-label="Create Playlist"
@ -57,5 +57,5 @@
stroke-width="32" stroke-width="32"
/></svg /></svg
> >
</span><span class="hidden sm:inline">Create Playlist</span> </span><span class="hidden md:inline">Create Playlist</span>
</ActionButton> </ActionButton>

2
src/components/DefaultButton.svelte
View file

@ -2,7 +2,7 @@
{...$$restProps} {...$$restProps}
type="button" type="button"
on:click on:click
class="rounded-lg text-sm h-10 flex items-center justify-center text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 space-x-3 px-3" class="rounded-lg text-sm h-10 flex items-center justify-center text-gray-500 dark:text-gray-400 font-normal hover:bg-gray-100 dark:hover:bg-gray-700 space-x-3 px-4 border border-transparent"
> >
<slot /> <slot />
</button> </button>

2
src/components/DownloadButton.svelte
View file

@ -44,5 +44,5 @@
</svg> </svg>
</span> </span>
<span class="hidden sm:inline">Download Playlist</span> <span class="hidden md:inline">Download Playlist</span>
</ActionButton> </ActionButton>

2
src/components/OutlineButton.svelte
View file

@ -1,6 +1,6 @@
<button <button
{...$$restProps} {...$$restProps}
class="rounded-md bg-transparent transition-colors duration-200 border border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-700 text-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:border-gray-600 text-sm font-normal text-center px-4 h-10 flex items-center justify-center w-auto space-x-3 shrink-0 min-w-14" class="rounded-md bg-transparent transition-colors duration-200 border border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:bg-gray-700 text-gray-700 dark:text-white dark:hover:bg-gray-600 dark:hover:border-gray-600 text-sm font-normal text-center px-4 h-10 flex items-center justify-center space-x-3"
on:click on:click
> >
<slot /> <slot />

4
src/components/SelectAllButton.svelte
View file

@ -29,7 +29,7 @@
/> />
</svg> </svg>
</span> </span>
<span class="hidden sm:inline">Deselect All ({$selected.length})</span> <span class="hidden md:inline">Deselect All ({$selected.length})</span>
</OutlineButton> </OutlineButton>
{:else} {:else}
<OutlineButton on:click={selectAll} aria-label="Select All ({$filteredChannels.length})"> <OutlineButton on:click={selectAll} aria-label="Select All ({$filteredChannels.length})">
@ -48,6 +48,6 @@
</svg> </svg>
</span> </span>
<span class="hidden sm:inline">Select All ({$filteredChannels.length})</span> <span class="hidden md:inline">Select All ({$filteredChannels.length})</span>
</OutlineButton> </OutlineButton>
{/if} {/if}