sjs/immich
1
0
Fork 0
mirror of https://github.com/samsonjs/immich.git synced 2026-04-27 15:07:45 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: album option modal styling (#25269)

Browse source 
* chore: album option modal styling

* header action button color
This commit is contained in:
Alex 2026-01-14 16:52:33 -06:00 committed by GitHub
parent 21802ab5ba
commit 0a62ec7e29
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 31 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
web/src/lib/modals/AlbumAddUsersModal.svelte
View file

@ -39,18 +39,25 @@
}); });
</script> </script>
<FormModal title={$t('users')} submitText={$t('add')} {onSubmit} disabled={selectedUsers.size === 0} {onClose}> <FormModal
title={$t('users')}
submitText={$t('add')}
cancelText={$t('back')}
{onSubmit}
disabled={selectedUsers.size === 0}
{onClose}
>
<Stack> <Stack>
{#each filteredUsers as user (user.id)} {#each filteredUsers as user (user.id)}
<ListButton selected={selectedUsers.has(user.id)} onclick={() => handleToggle(user)}> <ListButton selected={selectedUsers.has(user.id)} onclick={() => handleToggle(user)}>
<UserAvatar {user} size="md" /> <UserAvatar {user} size="md" />
<div class="text-start grow"> <div class="text-start grow">
<Text>{user.name}</Text> <Text fontWeight="medium">{user.name}</Text>
<Text size="small">{user.email}</Text> <Text size="tiny" color="muted">{user.email}</Text>
</div> </div>
</ListButton> </ListButton>
{:else} {:else}
<Text>{$t('album_share_no_users')}</Text> <Text class="py-6">{$t('album_share_no_users')}</Text>
{/each} {/each}
</Stack> </Stack>
</FormModal> </FormModal>

31
web/src/lib/modals/AlbumOptionsModal.svelte
View file

@ -19,7 +19,7 @@
type SharedLinkResponseDto, type SharedLinkResponseDto,
type UserResponseDto, type UserResponseDto,
} from '@immich/sdk'; } from '@immich/sdk';
import { Field, Heading, HStack, Modal, ModalBody, Select, Stack, Switch, Text } from '@immich/ui'; import { Field, HStack, Modal, ModalBody, Select, Stack, Switch, Text } from '@immich/ui';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
@ -92,8 +92,8 @@
<ModalBody> <ModalBody>
<Stack gap={6}> <Stack gap={6}>
<div> <div>
<Heading size="tiny" class="mb-2">{$t('settings')}</Heading> <Text size="medium" fontWeight="semi-bold">{$t('settings')}</Text>
<div class="grid gap-y-2 ps-2"> <div class="grid gap-y-3 ps-2 mt-2">
{#if album.order} {#if album.order}
<Field label={$t('display_order')}> <Field label={$t('display_order')}>
<Select <Select
@ -111,17 +111,18 @@
</Field> </Field>
</div> </div>
</div> </div>
<div> <div>
<HStack fullWidth class="justify-between mb-2"> <HStack fullWidth class="justify-between mb-2">
<Heading size="tiny">{$t('people')}</Heading> <Text size="medium" fontWeight="semi-bold">{$t('people')}</Text>
<HeaderActionButton action={AddUsers} /> <HeaderActionButton action={AddUsers} />
</HStack> </HStack>
<div class="ps-2"> <div class="ps-2">
<div class="flex items-center gap-2"> <div class="flex items-center gap-2 mb-2">
<div> <div>
<UserAvatar user={$user} size="md" /> <UserAvatar user={$user} size="md" />
</div> </div>
<div class="w-full">{$user.name}</div> <Text class="w-full" size="small">{$user.name}</Text>
<Field disabled class="w-32 shrink-0"> <Field disabled class="w-32 shrink-0">
<Select data={[{ label: $t('owner'), value: 'owner' }]} value={{ label: $t('owner'), value: 'owner' }} /> <Select data={[{ label: $t('owner'), value: 'owner' }]} value={{ label: $t('owner'), value: 'owner' }} />
</Field> </Field>
@ -133,7 +134,7 @@
<div> <div>
<UserAvatar {user} size="md" /> <UserAvatar {user} size="md" />
</div> </div>
<Text>{user.name}</Text> <Text size="small">{user.name}</Text>
</div> </div>
<Field class="w-32"> <Field class="w-32">
<Select <Select
@ -146,17 +147,19 @@
{/each} {/each}
</div> </div>
</div> </div>
<div> <div class="mb-4">
<HStack class="justify-between mb-2"> <HStack class="justify-between mb-2">
<Heading size="tiny">{$t('shared_links')}</Heading> <Text size="medium" fontWeight="semi-bold">{$t('shared_links')}</Text>
<HeaderActionButton action={CreateSharedLink} /> <HeaderActionButton action={CreateSharedLink} />
</HStack> </HStack>
<Stack gap={4}> <div class="ps-2">
{#each sharedLinks as sharedLink (sharedLink.id)} <Stack gap={4}>
<AlbumSharedLink {album} {sharedLink} /> {#each sharedLinks as sharedLink (sharedLink.id)}
{/each} <AlbumSharedLink {album} {sharedLink} />
</Stack> {/each}
</Stack>
</div>
</div> </div>
</Stack> </Stack>
</ModalBody> </ModalBody>

3
web/src/lib/services/album.service.ts
View file

@ -43,6 +43,7 @@ export const getAlbumActions = ($t: MessageFormatter, album: AlbumResponseDto) =
title: $t('invite_people'), title: $t('invite_people'),
type: $t('command'), type: $t('command'),
icon: mdiPlus, icon: mdiPlus,
color: 'primary',
onAction: () => modalManager.show(AlbumAddUsersModal, { album }), onAction: () => modalManager.show(AlbumAddUsersModal, { album }),
}; };
@ -50,6 +51,7 @@ export const getAlbumActions = ($t: MessageFormatter, album: AlbumResponseDto) =
title: $t('create_link'), title: $t('create_link'),
type: $t('command'), type: $t('command'),
icon: mdiLink, icon: mdiLink,
color: 'primary',
onAction: () => modalManager.show(SharedLinkCreateModal, { albumId: album.id }), onAction: () => modalManager.show(SharedLinkCreateModal, { albumId: album.id }),
}; };
@ -60,6 +62,7 @@ export const getAlbumAssetsActions = ($t: MessageFormatter, album: AlbumResponse
const AddAssets: ActionItem = { const AddAssets: ActionItem = {
title: $t('add_assets'), title: $t('add_assets'),
type: $t('command'), type: $t('command'),
color: 'primary',
icon: mdiPlusBoxOutline, icon: mdiPlusBoxOutline,
$if: () => assets.length > 0, $if: () => assets.length > 0,
onAction: () => addAssets(album, assets), onAction: () => addAssets(album, assets),