98 lines
1.9 KiB
Vue
98 lines
1.9 KiB
Vue
|
<template>
|
||
|
|
|
||
|
|
<div v-if="showAlert" :class="['alert', type]" @click="dismiss">
|
||
|
|
<img v-if="icon" :src="icon" alt="Notification icon" />
|
||
|
|
<div class="message-container">
|
||
|
|
<h4 class="heading">{{ heading }}</h4>
|
||
|
|
<p class="message">{{ message }}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
|
||
|
|
/* Display as a toast, in the bottom right corner */
|
||
|
|
/* Place the icon to the left for the full height, then have the heading and message stacked to the right */
|
||
|
|
|
||
|
|
.alert {
|
||
|
|
position: fixed;
|
||
|
|
bottom: 1em;
|
||
|
|
right: 1em;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 1em;
|
||
|
|
border-radius: 5px;
|
||
|
|
color: white;
|
||
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
.alert img {
|
||
|
|
width: 2em;
|
||
|
|
height: 2em;
|
||
|
|
margin-right: 1em;
|
||
|
|
|
||
|
|
/* Invert svg colors */
|
||
|
|
filter: invert(1);
|
||
|
|
}
|
||
|
|
|
||
|
|
.alert.error {
|
||
|
|
background-color: #f44336;
|
||
|
|
}
|
||
|
|
|
||
|
|
.alert.success {
|
||
|
|
background-color: #4CAF50;
|
||
|
|
}
|
||
|
|
|
||
|
|
.alert.info {
|
||
|
|
background-color: #2196F3;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import alert from '@/alert';
|
||
|
|
|
||
|
|
const alertIcons = {
|
||
|
|
error: require('@/assets/notification-error.svg'),
|
||
|
|
success: require('@/assets/notification-success.svg'),
|
||
|
|
info: require('@/assets/notification-info.svg')
|
||
|
|
};
|
||
|
|
|
||
|
|
export default {
|
||
|
|
name: 'AlertToast',
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showAlert: false,
|
||
|
|
heading: '',
|
||
|
|
message: '',
|
||
|
|
type: ''
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
icon() {
|
||
|
|
return this.type && alertIcons[this.type] ? alertIcons[this.type] : null;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
alert.subscribe(this.show);
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
show({ heading, message, type }) {
|
||
|
|
this.heading = heading;
|
||
|
|
this.message = message;
|
||
|
|
this.type = type;
|
||
|
|
this.showAlert = true;
|
||
|
|
setTimeout(() => {
|
||
|
|
this.showAlert = false;
|
||
|
|
}, 5000);
|
||
|
|
},
|
||
|
|
dismiss() {
|
||
|
|
this.showAlert = false;
|
||
|
|
},
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|