125 lines
2.7 KiB
Vue
125 lines
2.7 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
|
|
import { computed } from 'vue'
|
|
import AppLogo from '@/components/AppLogo.vue'
|
|
import type { RestartKind } from '@/composables/useUpdate'
|
|
import { formatStartedAt, formatStartedWithAge } from '@/lib/updateFormat'
|
|
|
|
const LOGO_SIZE = 26
|
|
|
|
const props = defineProps<{
|
|
kind: RestartKind | null
|
|
version: string
|
|
startedAt: string
|
|
slow: boolean
|
|
now: number
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
reload: []
|
|
}>()
|
|
|
|
const copy = computed(() => {
|
|
if (props.slow) {
|
|
return {
|
|
get title() {
|
|
return t('Still restarting')
|
|
},
|
|
get text() {
|
|
return t(
|
|
'This is taking longer than usual. Keep this page open. It reloads on its own when the site is back, or you can reload it now.',
|
|
)
|
|
},
|
|
}
|
|
}
|
|
if (props.kind === 'update') {
|
|
return {
|
|
get title() {
|
|
return t('Installing version {0}', [props.version])
|
|
},
|
|
get text() {
|
|
return t(
|
|
'Your site is restarting with the new version. This takes about 10 seconds. This page reloads on its own when the site is back.',
|
|
)
|
|
},
|
|
}
|
|
}
|
|
return {
|
|
get title() {
|
|
return t('Restarting your site')
|
|
},
|
|
get text() {
|
|
return t(
|
|
'This takes about 10 seconds. This page reloads on its own when the site is back.',
|
|
)
|
|
},
|
|
}
|
|
})
|
|
|
|
const meta = computed(() =>
|
|
props.slow
|
|
? formatStartedWithAge(props.startedAt, new Date(props.now))
|
|
: formatStartedAt(props.startedAt),
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
role="status"
|
|
data-testid="restart-overlay"
|
|
class="fixed inset-0 z-70 flex items-center justify-center bg-muted p-6"
|
|
>
|
|
<div class="flex w-full max-w-110 flex-col items-start gap-4">
|
|
<AppLogo :size="LOGO_SIZE" />
|
|
<div class="flex flex-col gap-1.5">
|
|
<h2 class="text-xl/7.5 font-semibold text-highlighted" data-testid="restart-title">
|
|
{{ copy.title }}
|
|
</h2>
|
|
<span class="text-base/5.5 text-pretty text-toned" data-testid="restart-text">{{
|
|
copy.text
|
|
}}</span>
|
|
</div>
|
|
<div
|
|
role="progressbar"
|
|
:aria-label="t('Restarting')"
|
|
class="h-1 w-full overflow-hidden bg-accented"
|
|
>
|
|
<div class="restart-bar h-1 w-7/20 bg-primary" />
|
|
</div>
|
|
<span class="text-xs text-muted" data-testid="restart-meta">{{ meta }}</span>
|
|
<UButton
|
|
v-if="slow"
|
|
color="neutral"
|
|
variant="outline"
|
|
class="h-11 gap-1.5 border border-accented bg-default px-3.5 text-highlighted ring-0 md:h-8"
|
|
@click="emit('reload')"
|
|
>
|
|
{{ t('Reload page') }}
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.restart-bar {
|
|
margin-left: 30%;
|
|
animation: restart-slide 1.6s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.restart-bar {
|
|
animation: none;
|
|
}
|
|
}
|
|
|
|
@keyframes restart-slide {
|
|
from {
|
|
margin-left: 0;
|
|
}
|
|
to {
|
|
margin-left: 65%;
|
|
}
|
|
}
|
|
</style>
|