sebclem/hassio-nextcloud-backup
1
0
Fork 0
mirror of https://github.com/Sebclem/hassio-nextcloud-backup.git synced 2024-12-25 15:26:43 +01:00
Code Issues Projects Releases Wiki Activity

Fix alert view

Browse Source
This commit is contained in:
SebClem 2024-07-12 17:07:00 +02:00
parent c043f27f93
commit 5af1aa6fba
Signed by: sebclem
GPG Key ID: 5A4308F6A359EA50
1 changed files with 38 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
nextcloud_backup/frontend/src/components/AlertManager.vue
View File

@ -1,35 +1,37 @@
<template>
<v-fade-transition>
<div id="alertContainer" v-if="alertVisible">
<v-slide-x-transition group tag="div">
<v-alert
v-for="alert of alertList"
v-bind:key="alert.id"
elevation="24"
:type="alert.type"
border="start"
class="mb-2"
>
<v-row dense>
<v-col v-html="alert.message"></v-col>
<v-col cols="2">
<v-btn
class="d-inline"
size="30"
variant="text"
rounded
icon="$close"
@click="alertStore.remove(alert.id)"
></v-btn>
</v-col>
</v-row>
<div id="parent" v-if="alertVisible">
<div id="alertContainer">
<v-slide-x-transition group tag="div">
<v-alert
v-for="alert of alertList"
v-bind:key="alert.id"
elevation="24"
:type="alert.type"
border="start"
class="mb-2"
>
<v-row dense>
<v-col v-html="alert.message"></v-col>
<v-col cols="2">
<v-btn
class="d-inline"
size="30"
variant="text"
rounded
icon="$close"
@click="alertStore.remove(alert.id)"
></v-btn>
</v-col>
</v-row>
<v-progress-linear
:max="alertStore.timeOutValue"
:model-value="alert.timeOut"
></v-progress-linear>
</v-alert>
</v-slide-x-transition>
<v-progress-linear
:max="alertStore.timeOutValue"
:model-value="alert.timeOut"
></v-progress-linear>
</v-alert>
</v-slide-x-transition>
</div>
</div>
</v-fade-transition>
</template>
@ -45,11 +47,17 @@ const { alertList } = storeToRefs(alertStore);
const alertVisible = computed(() => alertList.value.length > 0);
</script>
<style>
#alertContainer {
#parent {
position: absolute;
top: 70px;
right: 20px;
z-index: 99999;
height: 100vh;
#alertContainer {
position: sticky;
top: 80px;
right: 20px;
}
}
</style>
@/store/alert