Merge pull request #102 from JsSucks/error-modals

Modals
This commit is contained in:
Alexei Stukov 2018-02-07 14:25:16 +02:00 committed by GitHub
commit bcdd694ec9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 151 additions and 3 deletions

View File

@ -11,6 +11,7 @@
import Globals from './globals';
import { FileUtils, ClientLogger as Logger } from 'common';
import path from 'path';
import { Events } from 'modules';
export default class {
@ -32,6 +33,11 @@ export default class {
await this.preloadContent(dir);
} catch (err) {
//We don't want every plugin/theme to fail loading when one does
Events.emit('bd-error', {
header: `${this.moduleName} - Failed to load plugin: ${dir}`,
text: err.message,
type: 'err'
});
Logger.err(this.moduleName, err);
}
}

View File

@ -11,6 +11,7 @@
import ContentManager from './contentmanager';
import Plugin from './plugin';
import { ClientLogger as Logger } from 'common';
import { Events } from 'modules';
export default class extends ContentManager {

View File

@ -0,0 +1,3 @@
export default class {
}

View File

View File

@ -43,6 +43,37 @@
&.bd-modal-out {
animation: bd-modal-out 0.22s ease;
}
.bd-modal-header .bd-modal-icon .bd-material-design-icon {
margin-right: 5px;
}
&.bd-err {
.bd-modal-header .bd-modal-icon svg {
fill: $colerr;
}
}
.bd-modal-body .bd-scroller-wrap .bd-scroller {
color: #FFF;
}
.bd-modal-controls {
display: flex;
padding: 15px;
border-top: 1px solid #4a4a4a;
.bd-modal-tip {
flex-grow: 1;
line-height: 26px;
color: #FFF;
}
.bd-button {
padding: 5px 10px;
border-radius: 3px;
}
}
}
.bd-modal .bd-modal-inner {

View File

@ -11,6 +11,7 @@
import DOM from './dom';
import Vue from './vue';
import { BdSettingsWrapper } from './components';
import BdModals from './components/bd/BdModals.vue';
import { Events, WebpackModules } from 'modules';
import { Utils } from 'common';
@ -27,7 +28,6 @@ export default class {
});
});
}, 100);
}
static get profilePopupModule() {
@ -37,6 +37,14 @@ export default class {
static injectUi() {
DOM.createElement('bdtooltips').appendTo(DOM.bdBody);
DOM.createElement('div', null, 'bd-settings').appendTo(DOM.bdBody);
DOM.createElement('div', null, 'bd-modals').appendTo(DOM.bdModals);
const modals = new Vue({
el: '#bd-modals',
components: { BdModals },
template: '<BdModals/>'
});
const vueInstance = new Vue({
el: '#bd-settings',
components: { BdSettingsWrapper },

View File

@ -0,0 +1,64 @@
/**
* BetterDiscord Modals 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-modals-container">
<div v-for="(modal, index) in modals" :key="`bd-modal-${index}`">
<div v-if="index === 0" class="bd-backdrop" @click="closeModal(index)"></div>
<div v-else :style="{opacity: 0}" class="bd-backdrop" @click="closeModal(index)"></div>
<Modal :headerText="modal.header"
:close="() => closeModal(index)"
:class="[{'bd-err': modal.type && modal.type === 'err'}, {'bd-modal-out': modal.closing}]">
<MiError v-if="modal.type === 'err'" slot="icon" size="20"/>
<div slot="body">
{{modal.text}}
</div>
<div slot="footer" class="bd-modal-controls">
<span class="bd-modal-tip">Ctrl+Shift+I for more details</span>
<div class="bd-button bd-ok" @click="closeModal(index)">
OK
</div>
</div>
</Modal>
</div>
</div>
</template>
<script>
// Imports
import { Events } from 'modules';
import { Modal } from '../common';
import { MiError } from '../common/MaterialIcon';
export default {
data() {
return {
modals: []
}
},
components: {
Modal, MiError
},
beforeMount() {
Events.on('bd-error', e => {
e.closing = false;
this.modals.push(e);
});
},
methods: {
closeModal(index) {
this.modals[index].closing = true;
setTimeout(() => {
this.modals.splice(index, 1);
}, 200);
}
}
}
</script>

View File

@ -11,3 +11,4 @@ export { default as MiTwitterCircle } from './materialicons/TwitterCircle.vue';
export { default as MiPlus } from './materialicons/Plus.vue';
export { default as MiChevronDown } from './materialicons/ChevronDown.vue';
export { default as MiExtension } from './materialicons/Extension.vue';
export { default as MiError } from './materialicons/Error.vue';

View File

@ -12,6 +12,9 @@
<div :class="['bd-modal', {'bd-modal-scrolled': scrolled}]">
<div class="bd-modal-inner">
<div class="bd-modal-header">
<div class="bd-modal-icon">
<slot name="icon" />
</div>
<span class="bd-modal-headertext">{{headerText}}</span>
<div class="bd-modal-x" @click="close">
<MiClose size="18"/>

View File

@ -0,0 +1,27 @@
/**
* BetterDiscord Material Design Icon
* 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.
*
* Material Design Icons
* Copyright (c) 2014 Google
* Apache 2.0 LICENSE
* https://www.apache.org/licenses/LICENSE-2.0.txt
*/
<template>
<span class="bd-material-design-icon">
<svg :width="size || 24" :height="size || 24" viewBox="0 0 24 24">
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" />
</svg>
</span>
</template>
<script>
export default {
props: ['size']
}
</script>

View File

@ -105,6 +105,9 @@ class DOM {
static get bdTooltips() {
return this.getElement('bd-tooltips') || this.createElement('bd-tooltips').appendTo(this.bdBody);
}
static get bdModals() {
return this.getElement('bd-modals') || this.createElement('bd-modals').appendTo(this.bdBody);
}
static getElement(e) {
if (e instanceof BdNode) return e.element;

View File

@ -44,7 +44,8 @@ module.exports = {
path.resolve('..', 'node_modules'),
path.resolve('..', 'common', 'modules'),
path.resolve('src', 'modules'),
path.resolve('src', 'ui')
path.resolve('src', 'ui'),
path.resolve('src', 'plugins')
]
}
/* resolve: {

View File

@ -1,4 +1,4 @@
module.exports = (Plugin, Api, Vendor) => {
module.exports = (Plugin, Api, Vendor) =>
const { $, moment } = Vendor;
const { Events } = Api;