1
1
mirror of https://github.com/Fabio286/antares.git synced 2025-06-05 21:59:22 +02:00

Notifications board

This commit is contained in:
2020-05-15 17:52:59 +02:00
parent aea94f0325
commit 55b1991869
15 changed files with 363 additions and 26 deletions

View File

@ -0,0 +1,73 @@
<template>
<div class="toast mt-2" :class="notificationStatus.className">
<span class="p-vcentered text-left">
<i class="material-icons mr-1">{{ notificationStatus.iconName }}</i>
<span class="notification-message">{{ message }}</span>
</span>
<button class="btn btn-clear" @click="hideToast" />
</div>
</template>
<script>
export default { // TODO: open notifications button
name: 'BaseNotification',
props: {
message: {
type: String,
default: ''
},
status: {
type: String,
default: ''
}
},
computed: {
notificationStatus () {
let className = '';
let iconName = '';
switch (this.status) {
case 'success':
className = 'toast-success';
iconName = 'done';
break;
case 'error':
className = 'toast-error';
iconName = 'error';
break;
case 'warning':
className = 'toast-warning';
iconName = 'warning';
break;
case 'primary':
className = 'toast-primary';
iconName = 'info_outline';
break;
}
return { className, iconName };
}
},
methods: {
hideToast () {
this.$emit('close');
}
}
};
</script>
<style scoped>
.toast{
display: flex;
justify-content: space-between;
user-select: text;
word-break: break-all;
}
.notification-message{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
width: 25rem;
user-select: none;
}
</style>