limepotato/jormungandr-bite
1
0
Fork 0
mirror of https://iceshrimp.dev/limepotato/jormungandr-bite.git synced 2024-11-26 11:57:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor modal

Browse source
This commit is contained in:
syuilo 2021-03-05 16:59:43 +09:00
parent 6ff7503767
commit cf51c61cb6
2 changed files with 59 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/client/components/emoji-picker-dialog.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<MkModal ref="modal" :manual-showing="manualShowing" :src="src" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')" v-slot="{ showing }"> <MkModal ref="modal" :manual-showing="manualShowing" :src="src" @click="$refs.modal.close()" @opening="opening" @close="$emit('close')" @closed="$emit('closed')">
<MkEmojiPicker v-show="showing !== false" :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/> <MkEmojiPicker :show-pinned="showPinned" :as-reaction-picker="asReactionPicker" @chosen="chosen" ref="picker"/>
</MkModal> </MkModal>
</template> </template>

100
src/client/components/ui/modal.vue
View file

@ -1,14 +1,12 @@
<template> <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 ? popup ? 'modal-popup' : 'modal' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered">
<transition :name="$store.state.animation ? 'modal-bg' : ''" appear> <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" v-if="manualShowing != null ? manualShowing : showing" @click="onBgClick"></div> <div class="bg _modalBg" @click="onBgClick"></div>
</transition> <div class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick" ref="content">
<div class="content" :class="{ popup, fixed, top: position === 'top' }" @click.self="onBgClick" ref="content"> <slot></slot>
<transition :name="$store.state.animation ? popup ? 'modal-popup-content' : 'modal-content' : ''" appear @after-leave="onClosed" @enter="$emit('opening')" @after-enter="childRendered"> </div>
<slot v-if="manualShowing != null ? true : showing" v-bind:showing="manualShowing"></slot>
</transition>
</div> </div>
</div> </transition>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -52,7 +50,6 @@ export default defineComponent({
fixed: false, fixed: false,
transformOrigin: 'center', transformOrigin: 'center',
contentClicking: false, contentClicking: false,
display: this.manualShowing == null ? 'block' : 'none',
}; };
}, },
computed: { computed: {
@ -65,15 +62,6 @@ export default defineComponent({
return this.src != null; return this.src != null;
} }
}, },
watch: {
manualShowing: {
handler(v) {
console.log(v);
if (v) this.display = 'block';
},
immediate: true
}
},
mounted() { mounted() {
this.$watch('src', () => { this.$watch('src', () => {
this.fixed = getFixedContainer(this.src) != null; this.fixed = getFixedContainer(this.src) != null;
@ -95,6 +83,8 @@ export default defineComponent({
const popover = this.$refs.content as any; const popover = this.$refs.content as any;
if (popover == null) return;
const rect = this.src.getBoundingClientRect(); const rect = this.src.getBoundingClientRect();
const width = popover.offsetWidth; const width = popover.offsetWidth;
@ -177,43 +167,67 @@ export default defineComponent({
onClosed() { onClosed() {
this.$emit('closed'); this.$emit('closed');
this.display = 'none';
} }
} }
}); });
</script> </script>
<style> <style lang="scss">
.modal-popup-content-enter-active, .modal-popup-content-leave-active, .modal-popup-enter-active, .modal-popup-leave-active,
.modal-content-enter-from, .modal-content-leave-to { .modal-enter-from, .modal-leave-to {
transform-origin: var(--transformOrigin); > .content {
transform-origin: var(--transformOrigin);
}
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.modal-bg-enter-active, .modal-bg-leave-active { .modal-enter-active, .modal-leave-active {
transition: opacity 0.3s !important; // CSS的には無意味だけどこれが無いとVueが認識しない
}
.modal-bg-enter-from, .modal-bg-leave-to {
opacity: 0;
}
.modal-content-enter-active, .modal-content-leave-active {
transition: opacity 0.3s, transform 0.3s !important; 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 { .modal-enter-from, .modal-leave-to {
pointer-events: none; > .bg {
opacity: 0; opacity: 0;
transform: scale(0.9); }
> .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; 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 { .modal-popup-enter-from, .modal-popup-leave-to {
pointer-events: none; > .bg {
opacity: 0; opacity: 0;
transform: scale(0.9); }
> .content {
pointer-events: none;
opacity: 0;
transform: scale(0.9);
}
} }
.mk-modal { .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%); 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; margin: auto;
} }
&.top { &.top {
> * { > ::v-deep(*) {
margin-top: 0; margin-top: 0;
} }
} }