c-l/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-01-01 08:31:59 +00:00
Code Releases Activity

fix(web): navigation buttons z-order (#3286)

Browse source 
* Fix navigation styling

* z-index
* refactor transition and hover

* Add NavigationButton and NavigationArea components

* Use group-hover to simplify hover styling

* fix check

* fix check

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
This commit is contained in:
Sergey Kondrikov 2023-07-16 04:25:59 +03:00 committed by GitHub
parent c254a04aec
commit ed3c239b7e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
web/src/lib/components/asset-viewer/asset-viewer.svelte
View file

@ -17,6 +17,7 @@
import { assetStore } from '$lib/stores/assets.store';
import { isShowDetail } from '$lib/stores/preferences.store';
import { addAssetsToAlbum, downloadFile } from '$lib/utils/asset-utils';
import NavigationArea from './navigation-area.svelte';
import { browser } from '$app/environment';
export let asset: AssetResponseDto;
@ -25,8 +26,6 @@
export let sharedLink: SharedLinkResponseDto | undefined = undefined;
const dispatch = createEventDispatcher();
let halfLeftHover = false;
let halfRightHover = false;
let appearsInAlbums: AlbumResponseDto[] = [];
let isShowAlbumPicker = false;
let isShowDeleteConfirmation = false;
@ -251,28 +250,8 @@
</div>
{#if showNavigation}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class={`row-start-2 row-span-end col-start-1 flex place-items-center hover:cursor-pointer w-1/4 mb-[60px] ${
asset.type === AssetTypeEnum.Video ? '' : 'z-[999]'
}`}
on:mouseenter={() => {
halfLeftHover = true;
halfRightHover = false;
}}
on:mouseleave={() => {
halfLeftHover = false;
}}
on:click={navigateAssetBackward}
on:keydown={navigateAssetBackward}
>
<button
class="rounded-full p-3 hover:bg-gray-500 hover:text-gray-700 z-[1000] text-gray-500 mx-4"
class:navigation-button-hover={halfLeftHover}
on:click={navigateAssetBackward}
>
<ChevronLeft size="36" />
</button>
<div class="row-start-2 row-span-1 col-start-1 column-span-1 justify-self-start mb-[60px] z-[999]">
<NavigationArea on:click={navigateAssetBackward}><ChevronLeft size="36" /></NavigationArea>
</div>
{/if}
@ -304,28 +283,8 @@
</div>
{#if showNavigation}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class={`row-start-2 row-span-full col-start-4 flex justify-end place-items-center hover:cursor-pointer w-1/4 justify-self-end mb-[60px] ${
asset.type === AssetTypeEnum.Video ? '' : 'z-[500]'
}`}
on:click={navigateAssetForward}
on:keydown={navigateAssetForward}
on:mouseenter={() => {
halfLeftHover = false;
halfRightHover = true;
}}
on:mouseleave={() => {
halfRightHover = false;
}}
>
<button
class="rounded-full p-3 hover:bg-gray-500 hover:text-white text-gray-500 mx-4"
class:navigation-button-hover={halfRightHover}
on:click={navigateAssetForward}
>
<ChevronRight size="36" />
</button>
<div class="row-start-2 row-span-1 col-start-4 col-span-1 justify-self-end mb-[60px] z-[999]">
<NavigationArea on:click={navigateAssetForward}><ChevronRight size="36" /></NavigationArea>
</div>
{/if}
@ -379,10 +338,4 @@
#immich-asset-viewer {
contain: layout;
}
.navigation-button-hover {
background-color: rgb(107 114 128 / var(--tw-bg-opacity));
color: rgb(255 255 255 / var(--tw-text-opacity));
transition: all 150ms;
}
</style>

9
web/src/lib/components/asset-viewer/navigation-area.svelte Normal file
View file

@ -0,0 +1,9 @@
<script lang="ts">
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="group h-full flex place-items-center" on:click on:keydown>
<button class="rounded-full p-3 transition text-gray-500 mx-4 group-hover:text-white group-hover:bg-gray-500">
<slot />
</button>
</div>