storj/web/satellite/src/components/notifications/Notification.vue

// Copyright (C) 2019 Storj Labs, Inc.
// See LICENSE for copying information.

<template>
    <div :style="configuration.style" class="notification-wrap" @mouseover="onMouseOver" @mouseleave="onMouseLeave" >
        <div class="notification-wrap__text">
            <div v-html="configuration.imageSource"></div>
            <p>{{message}}</p>
        </div>
        <div class="notification-wrap__buttons-group" v-on:click="onCloseClick">
            <span class="notification-wrap__buttons-group__close" v-html="configuration.closeImage"></span>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { NOTIFICATION_IMAGES, NOTIFICATION_TYPES } from '@/utils/constants/notification';
import { NOTIFICATION_ACTIONS } from '@/utils/constants/actionNames';

@Component({
    props: {
        type: String,
        message: String,
    },
    methods: {
        // Force delete notification
        onCloseClick: function (): void {
            this.$store.dispatch(NOTIFICATION_ACTIONS.DELETE);
        },
        // Force notification to stay on page on mouse over it
        onMouseOver: function (): void {
            this.$store.dispatch(NOTIFICATION_ACTIONS.PAUSE);
        },
        // Resume notification flow when mouse leaves notification
        onMouseLeave: function (): void {
            this.$store.dispatch(NOTIFICATION_ACTIONS.RESUME);
        },
    },
    computed: {
        configuration: function () {
            let backgroundColor;
            let imageSource;

            // Switch for choosing notification style depends on notification type
            switch (this.$props.type) {
                case NOTIFICATION_TYPES.SUCCESS:
                    backgroundColor = 'rgba(214, 235, 208, 0.4)';
                    imageSource = NOTIFICATION_IMAGES.SUCCESS;
                    break;

                case NOTIFICATION_TYPES.ERROR:
                    backgroundColor = 'rgba(246, 205, 204, 0.4)';
                    imageSource = NOTIFICATION_IMAGES.ERROR;
                    break;
                case NOTIFICATION_TYPES.NOTIFICATION:
                default:
                    backgroundColor = 'rgba(219, 225, 232, 0.4)';
                    imageSource = NOTIFICATION_IMAGES.NOTIFICATION;
                    break;
            }

            return {
                style: {
                    backgroundColor
                },
                imageSource,
                closeImage: NOTIFICATION_IMAGES.CLOSE
            };
        },
    }
})

export default class Notification extends Vue {
}
</script>

<style scoped lang="scss">
    .notification-wrap {
        width: 100%;
        height: 98px;
        display: flex;
        justify-content: space-between;
        padding: 0 50px;
        align-items: center;

        &__text {
            display: flex;
            align-items: center;

            p {
                font-family: 'montserrat_medium';
                font-size: 16px;
                margin-left: 40px;

                span {
                    margin-right: 10px;
                }
            }
        }

        &__buttons-group {
            display: flex;
            
            &__close {
                width: 32px;
                height: 32px;
                cursor: pointer;
            }
        }
    }
</style>