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
|
|
@ -2,6 +2,7 @@
|
|||
import { goto } from '$app/navigation';
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { api } from '@api';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
|
||||
let error: string;
|
||||
let password = '';
|
||||
|
|
@ -115,6 +116,6 @@
|
|||
{/if}
|
||||
|
||||
<div class="my-5 flex w-full">
|
||||
<button type="submit" class="immich-btn-primary-big">Sign Up</button>
|
||||
<Button type="submit" size="lg" fullwidth>Sign up</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
import { createEventDispatcher } from 'svelte';
|
||||
import KeyVariant from 'svelte-material-icons/KeyVariant.svelte';
|
||||
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
|
||||
export let apiKey: Partial<APIKeyResponseDto>;
|
||||
export let title = 'API Key';
|
||||
|
|
@ -40,17 +41,8 @@
|
|||
</div>
|
||||
|
||||
<div class="flex w-full px-4 gap-4 mt-8">
|
||||
<button
|
||||
type="button"
|
||||
on:click={() => handleCancel()}
|
||||
class="flex-1 transition-colors bg-gray-500 dark:bg-gray-200 hover:bg-gray-500/75 dark:hover:bg-gray-200/80 px-6 py-3 text-white dark:text-immich-dark-gray rounded-full shadow-md font-medium"
|
||||
>{cancelText}
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
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"
|
||||
>{submitText}</button
|
||||
>
|
||||
<Button color="gray" fullwidth on:click={() => handleCancel()}>{cancelText}</Button>
|
||||
<Button type="submit" fullwidth>{submitText}</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
notificationController,
|
||||
NotificationType
|
||||
} from '../shared-components/notification/notification';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
|
||||
export let secret = '';
|
||||
|
||||
|
|
@ -54,16 +55,8 @@
|
|||
</div>
|
||||
|
||||
<div class="flex w-full px-4 gap-4 mt-8">
|
||||
<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-3 text-white rounded-full shadow-md w-full font-medium"
|
||||
>Copy to Clipboard</button
|
||||
>
|
||||
<button
|
||||
on:click={() => handleDone()}
|
||||
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"
|
||||
>Done</button
|
||||
>
|
||||
<Button on:click={() => handleCopy()} fullwidth>Copy to Clipboard</Button>
|
||||
<Button on:click={() => handleDone()} fullwidth>Done</Button>
|
||||
</div>
|
||||
</div>
|
||||
</FullScreenModal>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<script lang="ts">
|
||||
import { api, UserResponseDto } from '@api';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
let error: string;
|
||||
|
|
@ -78,6 +79,6 @@
|
|||
<p class="text-immich-primary text-sm">{success}</p>
|
||||
{/if}
|
||||
<div class="my-5 flex w-full">
|
||||
<button type="submit" class="immich-btn-primary-big">Change Password</button>
|
||||
<Button type="submit" size="lg" fullwidth>Change password</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
notificationController,
|
||||
NotificationType
|
||||
} from '../shared-components/notification/notification';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
|
||||
let error: string;
|
||||
let success: string;
|
||||
|
|
@ -140,13 +141,8 @@
|
|||
{#if success}
|
||||
<p class="text-immich-primary ml-4 text-sm">{success}</p>
|
||||
{/if}
|
||||
<div class="flex w-full">
|
||||
<button
|
||||
type="submit"
|
||||
class="m-4 bg-immich-primary dark:bg-immich-dark-primary hover:bg-immich-primary/75 dark:hover:bg-immich-dark-primary/80 px-6 py-3 text-white dark:text-immich-dark-gray rounded-full shadow-md w-full font-medium"
|
||||
disabled={isCreatingUser}
|
||||
>Create
|
||||
</button>
|
||||
<div class="flex w-full p-4">
|
||||
<Button type="submit" disabled={isCreatingUser} fullwidth>Create</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
notificationController,
|
||||
NotificationType
|
||||
} from '../shared-components/notification/notification';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
|
||||
|
|
@ -112,16 +113,8 @@
|
|||
<p class="text-immich-primary ml-4 text-sm">{success}</p>
|
||||
{/if}
|
||||
<div class="flex w-full px-4 gap-4 mt-8">
|
||||
<button
|
||||
on:click={resetPassword}
|
||||
class="flex-1 transition-colors bg-[#F9DEDC] hover:bg-red-50 text-[#410E0B] px-6 py-3 rounded-full w-full font-medium"
|
||||
>Reset password
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
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"
|
||||
>Confirm
|
||||
</button>
|
||||
<Button color="light-red" fullwidth on:click={resetPassword}>Reset password</Button>
|
||||
<Button type="submit" fullwidth>Confirm</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
import { api, oauth, OAuthConfigResponseDto } from '@api';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
|
||||
let error: string;
|
||||
let email = '';
|
||||
|
|
@ -110,22 +111,20 @@
|
|||
</div>
|
||||
|
||||
<div class="my-5 flex w-full">
|
||||
<button
|
||||
type="submit"
|
||||
class="immich-btn-primary-big inline-flex items-center h-14"
|
||||
disabled={loading || oauthLoading}
|
||||
>
|
||||
<Button type="submit" size="lg" fullwidth disabled={loading || oauthLoading}>
|
||||
{#if loading}
|
||||
<LoadingSpinner />
|
||||
<span class="h-6">
|
||||
<LoadingSpinner />
|
||||
</span>
|
||||
{:else}
|
||||
Login
|
||||
{/if}
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
{/if}
|
||||
|
||||
{#if authConfig.enabled}
|
||||
{#if !authConfig.enabled}
|
||||
{#if authConfig.passwordLoginEnabled}
|
||||
<div class="inline-flex items-center justify-center w-full">
|
||||
<hr class="w-3/4 h-px my-4 bg-gray-200 border-0 dark:bg-gray-600" />
|
||||
|
|
@ -141,19 +140,21 @@
|
|||
<p class="text-red-400" transition:fade>{oauthError}</p>
|
||||
{/if}
|
||||
<a href={authConfig.url} class="flex w-full">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
disabled={loading || oauthLoading}
|
||||
class={'inline-flex items-center h-14 ' + authConfig.passwordLoginEnabled
|
||||
? 'immich-btn-secondary-big'
|
||||
: 'immich-btn-primary-big'}
|
||||
size="lg"
|
||||
fullwidth
|
||||
color={authConfig.passwordLoginEnabled ? 'secondary' : 'primary'}
|
||||
>
|
||||
{#if oauthLoading}
|
||||
<LoadingSpinner />
|
||||
<span class="h-6">
|
||||
<LoadingSpinner />
|
||||
</span>
|
||||
{:else}
|
||||
{authConfig.buttonText || 'Login with OAuth'}
|
||||
{/if}
|
||||
</button>
|
||||
</Button>
|
||||
</a>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue