Use events on modal close button click

This commit is contained in:
Samuel Elliott 2018-03-30 00:57:01 +01:00
parent 9b1dd771ad
commit fd3b0a92ce
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
7 changed files with 13 additions and 45 deletions

View File

@ -9,7 +9,7 @@
*/
<template>
<Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" :close="modal.close">
<Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
<div slot="body" class="bd-modal-basic-body">{{ modal.text }}</div>
<div slot="footer" class="bd-modal-controls">
<div class="bd-flex-grow"></div>

View File

@ -9,7 +9,7 @@
*/
<template>
<Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" :close="modal.close">
<Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
<div slot="body" class="bd-modal-basic-body">{{ modal.text }}</div>
<div slot="footer" class="bd-modal-controls">
<div class="bd-flex-grow"></div>

View File

@ -1,5 +1,5 @@
<template>
<Modal :headerText="modal.event.header" :close="modal.close"
<Modal :headerText="modal.event.header" @close="modal.close"
:class="[{'bd-err': modal.event.type && modal.event.type === 'err'}, {'bd-modal-out': modal.closing}]">
<MiError v-if="modal.event.type === 'err'" slot="icon" size="20"/>
<div slot="body">

View File

@ -9,7 +9,7 @@
*/
<template>
<Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" :close="modal.close">
<Modal :class="['bd-modal-basic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
<div slot="body" class="bd-modal-basic-body">
<div v-for="(perm, i) in permissions" :key="`perm-${i}`" class="bd-perm-scope">
<div class="bd-perm-allow">

View File

@ -10,7 +10,7 @@
<template>
<div class="bd-settings-modal" :class="{'bd-edited': changed}">
<Modal :headerText="modal.headertext" :close="modal.close" :class="{'bd-modal-out': modal.closing}">
<Modal :class="{'bd-modal-out': modal.closing}" :headerText="modal.headertext" @close="modal.close">
<SettingsPanel :settings="settings" :schemes="modal.schemes" slot="body" class="bd-settings-modal-body" />
<div slot="footer" class="bd-footer-alert" :class="{'bd-active': changed || saving, 'bd-warn': warnclose}" :style="{pointerEvents: changed ? 'all' : 'none'}">
<div class="bd-footer-alert-text">Unsaved changes</div>
@ -23,9 +23,9 @@
</Modal>
</div>
</template>
<script>
// Imports
import Vue from 'vue';
import { Modal } from '../../common';
import SettingsPanel from '../SettingsPanel.vue';
import { Utils, ClientLogger as Logger } from 'common';
@ -54,10 +54,9 @@
if (this.saving) return;
this.saving = true;
try {
if (this.modal.saveSettings) await this.modal.saveSettings(this.settings);
else await this.modal.settings.merge(this.settings);
await this.modal.saveSettings ? this.modal.saveSettings(this.settings) : this.modal.settings.merge(this.settings);
} catch (err) {
// TODO Display error that settings failed to save
// TODO: display error that settings failed to save
Logger.err('SettingsModal', ['Failed to save settings:', err]);
}
this.saving = false;

View File

@ -1,30 +0,0 @@
/**
* BetterDiscord Error Modal Component
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
* All rights reserved.
* https://betterdiscord.net
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
<template>
<div class="bd-modal-error" :class="{'bd-open': content.showStack}">
<div class="bd-modal-error-title bd-flex">
<span class="bd-modal-title-text bd-flex-grow">{{content.message}}</span>
<span class="bd-modal-titlelink" v-if="content.showStack" @click="hideStack(content)">Hide Stacktrace</span>
<span class="bd-modal-titlelink" v-else @click="showStack(content)">Show Stacktrace</span>
</div>
<div class="bd-scroller-wrap">
<div class="bd-scroller">
<div class="bd-modal-error-body"><span>{{content.err.message}}</span>
{{content.stackTrace}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: ['content', 'hideStack', 'showStack']
}
</script>

View File

@ -15,8 +15,8 @@
<div class="bd-modal-icon">
<slot name="icon" />
</div>
<span class="bd-modal-headertext">{{headerText}}</span>
<div class="bd-modal-x" @click="e => close(e.shiftKey, e)">
<span class="bd-modal-headertext">{{ headerText }}</span>
<div class="bd-modal-x" @click="$emit('close', $event.shiftKey, $event)">
<MiClose size="18" />
</div>
</div>
@ -39,7 +39,7 @@
import { MiClose } from './MaterialIcon';
export default {
props: ['headerText', 'close'],
props: ['headerText'],
components: {
MiClose
},
@ -56,9 +56,8 @@
},
methods: {
keyupListener(e) {
if (e.which === 27) {
this.close();
}
if (e.which === 27)
this.$emit('close', false, e);
}
}
}