mirror of
https://github.com/koel/koel
synced 2025-01-09 19:28:44 +00:00
123 lines
2.5 KiB
Vue
123 lines
2.5 KiB
Vue
<template>
|
|
<div id="overlay" v-show="state.showing" class="overlay" :class="state.type">
|
|
<div class="display">
|
|
<sound-bar v-show="state.type === 'loading'"/>
|
|
<i class="fa fa-exclamation-circle" v-show="state.type === 'error'"/>
|
|
<i class="fa fa-exclamation-triangle" v-show="state.type === 'warning'"/>
|
|
<i class="fa fa-info-circle" v-show="state.type === 'info'"/>
|
|
<i class="fa fa-check-circle" v-show="state.type === 'success'"/>
|
|
|
|
<span v-html="state.message"/>
|
|
</div>
|
|
|
|
<button v-show="state.dismissable" @click.prevent="state.showing = false">Close</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { assign } from 'lodash'
|
|
|
|
import { event } from '../../utils'
|
|
import soundBar from './sound-bar.vue'
|
|
|
|
export default {
|
|
components: { soundBar },
|
|
|
|
data () {
|
|
return {
|
|
state: {
|
|
showing: true,
|
|
dismissable: false,
|
|
/**
|
|
* Either 'loading', 'success', 'info', 'warning', or 'error'.
|
|
* This dictates the icon as well as possibly other visual appearances.
|
|
*
|
|
* @type {String}
|
|
*/
|
|
type: 'loading',
|
|
message: ''
|
|
}
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* Shows the overlay.
|
|
*
|
|
* @param {String} message The message to display.
|
|
* @param {String} type (loading|success|info|warning|error)
|
|
* @param {Boolean} dismissable Whether to show the Close button
|
|
*/
|
|
show (options) {
|
|
assign(this.state, options)
|
|
this.state.showing = true
|
|
},
|
|
|
|
/**
|
|
* Hide the overlay.
|
|
*/
|
|
hide () {
|
|
this.state.showing = false
|
|
},
|
|
|
|
/**
|
|
* Set the overlay to be dismissable (or not).
|
|
* A Close button will be shown/hidden correspondingly.
|
|
*
|
|
* @param {Boolean} dismissable
|
|
*/
|
|
setDimissable (dismissable = true) {
|
|
this.state.dismissable = dismissable
|
|
}
|
|
},
|
|
|
|
created () {
|
|
event.on({
|
|
'overlay:show': options => this.show(options),
|
|
'overlay:hide': () => this.hide()
|
|
})
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import "../../../sass/partials/_vars.scss";
|
|
@import "../../../sass/partials/_mixins.scss";
|
|
|
|
#overlay {
|
|
background-color: rgba(0, 0, 0, 1);
|
|
flex-direction: column;
|
|
|
|
.display {
|
|
@include vertical-center();
|
|
|
|
i {
|
|
margin-right: 6px;
|
|
}
|
|
}
|
|
|
|
button {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
&.error {
|
|
color: $colorRed;
|
|
}
|
|
|
|
&.success {
|
|
color: $colorGreen;
|
|
}
|
|
|
|
&.info {
|
|
color: $colorBlue;
|
|
}
|
|
|
|
&.loading {
|
|
color: $color2ndText;
|
|
}
|
|
|
|
&.warning {
|
|
color: $colorOrange;
|
|
}
|
|
}
|
|
</style>
|