Plugin settings modal
This commit is contained in:
parent
9a8f2eddef
commit
a3f9b50c8c
|
@ -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>
|
|
@ -1,13 +1,13 @@
|
||||||
<template src="./templates/PluginsView.html"></template>
|
<template src="./templates/PluginsView.html"></template>
|
||||||
<script>
|
<script>
|
||||||
const { PluginManager, Plugin } = require('../../../'); //#1 require of 2018~ :3
|
const { PluginManager, Plugin } = require('../../../');
|
||||||
|
|
||||||
/*Imports*/
|
/*Imports*/
|
||||||
import { SettingsWrapper } from './';
|
import { SettingsWrapper } from './';
|
||||||
import { Modal } from '../generic';
|
import PluginSettingsModal from './PluginSettingsModal.vue';
|
||||||
import PluginCard from './PluginCard.vue';
|
import PluginCard from './PluginCard.vue';
|
||||||
import Refresh from 'vue-material-design-icons/refresh.vue';
|
import Refresh from 'vue-material-design-icons/refresh.vue';
|
||||||
const components = { SettingsWrapper, PluginCard, Refresh, Modal };
|
const components = { SettingsWrapper, PluginCard, Refresh, PluginSettingsModal };
|
||||||
|
|
||||||
/*Variables*/
|
/*Variables*/
|
||||||
|
|
||||||
|
|
|
@ -5,3 +5,4 @@ export { default as EmoteSettings } from './EmoteSettings.vue';
|
||||||
export { default as PluginsView } from './PluginsView.vue';
|
export { default as PluginsView } from './PluginsView.vue';
|
||||||
export { default as PluginCard } from './PluginCard.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';
|
|
@ -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>
|
|
@ -24,33 +24,6 @@
|
||||||
</div>
|
</div>
|
||||||
<div v-if="settingsOpen !== null" class="bd-backdrop" @click="settingsOpen = null"></div>
|
<div v-if="settingsOpen !== null" class="bd-backdrop" @click="settingsOpen = null"></div>
|
||||||
<div v-if="settingsOpen !== null" class="bd-modal">
|
<div v-if="settingsOpen !== null" class="bd-modal">
|
||||||
<Modal :headerText="settingsOpen.name + ' Settings'" :close="() => { settingsOpen = null }">
|
<PluginSettingsModal :plugin="settingsOpen"/>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</SettingsWrapper>
|
</SettingsWrapper>
|
|
@ -67,7 +67,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="text"] {
|
input[type="text"] {
|
||||||
flex-grow: 1;
|
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
color: #b9bbbe;
|
color: #b9bbbe;
|
||||||
|
|
|
@ -42,13 +42,13 @@
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
padding: 15px;
|
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-modal {
|
.bd-modal {
|
||||||
.bd-modal-header {
|
.bd-modal-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
color: #FFF;
|
color: #FFF;
|
||||||
|
@ -74,4 +74,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bd-modal-body {
|
||||||
|
padding: 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-modal-footer {
|
||||||
|
}
|
||||||
}
|
}
|
Loading…
Reference in New Issue