mirror of
https://github.com/Sebclem/hassio-nextcloud-backup.git
synced 2024-09-12 00:39:06 +02:00
Fix alert view
This commit is contained in:
parent
049beb53b8
commit
2c03791db5
@ -1,35 +1,37 @@
|
|||||||
<template>
|
<template>
|
||||||
<v-fade-transition>
|
<v-fade-transition>
|
||||||
<div id="alertContainer" v-if="alertVisible">
|
<div id="parent" v-if="alertVisible">
|
||||||
<v-slide-x-transition group tag="div">
|
<div id="alertContainer">
|
||||||
<v-alert
|
<v-slide-x-transition group tag="div">
|
||||||
v-for="alert of alertList"
|
<v-alert
|
||||||
v-bind:key="alert.id"
|
v-for="alert of alertList"
|
||||||
elevation="24"
|
v-bind:key="alert.id"
|
||||||
:type="alert.type"
|
elevation="24"
|
||||||
border="start"
|
:type="alert.type"
|
||||||
class="mb-2"
|
border="start"
|
||||||
>
|
class="mb-2"
|
||||||
<v-row dense>
|
>
|
||||||
<v-col v-html="alert.message"></v-col>
|
<v-row dense>
|
||||||
<v-col cols="2">
|
<v-col v-html="alert.message"></v-col>
|
||||||
<v-btn
|
<v-col cols="2">
|
||||||
class="d-inline"
|
<v-btn
|
||||||
size="30"
|
class="d-inline"
|
||||||
variant="text"
|
size="30"
|
||||||
rounded
|
variant="text"
|
||||||
icon="$close"
|
rounded
|
||||||
@click="alertStore.remove(alert.id)"
|
icon="$close"
|
||||||
></v-btn>
|
@click="alertStore.remove(alert.id)"
|
||||||
</v-col>
|
></v-btn>
|
||||||
</v-row>
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
|
||||||
<v-progress-linear
|
<v-progress-linear
|
||||||
:max="alertStore.timeOutValue"
|
:max="alertStore.timeOutValue"
|
||||||
:model-value="alert.timeOut"
|
:model-value="alert.timeOut"
|
||||||
></v-progress-linear>
|
></v-progress-linear>
|
||||||
</v-alert>
|
</v-alert>
|
||||||
</v-slide-x-transition>
|
</v-slide-x-transition>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</v-fade-transition>
|
</v-fade-transition>
|
||||||
</template>
|
</template>
|
||||||
@ -45,11 +47,17 @@ const { alertList } = storeToRefs(alertStore);
|
|||||||
const alertVisible = computed(() => alertList.value.length > 0);
|
const alertVisible = computed(() => alertList.value.length > 0);
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
#alertContainer {
|
#parent {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 70px;
|
top: 70px;
|
||||||
right: 20px;
|
right: 20px;
|
||||||
z-index: 99999;
|
z-index: 99999;
|
||||||
|
height: 100vh;
|
||||||
|
#alertContainer {
|
||||||
|
position: sticky;
|
||||||
|
top: 80px;
|
||||||
|
right: 20px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@/store/alert
|
@/store/alert
|
||||||
|
Loading…
Reference in New Issue
Block a user