public/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-11-25 18:10:48 +09:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

refactor(web): centralize buttons (#2200)

Browse Source
This commit is contained in:
Michel Heusschen
2023-04-07 18:45:00 +02:00
committed by GitHub
parent 767410959a
commit ab5b92ae68
42 changed files with 248 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte
View File

@@ -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>

32
web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte
View File

@@ -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}