diff --git a/src/client/components/emoji-picker-dialog.vue b/src/client/components/emoji-picker-dialog.vue index affc1ccf39..4b165d9f91 100644 --- a/src/client/components/emoji-picker-dialog.vue +++ b/src/client/components/emoji-picker-dialog.vue @@ -1,6 +1,6 @@ <template> -<MkModal ref="modal" :manual-showing="manualShowing" :src="src" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')" v-slot="{ showing }"> - <MkEmojiPicker v-show="showing !== false" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/> +<MkModal ref="modal" :manual-showing="manualShowing" :src="src" @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 ebe7eb0014..ff5b98d39f 100644 --- a/src/client/components/ui/modal.vue +++ b/src/client/components/ui/modal.vue @@ -1,14 +1,12 @@ <template> -<div class="mk-modal" v-hotkey.global="keymap" :style="{ display, pointerEvents: (manualShowing != null ? manualShowing : showing) ? 'auto' : 'none', '--transformOrigin': transformOrigin }"> - <transition :name="$store.state.animation ? 'modal-bg' : ''" appear> - <div class="bg _modalBg" v-if="manualShowing != null ? manualShowing : showing" @click="onBgClick"></div> - </transition> - <div class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick" ref="content"> - <transition :name="$store.state.animation ? popup ? 'modal-popup-content' : 'modal-content' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered"> - <slot v-if="manualShowing != null ? true : showing" v-bind:showing="manualShowing"></slot> - </transition> +<transition :name="$store.state.animation ? popup ? 'modal-popup' : 'modal' : ''" 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 class="bg _modalBg" @click="onBgClick"></div> + <div class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick" ref="content"> + <slot></slot> + </div> </div> -</div> +</transition> </template> <script lang="ts"> @@ -52,7 +50,6 @@ export default defineComponent({ fixed: false, transformOrigin: 'center', contentClicking: false, - display: this.manualShowing == null ? 'block' : 'none', }; }, computed: { @@ -65,15 +62,6 @@ export default defineComponent({ return this.src != null; } }, - watch: { - manualShowing: { - handler(v) { - console.log(v); - if (v) this.display = 'block'; - }, - immediate: true - } - }, mounted() { this.$watch('src', () => { this.fixed = getFixedContainer(this.src) != null; @@ -95,6 +83,8 @@ export default defineComponent({ const popover = this.$refs.content as any; + if (popover == null) return; + const rect = this.src.getBoundingClientRect(); const width = popover.offsetWidth; @@ -177,43 +167,67 @@ export default defineComponent({ onClosed() { this.$emit('closed'); - this.display = 'none'; } } }); </script> -<style> -.modal-popup-content-enter-active, .modal-popup-content-leave-active, -.modal-content-enter-from, .modal-content-leave-to { - transform-origin: var(--transformOrigin); +<style lang="scss"> +.modal-popup-enter-active, .modal-popup-leave-active, +.modal-enter-from, .modal-leave-to { + > .content { + transform-origin: var(--transformOrigin); + } } </style> <style lang="scss" scoped> -.modal-bg-enter-active, .modal-bg-leave-active { - transition: opacity 0.3s !important; -} -.modal-bg-enter-from, .modal-bg-leave-to { - opacity: 0; -} - -.modal-content-enter-active, .modal-content-leave-active { +.modal-enter-active, .modal-leave-active { + // CSS的には無意味だけどこれが無いとVueが認識しない transition: opacity 0.3s, transform 0.3s !important; + + > .bg { + transition: opacity 0.3s !important; + } + + > .content { + transition: opacity 0.3s, transform 0.3s !important; + } } -.modal-content-enter-from, .modal-content-leave-to { - pointer-events: none; - opacity: 0; - transform: scale(0.9); +.modal-enter-from, .modal-leave-to { + > .bg { + opacity: 0; + } + + > .content { + pointer-events: none; + opacity: 0; + transform: scale(0.9); + } } -.modal-popup-content-enter-active, .modal-popup-content-leave-active { +.modal-popup-enter-active, .modal-popup-leave-active { + // CSS的には無意味だけどこれが無いとVueが認識しない transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important; + + > .bg { + transition: opacity 0.3s !important; + } + + > .content { + transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important; + } } -.modal-popup-content-enter-from, .modal-popup-content-leave-to { - pointer-events: none; - opacity: 0; - transform: scale(0.9); +.modal-popup-enter-from, .modal-popup-leave-to { + > .bg { + opacity: 0; + } + + > .content { + pointer-events: none; + opacity: 0; + transform: scale(0.9); + } } .mk-modal { @@ -242,12 +256,12 @@ export default defineComponent({ mask-image: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 16px, rgba(0,0,0,1) calc(100% - 16px), rgba(0,0,0,0) 100%); } - > * { + > ::v-deep(*) { margin: auto; } &.top { - > * { + > ::v-deep(*) { margin-top: 0; } }