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

Merge pull request #69 from JsSucks/plugins 

Merge
This commit is contained in:
Alexei Stukov 2018-02-02 19:55:33 +02:00 committed by GitHub
parent b75c8892f7 fe06db3d3c
commit aefab7c677
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 258 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/src/modules/plugin.js
View File

@ -12,6 +12,7 @@ export default class {
constructor(pluginInternals) {
this.__pluginInternals = pluginInternals;
this.saveSettings = this.saveSettings.bind(this);
this.hasSettings = this.pluginConfig && this.pluginConfig.length > 0;
this.start = this.start.bind(this);
this.stop = this.stop.bind(this);
@ -31,6 +32,22 @@ export default class {
get enabled() { return this.userConfig.enabled }
get pluginConfig() { return this.userConfig.config }
getSetting(settingId) {
return this.userConfig.config.find(setting => setting.id === settingId);
}
saveSettings(newSettings) {
let changed = false;
for (let newSetting of newSettings) {
const setting = this.pluginConfig.find(s => s.id === newSetting.id && s.value !== newSetting.value);
if (!setting) continue;
setting.value = newSetting.value;
if (this.settingSaved) this.settingSaved(setting);
changed = true;
}
if (changed && this.settingsSaved) this.settingsSaved(this.pluginConfig);
}
start() {
if (this.onStart) {
const started = this.onStart();

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

@ -42,7 +42,12 @@
display: -ms-flexbox;
display: flex;
flex-grow: 1;
border-radius: 8px;
border-radius: 4px;
max-height: 100%;
}
.bd-modal .bd-modal-body {
display: flex;
}
.bd-modal {
@ -80,5 +85,47 @@
}
.bd-modal-footer {
.bd-footer-alert {
position: absolute;
bottom: 80px;
left: 70px;
right: 70px;
display: flex;
background-color: rgba(32, 34, 37, 0.9);
box-shadow: 0 2px 10px 0 rgba(0,0,0,.2);
padding: 10px 10px 10px 16px;
overflow: hidden;
border-radius: 5px;
transform: translateY(100%);
opacity: 0;
transition: all .2s ease-in-out;
&.bd-active {
opacity: 1;
transform: none;
}
.bd-footer-alert-text {
flex: 1 1 auto;
color: #FFF;
font-weight: 700;
line-height: 34px;
}
.bd-button {
height: 30px;
border-radius: 3px;
padding: 2px 16px;
&.bd-tp {
background: transparent;
&:hover {
text-decoration: underline;
background: transparent;
}
}
}
}
}
}

1
client/src/styles/partials/sidebarview/content.scss
View File

@ -18,7 +18,6 @@
.bd-scroller-wrap {
flex-grow: 1;
height: 100%;
}
.bd-settingsWrap-header {

75
client/src/ui/components/bd/PluginSettingsModal.vue
View File

@ -10,62 +10,61 @@
<template>
<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 slot="body" class="bd-plugin-settings-body">
<PluginSetting v-for="setting in configCache" :key="setting.id" :setting="setting" :change="settingChange"/>
</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 slot="footer" class="bd-footer-alert" :class ="{'bd-active': changed}">
<div class="bd-footer-alert-text">Unsaved changes</div>
<div class="bd-button bd-reset-button bd-tp" @click="resetSettings">Reset</div>
<div class="bd-button bd-ok" @click="saveSettings">Save Changes</div>
</div>
</Modal>
</template>
<script>
// Imports
import { Modal } from '../common';
import PluginSetting from './pluginsetting/PluginSetting.vue';
export default {
props: ['plugin'],
data() {
return {
'changed': false
changed: false,
configCache: []
}
},
components: {
Modal
Modal,
PluginSetting
},
methods: {
textInputKd(e) {
this.changed = true;
checkForChanges() {
for (let cachedSetting of this.configCache) {
if (this.plugin.pluginConfig.find(s => s.id === cachedSetting.id && s.value !== cachedSetting.value)) {
return true;
}
}
return false;
},
textInputKd(settingId) {
},
settingChange(settingId, newValue) {
this.configCache.find(s => s.id === settingId).value = newValue;
this.changed = this.checkForChanges();
},
saveSettings() {
this.plugin.saveSettings(this.configCache);
this.configCache = JSON.parse(JSON.stringify(this.plugin.pluginConfig));
this.changed = false;
},
resetSettings() {
this.configCache = JSON.parse(JSON.stringify(this.plugin.pluginConfig));
this.changed = false;
}
},
beforeMount() {
this.configCache = JSON.parse(JSON.stringify(this.plugin.pluginConfig));
this.changed = this.checkForChanges();
}
}
</script>

4
client/src/ui/components/bd/PluginsView.vue
View File

@ -33,9 +33,7 @@
</div>
</div>
<div v-if="settingsOpen !== null" class="bd-backdrop" @click="settingsOpen = null"></div>
<div v-if="settingsOpen !== null" class="bd-modal">
<PluginSettingsModal :plugin="settingsOpen" />
</div>
<PluginSettingsModal v-if="settingsOpen !== null" :plugin="settingsOpen" />
</SettingsWrapper>
</template>

27
client/src/ui/components/bd/pluginsetting/Bool.vue Normal file
View File

@ -0,0 +1,27 @@
/**
* BetterDiscord Plugin Setting Bool 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-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>
</template>
<script>
export default {
props: ['setting', 'change']
}
</script>

29
client/src/ui/components/bd/pluginsetting/PluginSetting.vue Normal file
View File

@ -0,0 +1,29 @@
/**
* BetterDiscord Plugin Setting 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-form-item">
<BoolSetting v-if="setting.type === 'bool'" :setting="setting" :change="change"/>
<StringSetting v-if="setting.type === 'text'" :setting="setting" :change="change"/>
<div class="bd-form-divider"></div>
</div>
</template>
<script>
// Imports
import BoolSetting from './Bool.vue';
import StringSetting from './String.vue';
export default {
props: ['setting', 'change'],
components: {
BoolSetting, StringSetting
}
}
</script>

31
client/src/ui/components/bd/pluginsetting/String.vue Normal file
View File

@ -0,0 +1,31 @@
/**
* BetterDiscord Plugin Setting String 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-form-textinput">
<div class="bd-title">
<h3>{{setting.text}}</h3>
<div class="bd-textinput-wrapper">
<input type="text" :value="setting.value" @keyup.stop @input="input"/>
</div>
</div>
<div class="bd-hint">{{setting.hint}}</div>
</div>
</template>
<script>
export default {
props: ['setting', 'change'],
methods: {
input(e) {
this.change(this.setting.id, e.target.value);
}
}
}
</script>

6
client/src/ui/components/common/Modal.vue
View File

@ -18,7 +18,11 @@
</div>
</div>
<div class="bd-modal-body">
<slot name="body"></slot>
<div class="bd-scroller-wrap">
<div class="bd-scroller">
<slot name="body"></slot>
</div>
</div>
</div>
<div class="bd-modal-footer">
<slot name="footer"></slot>

70
tests/plugins/Example/config.json
View File

@ -1,11 +1,11 @@
{
"info": {
"name": "Example Plugin",
"authors": ["Jiiks"],
"version": 1.0,
"description": "Example Plugin Description"
},
"main": "index.js",
"info": {
"name": "Example Plugin",
"authors": ["Jiiks"],
"version": 1.0,
"description": "Example Plugin Description"
},
"main": "index.js",
"defaultConfig": [
{
"id": "test-setting-1",
@ -20,6 +20,62 @@
"value": "defaultValue",
"text": "Text Test Setting",
"hint": "Text Test Setting Hint"
},
{
"id": "test-setting-3",
"type": "bool",
"value": false,
"text": "Bool Test Setting 2",
"hint": "Bool Test Setting Hint 2"
},
{
"id": "test-setting-4",
"type": "bool",
"value": false,
"text": "Bool Test Setting 3",
"hint": "Bool Test Setting Hint 3"
},
{
"id": "test-setting-5",
"type": "bool",
"value": false,
"text": "Bool Test Setting 4",
"hint": "Bool Test Setting Hint 4"
},
{
"id": "test-setting-6",
"type": "bool",
"value": false,
"text": "Bool Test Setting 5",
"hint": "Bool Test Setting Hint 5"
},
{
"id": "test-setting-7",
"type": "bool",
"value": false,
"text": "Bool Test Setting 6",
"hint": "Bool Test Setting Hint 6"
},
{
"id": "test-setting-8",
"type": "bool",
"value": false,
"text": "Bool Test Setting 7",
"hint": "Bool Test Setting Hint 7"
},
{
"id": "test-setting-9",
"type": "bool",
"value": false,
"text": "Bool Test Setting 8",
"hint": "Bool Test Setting Hint 8"
},
{
"id": "test-setting-10",
"type": "bool",
"value": false,
"text": "Bool Test Setting 9",
"hint": "Bool Test Setting Hint 9"
}
]
}