0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-03-11 02:23:09 -05:00

fix(web): remove black bezels + better integrate ActivityStatus (#10667)

* remove black bezels + better integrate activity status

* remove justify-self-end + mr-4 → mr-3 (closer to desired spacing)

* clean up

* clean up some more

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
pyorot 2024-07-01 15:05:49 +01:00 committed by GitHub
parent 783088afbe
commit f5164b42e0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 3 additions and 15 deletions

View file

@ -3,11 +3,9 @@
import { mdiCommentOutline, mdiHeart, mdiHeartOutline } from '@mdi/js'; import { mdiCommentOutline, mdiHeart, mdiHeartOutline } from '@mdi/js';
import { createEventDispatcher } from 'svelte'; import { createEventDispatcher } from 'svelte';
import Icon from '../elements/icon.svelte'; import Icon from '../elements/icon.svelte';
import { t } from 'svelte-i18n';
export let isLiked: ActivityResponseDto | null; export let isLiked: ActivityResponseDto | null;
export let numberOfComments: number | undefined; export let numberOfComments: number | undefined;
export let isShowActivity: boolean | undefined;
export let disabled: boolean; export let disabled: boolean;
const dispatch = createEventDispatcher<{ const dispatch = createEventDispatcher<{
@ -16,9 +14,7 @@
}>(); }>();
</script> </script>
<div <div class="w-full flex text-white items-center justify-center rounded-full gap-4 bg-immich-dark-bg bg-opacity-60">
class="w-full h-14 flex p-4 text-white items-center justify-center rounded-full gap-4 bg-immich-dark-bg bg-opacity-60"
>
<button type="button" class={disabled ? 'cursor-not-allowed' : ''} on:click={() => dispatch('favorite')} {disabled}> <button type="button" class={disabled ? 'cursor-not-allowed' : ''} on:click={() => dispatch('favorite')} {disabled}>
<div class="items-center justify-center"> <div class="items-center justify-center">
<Icon path={isLiked ? mdiHeart : mdiHeartOutline} size={24} /> <Icon path={isLiked ? mdiHeart : mdiHeartOutline} size={24} />
@ -29,8 +25,6 @@
<Icon path={mdiCommentOutline} class="scale-x-[-1]" size={24} /> <Icon path={mdiCommentOutline} class="scale-x-[-1]" size={24} />
{#if numberOfComments} {#if numberOfComments}
<div class="text-xl">{numberOfComments}</div> <div class="text-xl">{numberOfComments}</div>
{:else if !isShowActivity}
<div class="text-lg">{$t('say_something')}</div>
{/if} {/if}
</div> </div>
</button> </button>

View file

@ -682,12 +682,11 @@
/> />
{/if} {/if}
{#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || numberOfComments > 0)} {#if $slideshowState === SlideshowState.None && isShared && ((album && album.isActivityEnabled) || numberOfComments > 0)}
<div class="z-[9999] absolute bottom-0 right-0 mb-4 mr-6"> <div class="z-[9999] absolute bottom-0 right-0 mb-20 mr-8">
<ActivityStatus <ActivityStatus
disabled={!album?.isActivityEnabled} disabled={!album?.isActivityEnabled}
{isLiked} {isLiked}
{numberOfComments} {numberOfComments}
{isShowActivity}
on:favorite={handleFavorite} on:favorite={handleFavorite}
on:openActivityTab={handleOpenActivity} on:openActivityTab={handleOpenActivity}
/> />

View file

@ -51,11 +51,7 @@
}; };
</script> </script>
<div <div transition:fade={{ duration: 150 }} class="flex h-full select-none place-content-center place-items-center">
transition:fade={{ duration: 150 }}
class="flex select-none place-content-center place-items-center"
style="height: calc(100% - 64px)"
>
<video <video
bind:this={element} bind:this={element}
loop={$loopVideoPreference && loopVideo} loop={$loopVideoPreference && loopVideo}

View file

@ -635,7 +635,6 @@
disabled={!album.isActivityEnabled} disabled={!album.isActivityEnabled}
{isLiked} {isLiked}
numberOfComments={$numberOfComments} numberOfComments={$numberOfComments}
{isShowActivity}
on:favorite={handleFavorite} on:favorite={handleFavorite}
on:openActivityTab={handleOpenAndCloseActivityTab} on:openActivityTab={handleOpenAndCloseActivityTab}
/> />