lightcordwarez
/
BetterDiscordApp-v2
mirror of https://github.com/JsSucks/BetterDiscordApp
1
0
Fork 0
Code Issues 3 Releases Wiki Activity

Plugin settings modal

This commit is contained in:
Jiiks 2018-01-25 12:48:41 +02:00
parent 9a8f2eddef
commit a3f9b50c8c
7 changed files with 129 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
client/src/modules/ui/components/bd/PluginSettingsModal.vue Normal file
View File

@ -0,0 +1,77 @@
<template src="./templates/PluginSettingsModal.html"></template>
<script>
/*Imports*/
import { Modal } from '../generic';
const components = { Modal };
/*Methods*/
function textInputKd(e) {
console.log(e);
this.changed = true;
}
const methods = { textInputKd };
export default {
props: ['plugin'],
data() {
return {
'changed': false
}
},
components,
methods
}
</script>
<style>
.bd-modal-inner {
position: relative;
}
.bd-modal-footer .footer-alert {
opacity: 0;
transform: translateY(100%);
height: 30px;
display: flex;
background: rgba(32, 34, 37, 0.9);
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
padding: 10px 10px 10px 16px;
border-radius: 5px;
transition: all .3s ease-in-out;
}
.bd-modal-footer .footer-alert.bd-active {
opacity: 1;
transform: none;
}
.bd-modal-footer .footer-alert .footer-alert-text {
color: #FFF;
flex: 1 1 auto;
font-weight: 500;
}
.bd-modal-footer .footer-alert {
height: 30px;
color: #FFF;
}
.bd-modal-footer .footer-alert .footer-alert-text {
line-height: 30px;
}
.bd-modal-footer .footer-alert .bd-button {
width: 120px;
border-radius: 3px;
}
.bd-modal-footer .footer-alert .bd-reset-button {
height: 30px;
line-height: 30px;
margin-right: 10px;
}
</style>

6
client/src/modules/ui/components/bd/PluginsView.vue
View File

@ -1,13 +1,13 @@
<template src="./templates/PluginsView.html"></template>
<script>
const { PluginManager, Plugin } = require('../../../'); //#1 require of 2018~ :3
const { PluginManager, Plugin } = require('../../../');
/*Imports*/
import { SettingsWrapper } from './';
import { Modal } from '../generic';
import PluginSettingsModal from './PluginSettingsModal.vue';
import PluginCard from './PluginCard.vue';
import Refresh from 'vue-material-design-icons/refresh.vue';
const components = { SettingsWrapper, PluginCard, Refresh, Modal };
const components = { SettingsWrapper, PluginCard, Refresh, PluginSettingsModal };
/*Variables*/

3
client/src/modules/ui/components/bd/index.js
View File

@ -4,4 +4,5 @@ export { default as UISettings } from './UISettings.vue';
export { default as EmoteSettings } from './EmoteSettings.vue';
export { default as PluginsView } from './PluginsView.vue';
export { default as PluginCard } from './PluginCard.vue';
export { default as CssEditorView } from './CssEditor.vue';
export { default as CssEditorView } from './CssEditor.vue';
export { default as PluginSettingsModal } from './PluginSettingsModal.vue';

38
client/src/modules/ui/components/bd/templates/PluginSettingsModal.html Normal file
View File

@ -0,0 +1,38 @@
<Modal :headerText="plugin.name + ' Settings'" :close="() => { }">
<div slot="body" v-for="setting in plugin.pluginConfig" class="bd-plugin-settings-body">
<div class="bd-form-item">
<div v-if="setting.type === 'bool'" class="bd-setting-switch">
<div class="bd-title">
<h3>{{setting.text}}</h3>
<label class="bd-switch-wrapper">
<input type="checkbox" class="bd-switch-checkbox" />
<div class="bd-switch" :class="{'bd-checked': setting.value}" />
</label>
</div>
<div class="bd-hint">{{setting.hint}}</div>
</div>
<div v-else-if="setting.type === 'text'" class="bd-form-textinput">
<div class="bd-title">
<h3>{{setting.text}}</h3>
<div class="bd-textinput-wrapper">
<input type="text" v-model="setting.value" @keyup.stop @keydown="textInputKd"/>
</div>
</div>
<div class="bd-hint">{{setting.hint}}</div>
</div>
<div class="bd-form-divider"></div>
</div>
</div>
<div slot="footer">
<div class="footer-alert" :class="{'bd-active': changed}">
<div class="footer-alert-text">Unsaved changes</div>
<div class="bd-reset-button">Reset</div>
<div class="bd-button bd-ok">Save Changes</div>
</div>
</div>
</Modal>

29
client/src/modules/ui/components/bd/templates/PluginsView.html
View File

@ -24,33 +24,6 @@
</div>
<div v-if="settingsOpen !== null" class="bd-backdrop" @click="settingsOpen = null"></div>
<div v-if="settingsOpen !== null" class="bd-modal">
<Modal :headerText="settingsOpen.name + ' Settings'" :close="() => { settingsOpen = null }">
<div slot="body" v-for="setting in settingsOpen.pluginConfig" class="bd-plugin-settings-body">
<div class="bd-form-item">
<div v-if="setting.type === 'bool'" class="bd-setting-switch">
<div class="bd-title">
<h3>{{setting.text}}</h3>
<label class="bd-switch-wrapper">
<input type="checkbox" class="bd-switch-checkbox" />
<div class="bd-switch" :class="{'bd-checked': setting.value}" />
</label>
</div>
<div class="bd-hint">{{setting.hint}}</div>
</div>
<div v-else-if="setting.type === 'text'" class="bd-form-textinput">
<div class="bd-title">
<h3>{{setting.text}}</h3>
<input type="text" v-model="setting.value" @keyup.stop/>
</div>
<div class="bd-hint">{{setting.hint}}</div>
</div>
<div class="bd-form-divider"></div>
</div>
</div>
</Modal>
<PluginSettingsModal :plugin="settingsOpen"/>
</div>
</SettingsWrapper>

1
client/src/styles/partials/generic/forms.scss
View File

@ -67,7 +67,6 @@
}
input[type="text"] {
flex-grow: 1;
background: transparent;
border: none;
color: #b9bbbe;

9
client/src/styles/partials/generic/modals.scss
View File

@ -42,13 +42,13 @@
display: -ms-flexbox;
display: flex;
flex-grow: 1;
padding: 15px;
border-radius: 8px;
}
.bd-modal {
.bd-modal-header {
display: flex;
padding: 15px;
span {
color: #FFF;
@ -74,4 +74,11 @@
}
}
}
.bd-modal-body {
padding: 0 15px;
}
.bd-modal-footer {
}
}