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:
parent
783088afbe
commit
f5164b42e0
4 changed files with 3 additions and 15 deletions
|
@ -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>
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|
|
@ -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}
|
||||||
|
|
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Add table
Reference in a new issue