mirror of
https://github.com/owntone/owntone-server.git
synced 2025-03-04 15:50:10 -05:00
55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<template>
|
|
<section v-if="notifications.length > 0" class="notifications">
|
|
<div class="columns is-centered">
|
|
<div class="column is-half">
|
|
<div
|
|
v-for="notification in notifications"
|
|
:key="notification.id"
|
|
class="notification"
|
|
:class="notification.type ? `is-${notification.type}` : ''"
|
|
>
|
|
<button class="delete" @click="remove(notification)" />
|
|
<div class="text" v-text="notification.text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'NotificationList',
|
|
|
|
computed: {
|
|
notifications() {
|
|
return this.$store.state.notifications.list
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
remove(notification) {
|
|
this.$store.dispatch('delete_notification', notification)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.notifications {
|
|
position: fixed;
|
|
bottom: 4rem;
|
|
z-index: 20000;
|
|
width: 100%;
|
|
}
|
|
.notifications .notification {
|
|
box-shadow:
|
|
0 4px 8px 0 rgba(0, 0, 0, 0.2),
|
|
0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
}
|
|
.notification .text {
|
|
overflow-wrap: break-word;
|
|
max-height: 6rem;
|
|
overflow: scroll;
|
|
}
|
|
</style>
|