sebclem/hassio-nextcloud-backup
1
0
Fork 0
mirror of https://github.com/Sebclem/hassio-nextcloud-backup.git synced 2024-11-30 04:44:54 +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 049beb53b8
commit 2c03791db5
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> <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