2019-01-24 20:15:10 +00:00
|
|
|
// Copyright (C) 2019 Storj Labs, Inc.
|
2018-12-12 13:44:01 +00:00
|
|
|
// See LICENSE for copying information.
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<div id="notificationArea" class="notification-container" v-if="currentNotification" >
|
|
|
|
<Notification :type="currentNotification.type" :message="currentNotification.message" />
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script lang="ts">
|
|
|
|
import { Component, Vue } from 'vue-property-decorator';
|
|
|
|
import Notification from '@/components/notifications/Notification.vue';
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
computed: {
|
|
|
|
// Computed value for current notification depends on store.state value
|
2018-12-18 14:43:23 +00:00
|
|
|
currentNotification: function (): Notification {
|
2018-12-12 13:44:01 +00:00
|
|
|
return this.$store.getters.currentNotification;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
Notification,
|
|
|
|
}
|
|
|
|
})
|
|
|
|
|
2018-12-18 14:43:23 +00:00
|
|
|
export default class NotificationArea extends Vue {
|
|
|
|
}
|
2018-12-12 13:44:01 +00:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.notification-container {
|
|
|
|
height: 98px;
|
|
|
|
max-width: 80%;
|
|
|
|
width: 100%;
|
|
|
|
background-color: #fff;
|
|
|
|
display: flex;
|
|
|
|
position: fixed;
|
|
|
|
bottom: 50px;
|
|
|
|
right: 30px;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
box-shadow: 0px 12px 24px rgba(175, 183, 193, 0.4);
|
|
|
|
border-radius: 6px;
|
2018-12-20 16:44:42 +00:00
|
|
|
z-index: 9999;
|
2018-12-12 13:44:01 +00:00
|
|
|
}
|
|
|
|
</style>
|