self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-03 05:46:58 +02:00
Code Issues Releases Activity

refactor(web): material icons (#4636)

Browse Source
This commit is contained in:
Jason Rasmussen
2023-10-25 09:48:25 -04:00
committed by GitHub
parent d5e19e45cd
commit 2ad389f64e
89 changed files with 557 additions and 534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte
View File

@ -1,26 +1,28 @@
<script lang="ts">
import { page } from '$app/stores';
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { photoZoomState } from '$lib/stores/zoom-image.store';
import { clickOutside } from '$lib/utils/click-outside';
import { getContextMenuPosition } from '$lib/utils/context-menu';
import { AssetJobName, AssetResponseDto, AssetTypeEnum, api } from '@api';
import {
mdiAlertOutline,
mdiArrowLeft,
mdiCloudDownloadOutline,
mdiContentCopy,
mdiDeleteOutline,
mdiDotsVertical,
mdiHeart,
mdiHeartOutline,
mdiInformationOutline,
mdiMagnifyMinusOutline,
mdiMagnifyPlusOutline,
mdiMotionPauseOutline,
mdiMoviePlayOutline,
} from '@mdi/js';
import { createEventDispatcher } from 'svelte';
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
import AlertOutline from 'svelte-material-icons/AlertOutline.svelte';
import ContentCopy from 'svelte-material-icons/ContentCopy.svelte';
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
import Heart from 'svelte-material-icons/Heart.svelte';
import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
import InformationOutline from 'svelte-material-icons/InformationOutline.svelte';
import MagnifyMinusOutline from 'svelte-material-icons/MagnifyMinusOutline.svelte';
import MagnifyPlusOutline from 'svelte-material-icons/MagnifyPlusOutline.svelte';
import MotionPauseOutline from 'svelte-material-icons/MotionPauseOutline.svelte';
import MotionPlayOutline from 'svelte-material-icons/MotionPlayOutline.svelte';
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
import MenuOption from '../shared-components/context-menu/menu-option.svelte';
import { getContextMenuPosition } from '$lib/utils/context-menu';
export let asset: AssetResponseDto;
export let showCopyButton: boolean;
@ -74,13 +76,13 @@
class="z-[1001] flex h-16 place-items-center justify-between bg-gradient-to-b from-black/40 px-3 transition-transform duration-200"
>
<div class="text-white">
<CircleIconButton isOpacity={true} logo={ArrowLeft} on:click={() => dispatch('goBack')} />
<CircleIconButton isOpacity={true} icon={mdiArrowLeft} on:click={() => dispatch('goBack')} />
</div>
<div class="flex w-[calc(100%-3rem)] justify-end gap-2 overflow-hidden text-white">
{#if asset.isOffline}
<CircleIconButton
isOpacity={true}
logo={AlertOutline}
icon={mdiAlertOutline}
on:click={() => dispatch('showDetail')}
title="Asset Offline"
/>
@ -89,14 +91,14 @@
{#if isMotionPhotoPlaying}
<CircleIconButton
isOpacity={true}
logo={MotionPauseOutline}
icon={mdiMotionPauseOutline}
title="Stop Motion Photo"
on:click={() => dispatch('stopMotionPhoto')}
/>
{:else}
<CircleIconButton
isOpacity={true}
logo={MotionPlayOutline}
icon={mdiMoviePlayOutline}
title="Play Motion Photo"
on:click={() => dispatch('playMotionPhoto')}
/>
@ -106,7 +108,7 @@
<CircleIconButton
isOpacity={true}
hideMobile={true}
logo={$photoZoomState && $photoZoomState.currentZoom > 1 ? MagnifyMinusOutline : MagnifyPlusOutline}
icon={$photoZoomState && $photoZoomState.currentZoom > 1 ? mdiMagnifyMinusOutline : mdiMagnifyPlusOutline}
title="Zoom Image"
on:click={() => {
const zoomImage = new CustomEvent('zoomImage');
@ -117,7 +119,7 @@
{#if showCopyButton}
<CircleIconButton
isOpacity={true}
logo={ContentCopy}
icon={mdiContentCopy}
title="Copy Image"
on:click={() => {
const copyEvent = new CustomEvent('copyImage');
@ -129,7 +131,7 @@
{#if showDownloadButton}
<CircleIconButton
isOpacity={true}
logo={CloudDownloadOutline}
icon={mdiCloudDownloadOutline}
on:click={() => dispatch('download')}
title="Download"
/>
@ -137,7 +139,7 @@
{#if showDetailButton}
<CircleIconButton
isOpacity={true}
logo={InformationOutline}
icon={mdiInformationOutline}
on:click={() => dispatch('showDetail')}
title="Info"
/>
@ -145,7 +147,7 @@
{#if isOwner}
<CircleIconButton
isOpacity={true}
logo={asset.isFavorite ? Heart : HeartOutline}
icon={asset.isFavorite ? mdiHeart : mdiHeartOutline}
on:click={() => dispatch('favorite')}
title="Favorite"
/>
@ -153,10 +155,10 @@
{#if isOwner}
{#if !asset.isReadOnly || !asset.isExternal}
<CircleIconButton isOpacity={true} logo={DeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
<CircleIconButton isOpacity={true} icon={mdiDeleteOutline} on:click={() => dispatch('delete')} title="Delete" />
{/if}
<div use:clickOutside on:outclick={() => (isShowAssetOptions = false)}>
<CircleIconButton isOpacity={true} logo={DotsVertical} on:click={showOptionsMenu} title="More" />
<CircleIconButton isOpacity={true} icon={mdiDotsVertical} on:click={showOptionsMenu} title="More" />
{#if isShowAssetOptions}
<ContextMenu {...contextMenuPosition} direction="left">
{#if showSlideshow}