2018-08-11 01:47:10 -04:00
|
|
|
<template>
|
2022-02-19 00:39:14 -05:00
|
|
|
<section v-if="notifications.length > 0" class="fd-notifications">
|
2018-08-11 01:47:10 -04:00
|
|
|
<div class="columns is-centered">
|
|
|
|
<div class="column is-half">
|
2022-05-29 12:49:00 -04:00
|
|
|
<div
|
|
|
|
v-for="notification in notifications"
|
|
|
|
:key="notification.id"
|
|
|
|
class="notification has-shadow"
|
|
|
|
:class="[
|
|
|
|
'notification',
|
|
|
|
notification.type ? `is-${notification.type}` : ''
|
|
|
|
]"
|
|
|
|
>
|
2022-02-19 00:39:14 -05:00
|
|
|
<button class="delete" @click="remove(notification)" />
|
2022-05-20 07:44:22 -04:00
|
|
|
<span v-text="notification.text" />
|
2018-08-11 01:47:10 -04:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import * as types from '@/store/mutation_types'
|
|
|
|
|
|
|
|
export default {
|
2022-02-19 01:05:59 -05:00
|
|
|
name: 'NotificationList',
|
2022-02-19 00:39:14 -05:00
|
|
|
components: {},
|
2018-08-11 01:47:10 -04:00
|
|
|
|
2022-02-19 00:39:14 -05:00
|
|
|
data() {
|
2018-08-11 01:47:10 -04:00
|
|
|
return { showNav: false }
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
2022-02-19 00:39:14 -05:00
|
|
|
notifications() {
|
2018-08-11 01:47:10 -04:00
|
|
|
return this.$store.state.notifications.list
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
methods: {
|
2023-06-07 15:25:54 -04:00
|
|
|
remove(notification) {
|
2018-08-11 01:47:10 -04:00
|
|
|
this.$store.commit(types.DELETE_NOTIFICATION, notification)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.fd-notifications {
|
|
|
|
position: fixed;
|
|
|
|
bottom: 60px;
|
|
|
|
z-index: 20000;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
.fd-notifications .notification {
|
|
|
|
margin-bottom: 10px;
|
|
|
|
margin-left: 24px;
|
|
|
|
margin-right: 24px;
|
2023-11-21 11:09:06 -05:00
|
|
|
box-shadow:
|
|
|
|
0 4px 8px 0 rgba(0, 0, 0, 0.2),
|
|
|
|
0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
2018-08-11 01:47:10 -04:00
|
|
|
}
|
|
|
|
</style>
|