Mirrors/audiobookshelf
Mirrors/audiobookshelf
1
0
Fork 0
mirror of https://github.com/advplyr/audiobookshelf.git synced 2025-10-27 11:18:14 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix:Mouse drag outside of modal closing modal #251

Browse Source
This commit is contained in:
advplyr 2021-12-24 16:06:17 -06:00
parent 52c69a1cf2
commit 18fa7a0b10
1 changed files with 13 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/components/modals/Modal.vue
View File

@ -6,7 +6,7 @@
<span class="material-icons text-4xl">close</span> <span class="material-icons text-4xl">close</span>
</div> </div>
<slot name="outer" /> <slot name="outer" />
<div ref="content" style="min-width: 400px; min-height: 200px" class="relative text-white" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" v-click-outside="clickBg"> <div ref="content" style="min-width: 400px; min-height: 200px" class="relative text-white" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" @mousedown="mousedownModal" @mouseup="mouseupModal" v-click-outside="clickBg">
<slot /> <slot />
<div v-if="processing" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-black bg-opacity-60 rounded-lg flex items-center justify-center"> <div v-if="processing" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-black bg-opacity-60 rounded-lg flex items-center justify-center">
<ui-loading-indicator /> <ui-loading-indicator />
@ -49,7 +49,8 @@ export default {
data() { data() {
return { return {
el: null, el: null,
content: null content: null,
preventClickoutside: false
} }
}, },
watch: { watch: {
@ -82,10 +83,20 @@ export default {
} }
}, },
methods: { methods: {
mousedownModal() {
this.preventClickoutside = true
},
mouseupModal() {
this.preventClickoutside = false
},
clickClose() { clickClose() {
this.show = false this.show = false
}, },
clickBg(ev) { clickBg(ev) {
if (this.preventClickoutside) {
this.preventClickoutside = false
return
}
if (this.processing && this.persistent) return if (this.processing && this.persistent) return
if (ev.srcElement.classList.contains('modal-bg')) { if (ev.srcElement.classList.contains('modal-bg')) {
this.show = false this.show = false