You've already forked AstralRinth
forked from didirus/AstralRinth
Nitrrine
77 lines
2.0 KiB
Vue
77 lines
2.0 KiB
Vue
<template>
|
|
<Transition name="save-banner">
|
|
<div
|
|
v-if="props.isVisible"
|
|
data-pyro-save-banner
|
|
class="fixed bottom-16 left-0 right-0 z-[10] mx-auto h-fit w-full max-w-4xl transition-all duration-300 sm:bottom-8"
|
|
>
|
|
<div class="mx-2 rounded-2xl border-2 border-solid border-button-border bg-bg-raised p-4">
|
|
<div class="flex flex-col items-center justify-between gap-2 md:flex-row">
|
|
<span class="font-bold text-contrast">Careful, you have unsaved changes!</span>
|
|
<div class="flex gap-2">
|
|
<ButtonStyled type="transparent" color="standard">
|
|
<button :disabled="props.isUpdating" @click="props.reset">Reset</button>
|
|
</ButtonStyled>
|
|
<ButtonStyled type="standard" :color="props.restart ? 'standard' : 'brand'">
|
|
<button :disabled="props.isUpdating" @click="props.save">
|
|
{{ props.isUpdating ? 'Saving...' : 'Save' }}
|
|
</button>
|
|
</ButtonStyled>
|
|
<ButtonStyled v-if="props.restart" type="standard" color="brand">
|
|
<button :disabled="props.isUpdating" @click="saveAndRestart">
|
|
{{ props.isUpdating ? 'Saving...' : 'Save & restart' }}
|
|
</button>
|
|
</ButtonStyled>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ButtonStyled, injectModrinthClient } from '@modrinth/ui'
|
|
|
|
const props = defineProps<{
|
|
isUpdating: boolean
|
|
restart?: boolean
|
|
save: () => void
|
|
reset: () => void
|
|
isVisible: boolean
|
|
serverId: string
|
|
}>()
|
|
|
|
const client = injectModrinthClient()
|
|
|
|
const saveAndRestart = async () => {
|
|
props.save()
|
|
await client.archon.servers_v0.power(props.serverId, 'Restart')
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.save-banner-enter-active {
|
|
transition:
|
|
opacity 300ms,
|
|
transform 300ms;
|
|
}
|
|
|
|
.save-banner-leave-active {
|
|
transition:
|
|
opacity 200ms,
|
|
transform 200ms;
|
|
}
|
|
|
|
.save-banner-enter-from,
|
|
.save-banner-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(100%) scale(0.98);
|
|
}
|
|
|
|
.save-banner-enter-to,
|
|
.save-banner-leave-from {
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
</style>
|