101 lines
3.2 KiB
Vue
101 lines
3.2 KiB
Vue
<template>
|
||
<div class="modal-card">
|
||
<header class="modal-card-head" v-if="title">
|
||
<p class="modal-card-title">{{ title }}</p>
|
||
</header>
|
||
|
||
<section
|
||
class="modal-card-body is-flex"
|
||
:class="{ 'is-titleless': !title }">
|
||
<div class="media">
|
||
<div
|
||
class="media-left">
|
||
<b-icon
|
||
icon="alert"
|
||
type="is-warning"
|
||
size="is-large"/>
|
||
</div>
|
||
<div class="media-content">
|
||
<p>The report will be sent to the moderators of your instance.
|
||
You can explain why you report this content below.</p>
|
||
|
||
<div class="control">
|
||
<b-input
|
||
v-model="content"
|
||
type="textarea"
|
||
@keyup.enter="confirm"
|
||
placeholder="Additional comments"
|
||
/>
|
||
</div>
|
||
|
||
<p v-if="outsideDomain">
|
||
The content came from another server. Transfer an anonymous copy of the report ?
|
||
</p>
|
||
|
||
<div class="control" v-if="outsideDomain">
|
||
<b-switch v-model="forward">Transfer to {{ outsideDomain }}</b-switch>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="modal-card-foot">
|
||
<button
|
||
class="button"
|
||
ref="cancelButton"
|
||
@click="cancel('button')">
|
||
{{ cancelText }}
|
||
</button>
|
||
<button
|
||
class="button is-primary"
|
||
ref="confirmButton"
|
||
@click="confirm">
|
||
{{ confirmText }}
|
||
</button>
|
||
</footer>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import { Component, Prop, Vue } from 'vue-property-decorator';
|
||
import { removeElement } from 'buefy/src/utils/helpers';
|
||
|
||
@Component({
|
||
mounted() {
|
||
this.$data.isActive = true;
|
||
},
|
||
})
|
||
export default class ReportModal extends Vue {
|
||
@Prop({ type: Function, default: () => {} }) onConfirm;
|
||
@Prop({ type: String }) title;
|
||
@Prop({ type: String, default: '' }) outsideDomain;
|
||
@Prop({ type: String, default: 'Cancel' }) cancelText;
|
||
@Prop({ type: String, default: 'Send the report' }) confirmText;
|
||
|
||
isActive: boolean = false;
|
||
content: string = '';
|
||
forward: boolean = false;
|
||
|
||
confirm() {
|
||
this.onConfirm(this.content, this.forward);
|
||
this.close();
|
||
}
|
||
|
||
/**
|
||
* Close the Dialog.
|
||
*/
|
||
close() {
|
||
this.isActive = false;
|
||
// Timeout for the animation complete before destroying
|
||
setTimeout(() => {
|
||
this.$destroy();
|
||
removeElement(this.$el);
|
||
}, 150);
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss">
|
||
.modal-card .modal-card-foot {
|
||
justify-content: flex-end;
|
||
}
|
||
</style> |