Merge pull request #69 from JsSucks/plugins

Merge

client/src/modules/plugin.js

@@ -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();

client/src/styles/partials/generic/modals.scss

@@ -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;
+                    }
+                }
+            }
+        }
     }
 }

client/src/styles/partials/sidebarview/content.scss

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

client/src/ui/components/bd/PluginSettingsModal.vue

@@ -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 slot="body" class="bd-plugin-settings-body">
-            <div class="bd-form-item">
+            <PluginSetting v-for="setting in configCache" :key="setting.id" :setting="setting" :change="settingChange"/>
-
-                <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 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) {
+            checkForChanges() {
-                this.changed = true;
+                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>

client/src/ui/components/bd/PluginsView.vue

@@ -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 v-if="settingsOpen !== null" :plugin="settingsOpen" />
-            <PluginSettingsModal :plugin="settingsOpen" />
-        </div>
     </SettingsWrapper>
 </template>
 

client/src/ui/components/bd/pluginsetting/Bool.vue

@@ -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>

client/src/ui/components/bd/pluginsetting/PluginSetting.vue

@@ -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>

client/src/ui/components/bd/pluginsetting/String.vue

@@ -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>

client/src/ui/components/common/Modal.vue

@@ -18,8 +18,12 @@
                 </div>
             </div>
             <div class="bd-modal-body">
+                <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>
             </div>

tests/plugins/Example/config.json

@@ -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"
         }
     ]
 }