From a3f9b50c8cd29101e748e5bfd7d8f12c05a836cb Mon Sep 17 00:00:00 2001
From: Jiiks <jiiks@windowslive.com>
Date: Thu, 25 Jan 2018 12:48:41 +0200
Subject: [PATCH] Plugin settings modal

---
 .../ui/components/bd/PluginSettingsModal.vue  | 77 +++++++++++++++++++
 .../modules/ui/components/bd/PluginsView.vue  |  6 +-
 client/src/modules/ui/components/bd/index.js  |  3 +-
 .../bd/templates/PluginSettingsModal.html     | 38 +++++++++
 .../components/bd/templates/PluginsView.html  | 29 +------
 client/src/styles/partials/generic/forms.scss |  1 -
 .../src/styles/partials/generic/modals.scss   |  9 ++-
 7 files changed, 129 insertions(+), 34 deletions(-)
 create mode 100644 client/src/modules/ui/components/bd/PluginSettingsModal.vue
 create mode 100644 client/src/modules/ui/components/bd/templates/PluginSettingsModal.html

diff --git a/client/src/modules/ui/components/bd/PluginSettingsModal.vue b/client/src/modules/ui/components/bd/PluginSettingsModal.vue
new file mode 100644
index 00000000..5b764f76
--- /dev/null
+++ b/client/src/modules/ui/components/bd/PluginSettingsModal.vue
@@ -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>
\ No newline at end of file
diff --git a/client/src/modules/ui/components/bd/PluginsView.vue b/client/src/modules/ui/components/bd/PluginsView.vue
index 03a62cf9..0e04b3e7 100644
--- a/client/src/modules/ui/components/bd/PluginsView.vue
+++ b/client/src/modules/ui/components/bd/PluginsView.vue
@@ -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*/
 
diff --git a/client/src/modules/ui/components/bd/index.js b/client/src/modules/ui/components/bd/index.js
index 4ab5164d..36633b0f 100644
--- a/client/src/modules/ui/components/bd/index.js
+++ b/client/src/modules/ui/components/bd/index.js
@@ -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';
\ No newline at end of file
+export { default as CssEditorView } from './CssEditor.vue';
+export { default as PluginSettingsModal } from './PluginSettingsModal.vue';
\ No newline at end of file
diff --git a/client/src/modules/ui/components/bd/templates/PluginSettingsModal.html b/client/src/modules/ui/components/bd/templates/PluginSettingsModal.html
new file mode 100644
index 00000000..15fdbce3
--- /dev/null
+++ b/client/src/modules/ui/components/bd/templates/PluginSettingsModal.html
@@ -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>
\ No newline at end of file
diff --git a/client/src/modules/ui/components/bd/templates/PluginsView.html b/client/src/modules/ui/components/bd/templates/PluginsView.html
index 7a7dde00..56169881 100644
--- a/client/src/modules/ui/components/bd/templates/PluginsView.html
+++ b/client/src/modules/ui/components/bd/templates/PluginsView.html
@@ -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>
\ No newline at end of file
diff --git a/client/src/styles/partials/generic/forms.scss b/client/src/styles/partials/generic/forms.scss
index 559981e2..ff75926e 100644
--- a/client/src/styles/partials/generic/forms.scss
+++ b/client/src/styles/partials/generic/forms.scss
@@ -67,7 +67,6 @@
         }
 
         input[type="text"] {
-            flex-grow: 1;
             background: transparent;
             border: none;
             color: #b9bbbe;
diff --git a/client/src/styles/partials/generic/modals.scss b/client/src/styles/partials/generic/modals.scss
index 2595e746..491b4b83 100644
--- a/client/src/styles/partials/generic/modals.scss
+++ b/client/src/styles/partials/generic/modals.scss
@@ -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 {
+    }
 }
\ No newline at end of file