Move backdrop to modal and add a warning when attempting to close with unsaved changes

client/src/styles/partials/animations.scss

@@ -68,3 +68,21 @@
         opacity: 1;
     }
 }
+
+@keyframes bd-warn-shake {
+    10%, 90% {
+        transform: translate3d(-4px, -4px, 0);
+    }
+
+    20%, 80% {
+        transform: translate3d(4px, 4px, 0);
+    }
+
+    30%, 50%, 70% {
+        transform: translate3d(-4px, 4px, 0);
+    }
+
+    40%, 60% {
+        transform: translate3d(4px, -4px, 0);
+    }
+}

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

@@ -100,6 +100,11 @@
             opacity: 0;
             transition: all .2s ease-in-out;
 
+            &.bd-warn {
+                background-color: $colerr;
+                animation: bd-warn-shake 0.4s;
+            }
+
             &.bd-active {
                 opacity: 1;
                 transform: none;

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

@@ -9,16 +9,19 @@
 */
 
 <template>
-    <Modal :headerText="plugin.name + ' Settings'" :close="close">
-        <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" 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>
+    <div>
+        <div class="bd-backdrop" @click="attemptToClose"></div>
+        <Modal :headerText="plugin.name + ' Settings'" :close="attemptToClose">
+            <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" class="bd-footer-alert" :class ="{'bd-active': changed, 'bd-warn': warnclose}">
+                <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>
+    </div>
 </template>
 <script>
     // Imports
@@ -26,13 +29,11 @@
     import PluginSetting from './pluginsetting/PluginSetting.vue';
 
     export default {
-        props: [
-            'plugin',
-            'close'
-        ],
+        props: ['plugin','close'],
         data() {
             return {
                 changed: false,
+                warnclose: false,
                 configCache: []
             }
         },
@@ -63,6 +64,13 @@
             resetSettings() {
                 this.configCache = JSON.parse(JSON.stringify(this.plugin.pluginConfig));
                 this.changed = false;
+            },
+            attemptToClose() {
+                if (!this.changed) return this.close();
+                this.warnclose = true;
+                setTimeout(() => {
+                    this.warnclose = false;
+                }, 400);
             }
         },
         beforeMount() {

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

@@ -32,7 +32,6 @@
                 <div class="bd-spinner-2"></div>
             </div>
         </div>
-        <div v-if="settingsOpen !== null" class="bd-backdrop" @click="settingsOpen = null"></div>
         <PluginSettingsModal v-if="settingsOpen !== null" :plugin="settingsOpen" :close="closeSettings" />
     </SettingsWrapper>
 </template>