github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-03-22 11:49:46 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore(web): refactor activity status

Browse Source
This commit is contained in:
Mees Frensel
2026-03-16 17:04:13 +01:00
parent b66c97b785
commit 1b3d36d1e0
2 changed files with 31 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
web/src/lib/components/asset-viewer/activity-status.svelte
View File

@@ -2,7 +2,7 @@
import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte'; import { assetViewerManager } from '$lib/managers/asset-viewer-manager.svelte';
import { locale } from '$lib/stores/preferences.store'; import { locale } from '$lib/stores/preferences.store';
import type { ActivityResponseDto } from '@immich/sdk'; import type { ActivityResponseDto } from '@immich/sdk';
import { Icon } from '@immich/ui'; import { Button } from '@immich/ui';
import { mdiCommentOutline, mdiThumbUp, mdiThumbUpOutline } from '@mdi/js'; import { mdiCommentOutline, mdiThumbUp, mdiThumbUpOutline } from '@mdi/js';
interface Props { interface Props {
@@ -16,21 +16,32 @@
let { isLiked, numberOfComments, numberOfLikes, disabled, onFavorite }: Props = $props(); let { isLiked, numberOfComments, numberOfLikes, disabled, onFavorite }: Props = $props();
</script> </script>
<div class="w-full flex p-4 items-center justify-center rounded-full gap-5 bg-subtle border bg-opacity-60"> <div class="flex p-1 items-center justify-center rounded-full gap-1 bg-subtle/70 border">
<button type="button" class={disabled ? 'cursor-not-allowed' : ''} onclick={onFavorite} {disabled}> <Button
<div class="flex gap-2 items-center justify-center"> {disabled}
<Icon icon={isLiked ? mdiThumbUp : mdiThumbUpOutline} size="24" class={isLiked ? 'text-primary' : 'text-fg'} /> onclick={onFavorite}
{#if numberOfLikes} leadingIcon={isLiked ? mdiThumbUp : mdiThumbUpOutline}
<div class="text-l">{numberOfLikes.toLocaleString($locale)}</div> shape="round"
{/if} size="large"
</div> variant="ghost"
</button> color={isLiked ? 'primary' : 'secondary'}
<button type="button" onclick={() => assetViewerManager.toggleActivityPanel()}> class="p-3"
<div class="flex gap-2 items-center justify-center"> >
<Icon icon={mdiCommentOutline} class="scale-x-[-1]" size="24" /> {#if numberOfLikes}
{#if numberOfComments} {numberOfLikes.toLocaleString($locale)}
<div class="text-l">{numberOfComments.toLocaleString($locale)}</div> {/if}
{/if} </Button>
</div> <Button
</button> onclick={() => assetViewerManager.toggleActivityPanel()}
leadingIcon={mdiCommentOutline}
shape="round"
size="large"
variant="ghost"
color="secondary"
class="p-3"
>
{#if numberOfComments}
{numberOfComments.toLocaleString($locale)}
{/if}
</Button>
</div> </div>

4
web/src/routes/(user)/albums/[albumId=id]/[[photos=photos]]/[[assetId=id]]/+page.svelte
View File

@@ -437,8 +437,8 @@
{/if} {/if}
</Timeline> </Timeline>
{#if showActivityStatus && !activityManager.isLoading} {#if showActivityStatus}
<div class="absolute z-2 bottom-0 end-0 mb-6 me-6 justify-self-end"> <div class="absolute z-2 bottom-0 end-0 mb-6 me-12">
<ActivityStatus <ActivityStatus
disabled={!album.isActivityEnabled} disabled={!album.isActivityEnabled}
isLiked={activityManager.isLiked} isLiked={activityManager.isLiked}