github-mirrors/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2026-03-08 02:57:48 +03:00
Code Issues Packages Projects Releases Wiki 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

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}