Fix modal closing animation and add a header slot

This commit is contained in:
Samuel Elliott 2018-08-22 18:02:07 +01:00
parent 42a89129d4
commit d02be1521d
No known key found for this signature in database
GPG Key ID: 8420C7CDE43DC4D6
7 changed files with 23 additions and 21 deletions

View File

@ -9,7 +9,7 @@
*/ */
<template> <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="body" class="bd-modalBasicBody">{{ modal.text }}</div>
<div slot="footer" class="bd-modalControls"> <div slot="footer" class="bd-modalControls">
<div class="bd-flexGrow"></div> <div class="bd-flexGrow"></div>

View File

@ -9,7 +9,7 @@
*/ */
<template> <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="body" class="bd-modalBasicBody">{{ modal.text }}</div>
<div slot="footer" class="bd-modalControls"> <div slot="footer" class="bd-modalControls">
<div class="bd-flexGrow"></div> <div class="bd-flexGrow"></div>

View File

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

View File

@ -9,15 +9,14 @@
*/ */
<template> <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"> <div slot="body" class="bd-modalBasicBody bd-inputModalBody bd-formTextinput">
{{ modal.text }} {{ modal.text }}
<input v-if="modal.password" ref="input" type="password" @keyup.stop="keyup" /> <input ref="input" :type="modal.password ? 'password' : 'text'" @keyup.stop="keyup"/>
<input v-else ref="input" type="text" @keyup.stop="keyup"/>
</div> </div>
<div slot="footer" class="bd-modalControls"> <div slot="footer" class="bd-modalControls">
<div class="bd-flexGrow"></div> <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> </div>
</Modal> </Modal>
</template> </template>

View File

@ -9,7 +9,7 @@
*/ */
<template> <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 slot="body" class="bd-modalBasicBody">
<div v-for="(perm, i) in permissions" :key="`perm-${i}`" class="bd-permScope"> <div v-for="(perm, i) in permissions" :key="`perm-${i}`" class="bd-permScope">
<div class="bd-permAllow"> <div class="bd-permAllow">
@ -26,7 +26,7 @@
<div slot="footer" class="bd-modalControls"> <div slot="footer" class="bd-modalControls">
<div class="bd-flexGrow"></div> <div class="bd-flexGrow"></div>
<div class="bd-button" @click="modal.close">Cancel</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> </div>
</Modal> </Modal>
</template> </template>

View File

@ -10,8 +10,9 @@
<template> <template>
<div class="bd-settingsModal" :class="{'bd-edited': changed}"> <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" /> <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 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-footerAlertText">Unsaved changes</div>
<div class="bd-button bd-resetButton bd-tp" :class="{'bd-disabled': saving}" @click="resetSettings">Reset</div> <div class="bd-button bd-resetButton bd-tp" :class="{'bd-disabled': saving}" @click="resetSettings">Reset</div>

View File

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