mirror of https://github.com/lissy93/dashy
73 lines
1.4 KiB
Vue
73 lines
1.4 KiB
Vue
<template>
|
|
<modal :name="name" :resizable="true" width="80%" height="80%" @closed="modalClosed()"
|
|
classes="dashy-modal">
|
|
<div slot="top-right" @click="hide()">Close</div>
|
|
<a @click="hide()" class="close-button" title="Close">x</a>
|
|
<iframe v-if="url" :src="url" @keydown.esc="close" class="frame"/>
|
|
<div v-else class="no-url">No URL Specified</div>
|
|
</modal>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'IframeModal',
|
|
props: {
|
|
name: String,
|
|
},
|
|
data: () => ({
|
|
url: '#',
|
|
}),
|
|
methods: {
|
|
show(url) {
|
|
this.url = url;
|
|
this.$modal.show(this.name);
|
|
this.$emit('modalChanged', true);
|
|
},
|
|
hide() {
|
|
this.$modal.hide(this.name);
|
|
},
|
|
modalClosed() {
|
|
this.$emit('modalChanged', false);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
.frame {
|
|
width: 100%;
|
|
height: 100%;
|
|
border: none;
|
|
}
|
|
|
|
.no-url {
|
|
margin: 4rem auto;
|
|
width: fit-content;
|
|
font-size: 2rem;
|
|
padding: 0.5rem;
|
|
border: 1px dashed #ff0000;
|
|
border-radius: 3px;
|
|
background: #f4f2f2;
|
|
}
|
|
|
|
.close-button {
|
|
position: absolute;
|
|
right: 0;
|
|
padding: 0.5rem;
|
|
border: 0;
|
|
border-radius: 0 0 0 10px;
|
|
background: var(--primary);
|
|
color: var(--background);
|
|
border-left: 1px solid var(--primary);
|
|
border-bottom: 1px solid var(--primary);
|
|
cursor: pointer;
|
|
&:hover {
|
|
background: var(--background);
|
|
color: var(--primary);
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|