mirror of https://github.com/hykilpikonna/AquaDX
[O] Split status overlays
Azalea
parent
fe63e5db50
commit
a2dfdadc05
|
|
@ -1,87 +1,54 @@
|
||||||
<!-- Svelte 4.2.11 -->
|
<!-- Svelte 4.2.11 -->
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { fade } from 'svelte/transition'
|
import { fade } from 'svelte/transition'
|
||||||
import type { ConfirmProps } from "../libs/generalTypes";
|
import type { ConfirmProps } from "../libs/generalTypes";
|
||||||
import { DISCORD_INVITE } from "../libs/config";
|
import { DISCORD_INVITE } from "../libs/config";
|
||||||
import Icon from "@iconify/svelte";
|
import { t } from "../libs/i18n"
|
||||||
import { t } from "../libs/i18n"
|
import Loading from './ui/Loading.svelte';
|
||||||
|
import Error from './ui/Error.svelte';
|
||||||
// Props
|
|
||||||
export let confirm: ConfirmProps | null = null
|
// Props
|
||||||
export let error: string | null
|
export let confirm: ConfirmProps | null = null
|
||||||
export let loading: boolean = false
|
export let error: string | null
|
||||||
</script>
|
export let loading: boolean = false
|
||||||
|
</script>
|
||||||
{#if confirm}
|
|
||||||
<div class="overlay" transition:fade>
|
{#if confirm}
|
||||||
<div>
|
<div class="overlay" transition:fade>
|
||||||
<h2>{confirm.title}</h2>
|
<div>
|
||||||
<span>{confirm.message}</span>
|
<h2>{confirm.title}</h2>
|
||||||
|
<span>{confirm.message}</span>
|
||||||
<div class="actions">
|
|
||||||
{#if confirm.cancel}
|
<div class="actions">
|
||||||
<!-- Svelte LSP is very annoying here -->
|
{#if confirm.cancel}
|
||||||
<button on:click={() => {
|
<!-- Svelte LSP is very annoying here -->
|
||||||
confirm && confirm.cancel && confirm.cancel()
|
<button on:click={() => {
|
||||||
|
confirm && confirm.cancel && confirm.cancel()
|
||||||
// Set to null
|
|
||||||
confirm = null
|
// Set to null
|
||||||
}}>{t('action.cancel')}</button>
|
confirm = null
|
||||||
{/if}
|
}}>{t('action.cancel')}</button>
|
||||||
<button on:click={() => confirm && confirm.confirm()} class:error={confirm.dangerous}>{t('action.confirm')}</button>
|
{/if}
|
||||||
</div>
|
<button on:click={() => confirm && confirm.confirm()} class:error={confirm.dangerous}>{t('action.confirm')}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
</div>
|
||||||
|
{/if}
|
||||||
{#if error}
|
|
||||||
<div class="overlay" transition:fade>
|
{#if error}
|
||||||
<div>
|
<Error {error}/>
|
||||||
<h2 class="error">{t('status.error')}</h2>
|
{/if}
|
||||||
<span>{t('status.error.hint')}<a href={DISCORD_INVITE}>{t('status.error.hint.link')}</a></span>
|
|
||||||
<span>{t('status.detail', { detail: error })}</span>
|
{#if loading && !error}
|
||||||
|
<Loading/>
|
||||||
<div class="actions">
|
{/if}
|
||||||
<button on:click={() => location.reload()} class="error">
|
|
||||||
{t('action.refresh')}
|
<style lang="sass">
|
||||||
</button>
|
.actions
|
||||||
</div>
|
display: flex
|
||||||
</div>
|
gap: 16px
|
||||||
</div>
|
|
||||||
{/if}
|
button
|
||||||
|
width: 100%
|
||||||
{#if loading && !error}
|
</style>
|
||||||
<div class="overlay loading" transition:fade>
|
|
||||||
<Icon class="icon" icon="svg-spinners:pulse-2"/>
|
|
||||||
<span><span>LOADING</span></span>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<style lang="sass">
|
|
||||||
.actions
|
|
||||||
display: flex
|
|
||||||
gap: 16px
|
|
||||||
|
|
||||||
button
|
|
||||||
width: 100%
|
|
||||||
|
|
||||||
.loading.overlay
|
|
||||||
font-size: 28rem
|
|
||||||
|
|
||||||
:global(.icon)
|
|
||||||
opacity: 0.5
|
|
||||||
|
|
||||||
> span
|
|
||||||
position: absolute
|
|
||||||
inset: 0
|
|
||||||
display: flex
|
|
||||||
justify-content: center
|
|
||||||
align-items: center
|
|
||||||
background: transparent
|
|
||||||
|
|
||||||
letter-spacing: 20px
|
|
||||||
margin-left: 20px
|
|
||||||
|
|
||||||
font-size: 1.5rem
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { fade } from "svelte/transition";
|
||||||
|
import { t } from "../../libs/i18n";
|
||||||
|
import { DISCORD_INVITE } from "../../libs/config";
|
||||||
|
|
||||||
|
export let error: string;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="overlay" transition:fade>
|
||||||
|
<div>
|
||||||
|
<h2 class="error">{t('status.error')}</h2>
|
||||||
|
<span>{t('status.error.hint')}<a href={DISCORD_INVITE}>{t('status.error.hint.link')}</a></span>
|
||||||
|
<span>{t('status.detail', { detail: error })}</span>
|
||||||
|
|
||||||
|
<div class="actions">
|
||||||
|
<button on:click={() => location.reload()} class="error">
|
||||||
|
{t('action.refresh')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.actions
|
||||||
|
display: flex
|
||||||
|
gap: 16px
|
||||||
|
|
||||||
|
button
|
||||||
|
width: 100%
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,30 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import Icon from '@iconify/svelte';
|
||||||
|
import { fade } from 'svelte/transition'
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="overlay loading" transition:fade>
|
||||||
|
<Icon class="icon" icon="svg-spinners:pulse-2"/>
|
||||||
|
<span><span>LOADING</span></span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style lang="sass">
|
||||||
|
.loading.overlay
|
||||||
|
font-size: 28rem
|
||||||
|
|
||||||
|
:global(.icon)
|
||||||
|
opacity: 0.5
|
||||||
|
|
||||||
|
> span
|
||||||
|
position: absolute
|
||||||
|
inset: 0
|
||||||
|
display: flex
|
||||||
|
justify-content: center
|
||||||
|
align-items: center
|
||||||
|
background: transparent
|
||||||
|
|
||||||
|
letter-spacing: 20px
|
||||||
|
margin-left: 20px
|
||||||
|
|
||||||
|
font-size: 1.5rem
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue