mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
refactor(web): centralize buttons (#2200)
This commit is contained in:
Michel Heusschen
GitHub
parent
767410959a
commit
ab5b92ae68
42 changed files with 248 additions and 242 deletions
|
|
@ -4,7 +4,7 @@
|
|||
import Close from 'svelte-material-icons/Close.svelte';
|
||||
import { createEventDispatcher, onMount, onDestroy } from 'svelte';
|
||||
import { browser } from '$app/environment';
|
||||
import CircleIconButton from './circle-icon-button.svelte';
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
import { clickOutside } from '$lib/utils/click-outside';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
|
|
|||
|
|
@ -1,32 +0,0 @@
|
|||
<script lang="ts">
|
||||
/**
|
||||
* This is the circle icon component.
|
||||
*/
|
||||
import type Icon from 'svelte-material-icons/AbTesting.svelte';
|
||||
|
||||
export let logo: typeof Icon;
|
||||
export let backgroundColor = 'transparent';
|
||||
export let hoverColor = '#e2e7e9';
|
||||
export let size = '24';
|
||||
export let title = '';
|
||||
</script>
|
||||
|
||||
<button
|
||||
{title}
|
||||
style:backgroundColor
|
||||
style:--immich-icon-button-hover-color={hoverColor}
|
||||
class={`immich-circle-icon-button dark:text-immich-dark-fg hover:dark:text-immich-dark-gray rounded-full p-3 flex place-items-center place-content-center transition-all`}
|
||||
on:click
|
||||
>
|
||||
<svelte:component this={logo} {size} />
|
||||
</button>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
--immich-icon-button-hover-color: #d3d3d3;
|
||||
}
|
||||
|
||||
.immich-circle-icon-button:hover {
|
||||
background-color: var(--immich-icon-button-hover-color) !important;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import FullScreenModal from './full-screen-modal.svelte';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
|
||||
export let title = 'Confirm';
|
||||
export let prompt = 'Are you sure you want to do this?';
|
||||
|
|
@ -29,18 +30,8 @@
|
|||
</slot>
|
||||
|
||||
<div class="flex w-full px-4 gap-4 mt-4">
|
||||
<button
|
||||
on:click={() => handleCancel()}
|
||||
class="flex-1 transition-colors bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 dark:text-immich-dark-gray px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
|
||||
>
|
||||
{cancelText}
|
||||
</button>
|
||||
<button
|
||||
on:click={() => handleConfirm()}
|
||||
class="flex-1 transition-colors bg-red-500 hover:bg-red-400 px-6 py-3 text-white rounded-full w-full font-medium"
|
||||
>
|
||||
{confirmText}
|
||||
</button>
|
||||
<Button fullwidth on:click={() => handleCancel()}>{cancelText}</Button>
|
||||
<Button color="red" fullwidth on:click={() => handleConfirm()}>{confirmText}</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
|
||||
import { createEventDispatcher, onDestroy, onMount } from 'svelte';
|
||||
import Close from 'svelte-material-icons/Close.svelte';
|
||||
import CircleIconButton from '../shared-components/circle-icon-button.svelte';
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
import { fly } from 'svelte/transition';
|
||||
|
||||
export let showBackButton = true;
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
SettingInputFieldType
|
||||
} from '$lib/components/admin-page/settings/setting-input-field.svelte';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import Button from '$lib/components/elements/buttons/button.svelte';
|
||||
|
||||
export let shareType: SharedLinkType;
|
||||
export let sharedAssets: AssetResponseDto[] = [];
|
||||
|
|
@ -243,21 +244,11 @@
|
|||
{#if !isShowSharedLink}
|
||||
{#if editingLink}
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
on:click={handleEditLink}
|
||||
class="text-white dark:text-black bg-immich-primary px-4 py-2 rounded-lg text-sm transition-colors hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:hover:bg-immich-dark-primary/75"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<Button size="sm" rounded="lg" on:click={handleEditLink}>Confirm</Button>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
on:click={handleCreateSharedLink}
|
||||
class="text-white dark:text-black bg-immich-primary px-4 py-2 rounded-lg text-sm transition-colors hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:hover:bg-immich-dark-primary/75"
|
||||
>
|
||||
Create Link
|
||||
</button>
|
||||
<Button size="sm" rounded="lg" on:click={handleCreateSharedLink}>Create link</Button>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
|
@ -266,11 +257,7 @@
|
|||
<div class="flex w-full gap-4">
|
||||
<input class="immich-form-input w-full" bind:value={sharedLink} disabled />
|
||||
|
||||
<button
|
||||
on:click={() => handleCopy()}
|
||||
class="flex-1 transition-colors bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 dark:text-immich-dark-gray px-6 py-2 text-white rounded-full shadow-md w-full font-medium"
|
||||
>Copy</button
|
||||
>
|
||||
<Button on:click={() => handleCopy()}>Copy</Button>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
import Cog from 'svelte-material-icons/Cog.svelte';
|
||||
import Logout from 'svelte-material-icons/Logout.svelte';
|
||||
import { goto } from '$app/navigation';
|
||||
import Button from '$lib/components/elements/buttons/button.svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
|
||||
|
|
@ -59,16 +60,22 @@
|
|||
|
||||
<p class="text-sm text-gray-500 dark:text-immich-dark-fg">{user.email}</p>
|
||||
|
||||
<div class=" mt-4 flex place-items-center place-content-center">
|
||||
<button
|
||||
class="flex border rounded-3xl px-6 py-2 hover:bg-immich-primary/10 dark:border-immich-dark-gray dark:bg-gray-500 dark:hover:bg-immich-dark-primary/50 dark:text-white font-medium place-items-center place-content-center gap-2"
|
||||
<div class="mt-4">
|
||||
<Button
|
||||
color="dark-gray"
|
||||
size="sm"
|
||||
shadow={false}
|
||||
border
|
||||
on:click={() => {
|
||||
goto('/user-settings');
|
||||
dispatch('close');
|
||||
}}
|
||||
>
|
||||
<span><Cog size="18" /></span>Account Settings</button
|
||||
>
|
||||
<div class="flex gap-2 place-items-center place-content-center px-2">
|
||||
<Cog size="18" />
|
||||
Account Settings
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
import AccountInfoPanel from './account-info-panel.svelte';
|
||||
import ImmichLogo from '../immich-logo.svelte';
|
||||
import SearchBar from '../search-bar/search-bar.svelte';
|
||||
import LinkButton from '$lib/components/elements/buttons/link-button.svelte';
|
||||
export let user: UserResponseDto;
|
||||
export let shouldShowUploadButton = true;
|
||||
|
||||
|
|
@ -61,24 +62,27 @@
|
|||
<ThemeButton />
|
||||
|
||||
{#if !$page.url.pathname.includes('/admin') && shouldShowUploadButton}
|
||||
<button
|
||||
in:fly={{ x: 50, duration: 250 }}
|
||||
on:click={() => dispatch('uploadClicked')}
|
||||
class="immich-text-button dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg"
|
||||
>
|
||||
<TrayArrowUp size="20" />
|
||||
<span> Upload </span>
|
||||
</button>
|
||||
<div in:fly={{ x: 50, duration: 250 }}>
|
||||
<LinkButton on:click={() => dispatch('uploadClicked')}>
|
||||
<div class="flex gap-2">
|
||||
<TrayArrowUp size="20" />
|
||||
<span>Upload</span>
|
||||
</div>
|
||||
</LinkButton>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if user.isAdmin}
|
||||
<a data-sveltekit-preload-data="hover" href={AppRoute.ADMIN_USER_MANAGEMENT}>
|
||||
<button
|
||||
class={`flex place-items-center place-content-center gap-2 hover:bg-immich-primary/5 dark:hover:bg-immich-dark-primary/25 dark:text-immich-dark-fg p-2 rounded-lg font-medium ${
|
||||
$page.url.pathname.includes('/admin') &&
|
||||
'text-immich-primary dark:immich-dark-primary underline'
|
||||
}`}>Administration</button
|
||||
>
|
||||
<LinkButton>
|
||||
<span
|
||||
class={$page.url.pathname.includes('/admin')
|
||||
? 'text-immich-primary dark:text-immich-dark-primary underline'
|
||||
: ''}
|
||||
>
|
||||
Administration
|
||||
</span>
|
||||
</LinkButton>
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { browser } from '$app/environment';
|
||||
import { colorTheme } from '$lib/stores/preferences.store';
|
||||
import IconButton from '../elements/buttons/icon-button.svelte';
|
||||
|
||||
const toggleTheme = () => {
|
||||
$colorTheme = $colorTheme === 'dark' ? 'light' : 'dark';
|
||||
|
|
@ -17,11 +18,7 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
on:click={toggleTheme}
|
||||
type="button"
|
||||
class="text-gray-500 dark:text-immich-dark-primary hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none rounded-full p-2.5"
|
||||
>
|
||||
<IconButton on:click={toggleTheme} title="Toggle theme">
|
||||
{#if $colorTheme === 'light'}
|
||||
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
|
||||
><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" /></svg
|
||||
|
|
@ -35,4 +32,4 @@
|
|||
/></svg
|
||||
>
|
||||
{/if}
|
||||
</button>
|
||||
</IconButton>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { onMount } from 'svelte';
|
||||
import FullScreenModal from './full-screen-modal.svelte';
|
||||
import type { ServerVersionReponseDto } from '@api';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
|
||||
export let serverVersion: ServerVersionReponseDto;
|
||||
|
||||
|
|
@ -72,10 +73,7 @@
|
|||
</div>
|
||||
|
||||
<div class="text-right mt-8">
|
||||
<button
|
||||
class="transition-colors bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 dark:text-immich-dark-gray px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
|
||||
on:click={onAcknowledge}>Acknowledge</button
|
||||
>
|
||||
<Button fullwidth on:click={onAcknowledge}>Acknowledge</Button>
|
||||
</div>
|
||||
</div>
|
||||
</FullScreenModal>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue