Fix modal closing animation and add a header slot

client/src/ui/components/bd/modals/BasicModal.vue

@@ -9,7 +9,7 @@
 */
 
 <template>
-    <Modal :class="['bd-modalBasic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
+    <Modal class="bd-modalBasic" :headertext="modal.title" :closing="modal.closing" @close="modal.close">
         <div slot="body" class="bd-modalBasicBody">{{ modal.text }}</div>
         <div slot="footer" class="bd-modalControls">
             <div class="bd-flexGrow"></div>

client/src/ui/components/bd/modals/ConfirmModal.vue

@@ -9,7 +9,7 @@
 */
 
 <template>
-    <Modal :class="['bd-modalBasic', {'bd-modal-out': modal.closing}]" :headerText="modal.title" @close="modal.close">
+    <Modal class="bd-modalBasic" :headertext="modal.title" :closing="modal.closing" @close="modal.close">
         <div slot="body" class="bd-modalBasicBody">{{ modal.text }}</div>
         <div slot="footer" class="bd-modalControls">
             <div class="bd-flexGrow"></div>

client/src/ui/components/bd/modals/ErrorModal.vue

@@ -1,14 +1,14 @@
 <template>
-    <Modal :headerText="modal.event.header" @close="modal.close"
-           :class="{'bd-err': modal.event.type && modal.event.type === 'err', 'bd-modalOut': modal.closing}">
+    <Modal :headertext="modal.event.header" :closing="modal.closing" @close="modal.close"
+           :class="{'bd-err': modal.event.type && modal.event.type === 'err'}">
         <MiError v-if="modal.event.type === 'err'" slot="icon" size="20"/>
         <div slot="body">
             <div v-for="(content, index) in modal.event.content">
                 <div class="bd-modalError" :class="{'bd-open': content.showStack}">
                     <div class="bd-modalErrorTitle bd-flex">
                         <span class="bd-modalTitleText bd-flexGrow">{{content.message}}</span>
-                        <span class="bd-modalTitlelink" v-if="content.showStack" @click="() => { content.showStack = false; $forceUpdate(); }">Hide Stacktrace</span>
-                        <span class="bd-modalTitlelink" v-else @click="() => { content.showStack = true; $forceUpdate(); }">Show Stacktrace</span>
+                        <span class="bd-modalTitlelink" v-if="content.showStack" @click="content.showStack = false; $forceUpdate();">Hide Stacktrace</span>
+                        <span class="bd-modalTitlelink" v-else @click="content.showStack = true; $forceUpdate();">Show Stacktrace</span>
                     </div>
                     <div class="bd-scrollerWrap">
                         <div class="bd-scroller">

client/src/ui/components/bd/modals/InputModal.vue

@@ -9,15 +9,14 @@
 */
 
 <template>
-    <Modal :class="['bd-modalBasic', {'bd-modalOut': modal.closing}]" :headerText="modal.title" @close="modal.close">
+    <Modal class="bd-modalBasic" :headertext="modal.title" :closing="modal.closing" @close="modal.close">
         <div slot="body" class="bd-modalBasicBody bd-inputModalBody bd-formTextinput">
             {{ modal.text }}
-            <input v-if="modal.password" ref="input" type="password" @keyup.stop="keyup" />
-            <input v-else ref="input" type="text" @keyup.stop="keyup"/>
+            <input ref="input" :type="modal.password ? 'password' : 'text'" @keyup.stop="keyup"/>
         </div>
         <div slot="footer" class="bd-modalControls">
             <div class="bd-flexGrow"></div>
-            <div class="bd-button bd-ok" @click="() => { modal.confirm(value); modal.close(); }">OK</div>
+            <div class="bd-button bd-ok" @click="modal.confirm(value); modal.close();">OK</div>
         </div>
     </Modal>
 </template>

client/src/ui/components/bd/modals/PermissionModal.vue

@@ -9,7 +9,7 @@
 */
 
 <template>
-    <Modal :class="['bd-modalBasic', {'bd-modalOut': modal.closing}]" :headerText="modal.title" @close="modal.close">
+    <Modal class="bd-modalBasic" :headertext="modal.title" :closing="modal.closing" @close="modal.close">
         <div slot="body" class="bd-modalBasicBody">
             <div v-for="(perm, i) in permissions" :key="`perm-${i}`" class="bd-permScope">
                 <div class="bd-permAllow">
@@ -26,7 +26,7 @@
         <div slot="footer" class="bd-modalControls">
             <div class="bd-flexGrow"></div>
             <div class="bd-button" @click="modal.close">Cancel</div>
-            <div class="bd-button bd-ok" @click="() => { modal.confirm(); modal.close(); }">Authorize</div>
+            <div class="bd-button bd-ok" @click="modal.confirm(); modal.close();">Authorize</div>
         </div>
     </Modal>
 </template>

client/src/ui/components/bd/modals/SettingsModal.vue

@@ -10,8 +10,9 @@
 
 <template>
     <div class="bd-settingsModal" :class="{'bd-edited': changed}">
-        <Modal :class="{'bd-modalOut': modal.closing}" :headerText="modal.headertext" @close="modal.close">
+        <Modal :headertext="modal.headertext" :closing="modal.closing" @close="modal.close">
             <SettingsPanel :settings="settings" :schemes="modal.schemes" slot="body" class="bd-settingsModalBody" />
+
             <div slot="footer" class="bd-footerAlert" :class="{'bd-active': changed || saving, 'bd-warn': warnclose}" :style="{pointerEvents: changed ? 'all' : 'none'}">
                 <div class="bd-footerAlertText">Unsaved changes</div>
                 <div class="bd-button bd-resetButton bd-tp" :class="{'bd-disabled': saving}" @click="resetSettings">Reset</div>

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

@@ -9,25 +9,27 @@
 */
 
 <template>
-    <div :class="['bd-modal', {'bd-modalScrolled': scrolled}]">
+    <div :class="['bd-modal', {'bd-modalOut': closing, 'bd-modalScrolled': scrolled}]">
         <div class="bd-modalInner">
             <div class="bd-modalHeader">
-                <div class="bd-modalIcon">
-                    <slot name="icon" />
-                </div>
-                <span class="bd-modalHeadertext">{{ headerText }}</span>
+                <slot name="header">
+                    <div v-if="$slots.icon" class="bd-modalIcon">
+                        <slot name="icon" />
+                    </div>
+                    <span class="bd-modalHeadertext">{{ headertext }}</span>
+                </slot>
                 <div class="bd-modalX" @click="$emit('close', $event.shiftKey, $event)">
                     <MiClose size="18" />
                 </div>
             </div>
             <div class="bd-modalBody">
                 <div class="bd-scrollerWrap">
-                    <div class="bd-scroller" @scroll="e => scrolled = e.target.scrollTop !== 0">
+                    <div class="bd-scroller" @scroll="e => scrolled = e.target.scrollTop > 0">
                         <slot name="body"></slot>
                      </div>
                 </div>
             </div>
-            <div class="bd-modalFooter">
+            <div v-if="$slots.footer" class="bd-modalFooter">
                 <slot name="footer"></slot>
             </div>
         </div>
@@ -39,7 +41,7 @@
     import { MiClose } from './MaterialIcon';
 
     export default {
-        props: ['headerText'],
+        props: ['headertext', 'closing'],
         components: {
             MiClose
         },