diff --git a/src/client/components/emoji-picker-dialog.vue b/src/client/components/emoji-picker-dialog.vue index c4b12e2f61..9400819a1f 100644 --- a/src/client/components/emoji-picker-dialog.vue +++ b/src/client/components/emoji-picker-dialog.vue @@ -1,5 +1,5 @@ <template> -<MkModal ref="modal" :manual-showing="manualShowing" :src="src" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')"> +<MkModal ref="modal" :manual-showing="manualShowing" :src="src" :front="true" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')"> <MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/> </MkModal> </template> diff --git a/src/client/components/ui/modal.vue b/src/client/components/ui/modal.vue index 3b11213426..33fcdb687f 100644 --- a/src/client/components/ui/modal.vue +++ b/src/client/components/ui/modal.vue @@ -1,6 +1,6 @@ <template> <transition :name="$store.state.animation ? popup ? 'modal-popup' : 'modal' : ''" :duration="$store.state.animation ? popup ? 500 : 300 : 0" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered"> - <div v-show="manualShowing != null ? manualShowing : showing" class="mk-modal" v-hotkey.global="keymap" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> + <div v-show="manualShowing != null ? manualShowing : showing" class="qzhlnise" :class="{ front }" v-hotkey.global="keymap" :style="{ pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> <div class="bg _modalBg" @click="onBgClick" @contextmenu.prevent.stop="() => {}"></div> <div class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick" ref="content"> <slot></slot> @@ -41,6 +41,11 @@ export default defineComponent({ }, position: { required: false + }, + front: { + type: Boolean, + required: false, + default: false, } }, emits: ['opening', 'click', 'esc', 'close', 'closed'], @@ -224,7 +229,7 @@ export default defineComponent({ } } -.mk-modal { +.qzhlnise { > .bg { z-index: 10000; } @@ -269,5 +274,19 @@ export default defineComponent({ position: fixed; } } + + &.front { + > .bg { + z-index: 20000; + } + + > .content:not(.popup) { + z-index: 20000; + } + + > .content.popup { + z-index: 20000; + } + } } </style>