self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-24 10:37:28 +02:00
Code Issues Releases Activity

fix(web): show icons for empty album (#2604)

Browse Source
This commit is contained in:
Michel Heusschen 2023-05-29 20:58:09 +02:00 committed by GitHub
parent e7122d7a72
commit 3d505e425d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 41 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/lib/components/album-page/album-card.svelte
View File

@ -15,9 +15,9 @@
import { AlbumResponseDto, api, ThumbnailFormat, UserResponseDto } from '@api';
import { createEventDispatcher, onMount } from 'svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import noThumbnailUrl from '$lib/assets/no-thumbnail.png';
import { locale } from '$lib/stores/preferences.store';
import IconButton from '../elements/buttons/icon-button.svelte';
export let album: AlbumResponseDto;
export let isSharingView = false;
@ -82,7 +82,9 @@
on:click|stopPropagation|preventDefault={showAlbumContextMenu}
data-testid="context-button-parent"
>
<CircleIconButton logo={DotsVertical} size={'20'} />
<IconButton color="overlay-primary">
<DotsVertical size="20" />
</IconButton>
</div>
{/if}
@ -115,7 +117,10 @@
{album.assetCount.toLocaleString($locale)}
{album.assetCount == 1 ? `item` : `items`}
</p>
<p>·</p>
{#if isSharingView || album.shared}
<p>·</p>
{/if}
{#if isSharingView}
{#await getAlbumOwnerInfo() then albumOwner}

54
web/src/lib/components/album-page/album-viewer.svelte
View File

@ -4,7 +4,6 @@
import { albumAssetSelectionStore } from '$lib/stores/album-asset-selection.store';
import { downloadAssets } from '$lib/stores/download';
import { locale } from '$lib/stores/preferences.store';
import { clickOutside } from '$lib/utils/click-outside';
import { openFileUploadDialog } from '$lib/utils/file-uploader';
import {
AlbumResponseDto,
@ -376,16 +375,14 @@
</svelte:fragment>
<svelte:fragment slot="trailing">
{#if album.assetCount > 0}
{#if !isCreatingSharedAlbum}
{#if !sharedLink}
<CircleIconButton
title="Add Photos"
on:click={() => (isShowAssetSelection = true)}
logo={FileImagePlusOutline}
/>
{/if}
{#if sharedLink?.allowUpload}
{:else if sharedLink?.allowUpload}
<CircleIconButton
title="Add Photos"
on:click={() => openFileUploadDialog(album.id, sharedLink?.key)}
@ -393,7 +390,6 @@
/>
{/if}
<!-- Share and remove album -->
{#if isOwned}
<CircleIconButton
title="Share"
@ -402,7 +398,9 @@
/>
<CircleIconButton title="Remove album" on:click={removeAlbum} logo={DeleteOutline} />
{/if}
{/if}
{#if album.assetCount > 0 && !isCreatingSharedAlbum}
{#if !isPublicShared || (isPublicShared && sharedLink?.allowDownload)}
<CircleIconButton
title="Download"
@ -412,29 +410,31 @@
{/if}
{#if !isPublicShared && isOwned}
<div use:clickOutside on:outclick={() => (isShowAlbumOptions = false)}>
<CircleIconButton
title="Album options"
on:click={showAlbumOptionsMenu}
logo={DotsVertical}
>{#if isShowAlbumOptions}
<ContextMenu {...contextMenuPosition}>
<MenuOption
on:click={() => {
isShowThumbnailSelection = true;
isShowAlbumOptions = false;
}}
text="Set album cover"
/>
</ContextMenu>
{/if}
</CircleIconButton>
</div>
<CircleIconButton
title="Album options"
on:click={showAlbumOptionsMenu}
logo={DotsVertical}
>
{#if isShowAlbumOptions}
<ContextMenu
{...contextMenuPosition}
on:outclick={() => (isShowAlbumOptions = false)}
>
<MenuOption
on:click={() => {
isShowThumbnailSelection = true;
isShowAlbumOptions = false;
}}
text="Set album cover"
/>
</ContextMenu>
{/if}
</CircleIconButton>
{/if}
{/if}
{#if isPublicShared}
<ThemeButton />
{/if}
{#if isPublicShared}
<ThemeButton />
{/if}
{#if isCreatingSharedAlbum && album.sharedUsers.length == 0}

8
web/src/lib/components/elements/buttons/button.svelte
View File

@ -9,7 +9,8 @@
| 'green'
| 'gray'
| 'transparent-gray'
| 'dark-gray';
| 'dark-gray'
| 'overlay-primary';
export type Size = 'icon' | 'link' | 'sm' | 'base' | 'lg';
export type Rounded = 'lg' | '3xl' | 'full' | false;
export type Shadow = 'md' | false;
@ -38,9 +39,10 @@
green: 'bg-lime-600 text-white enabled:hover:bg-lime-500',
gray: 'bg-gray-500 dark:bg-gray-200 enabled:hover:bg-gray-500/75 enabled:dark:hover:bg-gray-200/80 text-white dark:text-immich-dark-gray',
'transparent-gray':
'dark:text-immich-dark-fg enabled:hover:bg-immich-primary/5 enabled:hover:text-gray-700 enabled:hover:dark:text-immich-dark-fg enabled:dark:hover:bg-immich-dark-primary/25 ',
'dark:text-immich-dark-fg enabled:hover:bg-immich-primary/5 enabled:hover:text-gray-700 enabled:hover:dark:text-immich-dark-fg enabled:dark:hover:bg-immich-dark-primary/25',
'dark-gray':
'dark:border-immich-dark-gray dark:bg-gray-500 enabled:dark:hover:bg-immich-dark-primary/50 enabled:hover:bg-immich-primary/10 dark:text-white'
'dark:border-immich-dark-gray dark:bg-gray-500 enabled:dark:hover:bg-immich-dark-primary/50 enabled:hover:bg-immich-primary/10 dark:text-white',
'overlay-primary': 'text-gray-500 enabled:hover:bg-gray-100'
};
const sizeClasses: Record<Size, string> = {

2
web/src/lib/components/elements/buttons/icon-button.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts" context="module">
export type Color = 'transparent-primary' | 'transparent-gray';
export type Color = 'transparent-primary' | 'transparent-gray' | 'overlay-primary';
</script>
<script lang="ts">