mirror of
https://github.com/owntone/owntone-server.git
synced 2025-01-05 20:13:23 -05:00
61 lines
1.3 KiB
Vue
61 lines
1.3 KiB
Vue
<template>
|
|
<section v-if="notifications.length > 0" class="fd-notifications">
|
|
<div class="columns is-centered">
|
|
<div class="column is-half">
|
|
<div
|
|
v-for="notification in notifications"
|
|
:key="notification.id"
|
|
class="notification has-shadow"
|
|
:class="[
|
|
'notification',
|
|
notification.type ? `is-${notification.type}` : ''
|
|
]"
|
|
>
|
|
<button class="delete" @click="remove(notification)" />
|
|
<span v-text="notification.text" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import * as types from '@/store/mutation_types'
|
|
|
|
export default {
|
|
name: 'NotificationList',
|
|
components: {},
|
|
|
|
data() {
|
|
return { showNav: false }
|
|
},
|
|
|
|
computed: {
|
|
notifications() {
|
|
return this.$store.state.notifications.list
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
remove(notification) {
|
|
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;
|
|
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
|
|
}
|
|
</style>
|