Merge pull request #79 from samuelthomas2774/add-modal-animation

Add animation on modal open/close

client/src/styles/partials/animations.scss

@@ -69,6 +69,25 @@
     }
 }
 
+@keyframes bd-modal-in {
+    0% { transform: scale(0.8); opacity: 0; }
+    90% { transform: scale(1.01); opacity: 1; }
+    100% { transform: scale(1); opacity: 1; }
+}
+@keyframes bd-modal-out {
+    0% { transform: scale(1); opacity: 1; }
+    10% { transform: scale(1.01); opacity: 1; }
+    90% { opacity: 0; }
+    100% { transform: scale(0.8); opacity: 0; }
+}
+
+@keyframes bd-backdrop-in {
+    0% { opacity: 0; }
+}
+@keyframes bd-backdrop-out {
+    100% { opacity: 0; }
+}
+
 @keyframes bd-warn-shake {
     10%, 90% {
         transform: translate3d(-4px, -4px, 0);
@@ -85,4 +104,4 @@
     40%, 60% {
         transform: translate3d(4px, -4px, 0);
     }
-}
+}

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

@@ -32,6 +32,11 @@
     pointer-events: none;
     z-index: 9001;
     justify-content: center;
+    animation: bd-modal-in 0.22s ease;
+
+    &.bd-modal-out {
+        animation: bd-modal-out 0.22s ease;
+    }
 }
 
 .bd-modal .bd-modal-inner {

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

@@ -10,8 +10,8 @@
 
 <template>
     <div class="bd-plugin-settings-modal">
-        <div class="bd-backdrop" @click="attemptToClose"></div>
-        <Modal :headerText="plugin.name + ' Settings'" :close="attemptToClose">
+        <div class="bd-backdrop" @click="attemptToClose" :class="{'bd-backdrop-out': closing}"></div>
+        <Modal :headerText="plugin.name + ' Settings'" :close="attemptToClose" :class="{'bd-modal-out': closing}">
             <div slot="body" class="bd-plugin-settings-body">
                 <template v-for="category in configCache">
                     <div v-if="category.category === 'default' || !category.type">
@@ -52,7 +52,8 @@
             return {
                 changed: false,
                 warnclose: false,
-                configCache: []
+                configCache: [],
+                closing: false
             }
         },
         components: {
@@ -91,7 +92,13 @@
                 this.changed = false;
             },
             attemptToClose(e) {
-                if (!this.changed) return this.close();
+                if (!this.chagned) {
+                    this.closing = true;
+                    setTimeout(() => {
+                        this.close();
+                    }, 200);
+                    return;
+                }
                 this.warnclose = true;
                 setTimeout(() => {
                     this.warnclose = false;

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

@@ -15,13 +15,13 @@
                 <div class="bd-flex-grow bd-button" :class="{'bd-active': local}" @click="showLocal">
                     <h3>Local</h3>
                     <div class="bd-material-button" @click="refreshLocal">
-                        <refresh />
+                        <MiRefresh />
                     </div>
                 </div>
                 <div class="bd-flex-grow bd-button" :class="{'bd-active': !local}" @click="showOnline">
                     <h3>Online</h3>
                     <div class="bd-material-button">
-                        <refresh />
+                        <MiRefresh />
                     </div>
                 </div>
             </div>
@@ -42,7 +42,7 @@
     import { SettingsWrapper } from './';
     import PluginCard from './PluginCard.vue';
     import PluginSettingsModal from './PluginSettingsModal.vue';
-    import Refresh from 'vue-material-design-icons/refresh.vue';
+    import { MiRefresh } from '../common';
 
     export default {
         data() {
@@ -53,7 +53,8 @@
             }
         },
         components: {
-            SettingsWrapper, PluginCard, PluginSettingsModal, Refresh
+            SettingsWrapper, PluginCard, PluginSettingsModal,
+            MiRefresh
         },
         methods: {
             showLocal() {