vikunja-frontend/src/components/misc/notification.vue

51 lines
1.0 KiB
Vue

<template>
<notifications position="bottom left" :max="2" class="global-notification">
<template slot="body" slot-scope="props">
<div :class="['vue-notification-template', 'vue-notification', props.item.type]" @click="close(props)">
<div
class="notification-title"
v-html="props.item.title"
v-if="props.item.title"
>
</div>
<div
class="notification-content"
v-html="props.item.text"
>
</div>
<div
class="buttons is-right"
v-if="props.item.data && props.item.data.actions && props.item.data.actions.length > 0">
<button
:key="'action_'+i"
@click="action.callback"
class="button noshadow is-small" v-for="(action, i) in props.item.data.actions">
{{ action.title }}
</button>
</div>
</div>
</template>
</notifications>
</template>
<script>
export default {
name: 'notification',
methods: {
close(props) {
props.close()
},
},
}
</script>
<style scoped>
.vue-notification {
z-index: 9999;
}
.buttons {
margin-top: .5em;
}
</style>