mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-01-30 11:00:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

Better empty state for the gr.Gallery component (#2021)

Browse Source 
* add empty gallery icon

* increase height
This commit is contained in:
Dawood Khan 2022-08-16 14:12:21 -04:00 committed by GitHub
parent 75b51808e2
commit 5fa94e5f4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
ui/packages/app/src/components/Gallery/Gallery.svelte
View File

@ -148,22 +148,26 @@
class:max-h-[55vh]={style.height !== "auto"}
class:xl:min-h-[450px]={style.height !== "auto"}
>
<div class=" grid gap-2 {classes}" class:pt-6={show_label}>
{#each value as image, i}
<button
class="gallery-item"
on:click={() => (selected_image = can_zoom ? i : selected_image)}
>
<img
alt=""
class="h-full w-full overflow-hidden object-contain"
src={image}
/>
</button>
{:else}
<p>{$_("interface.empty")}</p>
{/each}
</div>
{#if value.length === 0}
<div class="h-full min-h-[15rem] flex justify-center items-center">
<div class="h-5 dark:text-white opacity-50"><Image /></div>
</div>
{:else}
<div class=" grid gap-2 {classes}" class:pt-6={show_label}>
{#each value as image, i}
<button
class="gallery-item"
on:click={() => (selected_image = can_zoom ? i : selected_image)}
>
<img
alt=""
class="h-full w-full overflow-hidden object-contain"
src={image}
/>
</button>
{/each}
</div>
{/if}
</div>
{/if}
</Block>