helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 8

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
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
89 changed files with 557 additions and 534 deletions
Download patch file Download diff file Expand all files Collapse all files

10
web/src/lib/components/photos-page/actions/archive-action.svelte
View file

@ -6,11 +6,9 @@
} from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error';
import { api } from '@api';
import ArchiveArrowDownOutline from 'svelte-material-icons/ArchiveArrowDownOutline.svelte';
import ArchiveArrowUpOutline from 'svelte-material-icons/ArchiveArrowUpOutline.svelte';
import TimerSand from 'svelte-material-icons/TimerSand.svelte';
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
import { OnArchive, getAssetControlContext } from '../asset-select-control-bar.svelte';
import { mdiArchiveArrowUpOutline, mdiArchiveArrowDownOutline, mdiTimerSand } from '@mdi/js';
export let onArchive: OnArchive | undefined = undefined;
@ -18,7 +16,7 @@
export let unarchive = false;
$: text = unarchive ? 'Unarchive' : 'Archive';
$: logo = unarchive ? ArchiveArrowUpOutline : ArchiveArrowDownOutline;
$: icon = unarchive ? mdiArchiveArrowUpOutline : mdiArchiveArrowDownOutline;
let loading = false;
@ -62,8 +60,8 @@
{#if !menuItem}
{#if loading}
<CircleIconButton title="Loading" logo={TimerSand} />
<CircleIconButton title="Loading" icon={mdiTimerSand} />
{:else}
<CircleIconButton title={text} {logo} on:click={handleArchive} />
<CircleIconButton title={text} {icon} on:click={handleArchive} />
{/if}
{/if}

6
web/src/lib/components/photos-page/actions/create-shared-link.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import CreateSharedLinkModal from '$lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte';
import ShareVariantOutline from 'svelte-material-icons/ShareVariantOutline.svelte';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { mdiShareVariantOutline } from '@mdi/js';
import { createEventDispatcher } from 'svelte';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
let showModal = false;
const dispatch = createEventDispatcher();
@ -14,7 +14,7 @@
};
</script>
<CircleIconButton title="Share" logo={ShareVariantOutline} on:click={() => (showModal = true)} />
<CircleIconButton title="Share" icon={mdiShareVariantOutline} on:click={() => (showModal = true)} />
{#if showModal}
<CreateSharedLinkModal

8
web/src/lib/components/photos-page/actions/delete-assets.svelte
View file

@ -7,13 +7,11 @@
} from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error';
import { api } from '@api';
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
import TimerSand from 'svelte-material-icons/TimerSand.svelte';
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
import { OnAssetDelete, getAssetControlContext } from '../asset-select-control-bar.svelte';
import { createEventDispatcher } from 'svelte';
import { featureFlags } from '$lib/stores/server-config.store';
import { mdiTimerSand, mdiDeleteOutline } from '@mdi/js';
export let onAssetDelete: OnAssetDelete;
export let menuItem = false;
@ -70,9 +68,9 @@
{#if menuItem}
<MenuOption text={force ? 'Permanently Delete' : 'Delete'} on:click={handleTrash} />
{:else if loading}
<CircleIconButton title="Loading" logo={TimerSand} />
<CircleIconButton title="Loading" icon={mdiTimerSand} />
{:else}
<CircleIconButton title="Delete" logo={DeleteOutline} on:click={handleTrash} />
<CircleIconButton title="Delete" icon={mdiDeleteOutline} on:click={handleTrash} />
{/if}
{#if isShowConfirmation}

4
web/src/lib/components/photos-page/actions/download-action.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { downloadArchive, downloadFile } from '$lib/utils/asset-utils';
import CloudDownloadOutline from 'svelte-material-icons/CloudDownloadOutline.svelte';
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { mdiCloudDownloadOutline } from '@mdi/js';
export let filename = 'immich.zip';
export let menuItem = false;
@ -26,5 +26,5 @@
{#if menuItem}
<MenuOption text="Download" on:click={handleDownloadFiles} />
{:else}
<CircleIconButton title="Download" logo={CloudDownloadOutline} on:click={handleDownloadFiles} />
<CircleIconButton title="Download" icon={mdiCloudDownloadOutline} on:click={handleDownloadFiles} />
{/if}

10
web/src/lib/components/photos-page/actions/favorite-action.svelte
View file

@ -7,10 +7,8 @@
} from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error';
import { api } from '@api';
import HeartMinusOutline from 'svelte-material-icons/HeartMinusOutline.svelte';
import HeartOutline from 'svelte-material-icons/HeartOutline.svelte';
import TimerSand from 'svelte-material-icons/TimerSand.svelte';
import { OnFavorite, getAssetControlContext } from '../asset-select-control-bar.svelte';
import { mdiHeartMinusOutline, mdiHeartOutline, mdiTimerSand } from '@mdi/js';
export let onFavorite: OnFavorite | undefined = undefined;
@ -18,7 +16,7 @@
export let removeFavorite: boolean;
$: text = removeFavorite ? 'Remove from Favorites' : 'Favorite';
$: logo = removeFavorite ? HeartMinusOutline : HeartOutline;
$: icon = removeFavorite ? mdiHeartMinusOutline : mdiHeartOutline;
let loading = false;
@ -62,8 +60,8 @@
{#if !menuItem}
{#if loading}
<CircleIconButton title="Loading" logo={TimerSand} />
<CircleIconButton title="Loading" icon={mdiTimerSand} />
{:else}
<CircleIconButton title={text} {logo} on:click={handleFavorite} />
<CircleIconButton title={text} {icon} on:click={handleFavorite} />
{/if}
{/if}

4
web/src/lib/components/photos-page/actions/remove-from-album.svelte
View file

@ -6,9 +6,9 @@
notificationController,
} from '$lib/components/shared-components/notification/notification';
import { AlbumResponseDto, api } from '@api';
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
import MenuOption from '../../shared-components/context-menu/menu-option.svelte';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { mdiDeleteOutline } from '@mdi/js';
export let album: AlbumResponseDto;
export let onRemove: ((assetIds: string[]) => void) | undefined = undefined;
@ -53,7 +53,7 @@
{#if menuItem}
<MenuOption text="Remove from album" on:click={() => (isShowConfirmation = true)} />
{:else}
<CircleIconButton title="Remove from album" logo={DeleteOutline} on:click={() => (isShowConfirmation = true)} />
<CircleIconButton title="Remove from album" icon={mdiDeleteOutline} on:click={() => (isShowConfirmation = true)} />
{/if}
{#if isShowConfirmation}

4
web/src/lib/components/photos-page/actions/remove-from-shared-link.svelte
View file

@ -1,11 +1,11 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import { SharedLinkResponseDto, api } from '@api';
import DeleteOutline from 'svelte-material-icons/DeleteOutline.svelte';
import ConfirmDialogue from '../../shared-components/confirm-dialogue.svelte';
import { getAssetControlContext } from '../asset-select-control-bar.svelte';
import { NotificationType, notificationController } from '../../shared-components/notification/notification';
import { handleError } from '../../../utils/handle-error';
import { mdiDeleteOutline } from '@mdi/js';
export let sharedLink: SharedLinkResponseDto;
@ -45,7 +45,7 @@
};
</script>
<CircleIconButton title="Remove from shared link" on:click={() => (removing = true)} logo={DeleteOutline} />
<CircleIconButton title="Remove from shared link" on:click={() => (removing = true)} icon={mdiDeleteOutline} />
{#if removing}
<ConfirmDialogue

5
web/src/lib/components/photos-page/actions/restore-assets.svelte
View file

@ -5,9 +5,10 @@
} from '$lib/components/shared-components/notification/notification';
import { handleError } from '$lib/utils/handle-error';
import { api } from '@api';
import History from 'svelte-material-icons/History.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import Button from '../../elements/buttons/button.svelte';
import { OnRestore, getAssetControlContext } from '../asset-select-control-bar.svelte';
import { mdiHistory } from '@mdi/js';
export let onRestore: OnRestore | undefined = undefined;
@ -38,6 +39,6 @@
</script>
<Button disabled={loading} size="sm" color="transparent-gray" shadow={false} rounded="lg" on:click={handleRestore}>
<History size="24" />
<Icon path={mdiHistory} size="24" />
<span class="ml-2">Restore</span>
</Button>

7
web/src/lib/components/photos-page/actions/select-all-assets.svelte
View file

@ -3,9 +3,8 @@
import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
import { BucketPosition, type AssetStore } from '$lib/stores/assets.store';
import { handleError } from '$lib/utils/handle-error';
import SelectAll from 'svelte-material-icons/SelectAll.svelte';
import TimerSand from 'svelte-material-icons/TimerSand.svelte';
import { get } from 'svelte/store';
import { mdiTimerSand, mdiSelectAll } from '@mdi/js';
export let assetStore: AssetStore;
export let assetInteractionStore: AssetInteractionStore;
@ -32,8 +31,8 @@
</script>
{#if selecting}
<CircleIconButton title="Delete" logo={TimerSand} />
<CircleIconButton title="Delete" icon={mdiTimerSand} />
{/if}
{#if !selecting}
<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
<CircleIconButton title="Select all" icon={mdiSelectAll} on:click={handleSelectAll} />
{/if}

8
web/src/lib/components/photos-page/asset-date-group.svelte
View file

@ -5,14 +5,14 @@
import type { AssetResponseDto } from '@api';
import justifiedLayout from 'justified-layout';
import { createEventDispatcher } from 'svelte';
import CheckCircle from 'svelte-material-icons/CheckCircle.svelte';
import CircleOutline from 'svelte-material-icons/CircleOutline.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { fly } from 'svelte/transition';
import Thumbnail from '../assets/thumbnail/thumbnail.svelte';
import { assetViewingStore } from '$lib/stores/asset-viewing.store';
import type { AssetStore } from '$lib/stores/assets.store';
import type { AssetInteractionStore } from '$lib/stores/asset-interaction.store';
import type { Viewport } from '$lib/stores/assets.store';
import { mdiCheckCircle, mdiCircleOutline } from '@mdi/js';
export let assets: AssetResponseDto[];
export let bucketDate: string;
@ -154,9 +154,9 @@
on:keydown={() => handleSelectGroup(groupTitle, groupAssets)}
>
{#if $selectedGroup.has(groupTitle)}
<CheckCircle size="24" color="#4250af" />
<Icon path={mdiCheckCircle} size="24" color="#4250af" />
{:else}
<CircleOutline size="24" color="#757575" />
<Icon path={mdiCircleOutline} size="24" color="#757575" />
{/if}
</div>
{/if}

5
web/src/lib/components/photos-page/asset-select-context-menu.svelte
View file

@ -9,10 +9,9 @@
<script lang="ts">
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
import ContextMenu from '$lib/components/shared-components/context-menu/context-menu.svelte';
import type Icon from 'svelte-material-icons/AbTesting.svelte';
import { getContextMenuPosition } from '$lib/utils/context-menu';
export let icon: typeof Icon;
export let icon: string;
export let title: string;
let showContextMenu = false;
@ -27,7 +26,7 @@
</script>
<div use:clickOutside on:outclick={() => (showContextMenu = false)}>
<CircleIconButton {title} logo={icon} on:click={handleShowMenu} />
<CircleIconButton {title} {icon} on:click={handleShowMenu} />
{#if showContextMenu}
<ContextMenu {...contextMenuPosition}>
<div class="flex flex-col rounded-lg">

4
web/src/lib/components/photos-page/asset-select-control-bar.svelte
View file

@ -19,8 +19,8 @@
<script lang="ts">
import { locale } from '$lib/stores/preferences.store';
import type { AssetResponseDto } from '@api';
import Close from 'svelte-material-icons/Close.svelte';
import ControlAppBar from '../shared-components/control-app-bar.svelte';
import { mdiClose } from '@mdi/js';
export let assets: Set<AssetResponseDto>;
export let clearSelect: () => void;
@ -28,7 +28,7 @@
setContext({ getAssets: () => assets, clearSelect });
</script>
<ControlAppBar on:close-button-click={clearSelect} backIcon={Close} tailwindClasses="bg-white shadow-md">
<ControlAppBar on:close-button-click={clearSelect} backIcon={mdiClose} tailwindClasses="bg-white shadow-md">
<p class="font-medium text-immich-primary dark:text-immich-dark-primary" slot="leading">
Selected {assets.size.toLocaleString($locale)}
</p>

8
web/src/lib/components/photos-page/memory-lane.svelte
View file

@ -1,11 +1,11 @@
<script lang="ts">
import { onMount } from 'svelte';
import { api } from '@api';
import ChevronLeft from 'svelte-material-icons/ChevronLeft.svelte';
import ChevronRight from 'svelte-material-icons/ChevronRight.svelte';
import Icon from '$lib/components/elements/icon.svelte';
import { memoryStore } from '$lib/stores/memory.store';
import { goto } from '$app/navigation';
import { fade } from 'svelte/transition';
import { mdiChevronLeft, mdiChevronRight } from '@mdi/js';
$: shouldRender = $memoryStore?.length > 0;
@ -50,7 +50,7 @@
class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
on:click={scrollLeft}
>
<ChevronLeft size="36" /></button
<Icon path={mdiChevronLeft} size="36" /></button
>
</div>
{/if}
@ -60,7 +60,7 @@
class="rounded-full border border-gray-500 bg-gray-100 p-2 text-gray-500 opacity-50 hover:opacity-100"
on:click={scrollRight}
>
<ChevronRight size="36" /></button
<Icon path={mdiChevronRight} size="36" /></button
>
</div>
{/if}