wip

src/client/components/dialog.vue

@@ -1,5 +1,5 @@
 <template>
-<x-modal ref="modal" @closed="$emit('closed')" @click="onBgClick" :showing="showing">
+<x-modal @closed="$emit('closed')" @click="onBgClick" :showing="showing">
 	<div class="mk-dialog" :class="{ iconOnly }">
 		<template v-if="type == 'signin'">
 			<mk-signin/>

src/client/components/menu.vue

@@ -1,5 +1,5 @@
 <template>
-<x-modal :source="source" :no-center="noCenter" ref="popup" @click="close()" @closed="$emit('closed')" :showing="showing">
+<x-modal :source="source" :no-center="noCenter" @click="close()" @closed="$emit('closed')" :showing="showing">
 	<div class="rrevdjwt" :class="{ left: align === 'left' }" ref="items" :style="{ width: width + 'px' }">
 		<template v-for="(item, i) in items.filter(item => item !== undefined)">
 			<div v-if="item === null" class="divider" :key="i"></div>

src/client/components/post-form-dialog.vue

@@ -1,45 +1,33 @@
 <template>
-<div class="ulveipgl" :style="{ pointerEvents: closing ? 'none' : 'auto' }">
+<x-modal @closed="$emit('closed')" @click="onBgClick" :showing="showing">
-	<transition :name="$store.state.device.animation ? 'form-fade' : ''" appear @after-leave="destroy">
+	<x-post-form ref="form" class="ulveipgl"
-		<div class="bg _modalBg" ref="bg" v-if="!closing" @click="close()"></div>
+		:reply="reply"
-	</transition>
+		:renote="renote"
-	<div class="main" ref="main" @click.self="close()" @keydown="onKeydown">
+		:mention="mention"
-		<transition :name="$store.state.device.animation ? 'form' : ''" appear
+		:specified="specified"
-			@after-leave="destroyDom"
+		:initial-text="initialText"
-		>
+		:initial-note="initialNote"
-			<x-post-form ref="form"
+		:instant="instant"
-				v-if="!closing"
+		@posted="onPosted"
-				:reply="reply"
+		@cancel="onCanceled"
-				:renote="renote"
+	/>
-				:mention="mention"
+</x-modal>
-				:specified="specified"
-				:initial-text="initialText"
-				:initial-note="initialNote"
-				:instant="instant"
-				@posted="onPosted"
-				@cancel="onCanceled"
-				style="border-radius: var(--radius);"
-			/>
-		</transition>
-	</div>
-</div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
+import XModal from './modal.vue';
 import XPostForm from './post-form.vue';
 import * as os from '@/os';
 
 export default defineComponent({
 	components: {
-		XPostForm
+		XModal,
+		XPostForm,
 	},
 
 	props: {
-		destroy: {
+		showing: {
-			required: true
-		},
-		emit: {
 			required: true
 		},
 		reply: {
@@ -73,36 +61,24 @@ export default defineComponent({
 		}
 	},
 
-	data() {
-		return {
-			closing: false
-		};
-	},
-
 	methods: {
 		focus() {
 			this.$refs.form.focus();
 		},
 
-		close() {
-			this.closing = true;
-		},
-
 		onPosted() {
-			this.$emit('posted');
+			this.$emit('done', 'posted');
-			this.close();
 		},
 
 		onCanceled() {
-			this.$emit('cancel');
+			this.$emit('done', 'canceled');
-			this.close();
 		},
 
 		onKeydown(e) {
 			if (e.which === 27) { // Esc
 				e.preventDefault();
 				e.stopPropagation();
-				this.close();
+				this.$emit('done', 'canceled');
 			}
 		},
 	}
@@ -110,48 +86,9 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.form-enter-active, .form-leave-active {
-	transition: opacity 0.3s, transform 0.3s !important;
-}
-.form-enter-from, .form-leave-to {
-	opacity: 0;
-	transform: scale(0.9);
-}
-
-.form-fade-enter-active, .form-fade-leave-active {
-	transition: opacity 0.3s !important;
-}
-.form-fade-enter-from, .form-fade-leave-to {
-	opacity: 0;
-}
-
 .ulveipgl {
-	> .bg {
+	width: 100%;
-		z-index: 10000;
+	max-width: 500px;
-	}
+	border-radius: var(--radius);
-
-	> .main {
-		display: block;
-		position: fixed;
-		z-index: 10000;
-		top: 32px;
-		left: 0;
-		right: 0;
-		height: calc(100% - 64px);
-		width: 500px;
-		max-width: calc(100% - 16px);
-		overflow: auto;
-		margin: 0 auto 0 auto;
-
-		@media (max-width: 550px) {
-			top: 16px;
-			height: calc(100% - 32px);
-		}
-
-		@media (max-width: 520px) {
-			top: 8px;
-			height: calc(100% - 16px);
-		}
-	}
 }
 </style>

src/client/components/post-form.vue

@@ -633,6 +633,7 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .gafaadew {
+	position: relative;
 	background: var(--panel);
 
 	> header {

src/client/components/reaction-picker.vue

@@ -1,5 +1,5 @@
 <template>
-<XModal :source="source" ref="popup" @closed="destroy" v-hotkey.global="keymap">
+<XModal :source="source" @closed="$emit('closed')" :showing="showing" @click="close" v-hotkey.global="keymap">
 	<div class="rdfaahpb">
 		<div class="buttons" ref="buttons" :class="{ showFocus }">
 			<button class="_button" v-for="(reaction, i) in rs" :key="reaction" @click="react(reaction)" :tabindex="i + 1" :title="reaction" v-particle><x-reaction-icon :reaction="reaction"/></button>
@@ -23,10 +23,7 @@ export default defineComponent({
 	},
 
 	props: {
-		destroy: {
+		showing: {
-			required: true
-		},
-		emit: {
 			required: true
 		},
 
@@ -88,11 +85,11 @@ export default defineComponent({
 
 	methods: {
 		close() {
-			this.$refs.popup.close();
+			this.$emit('done');
 		},
 	
 		react(reaction) {
-			this.$emit('chosen', reaction);
+			this.$emit('done', reaction);
 		},
 
 		reactText() {
@@ -131,6 +128,10 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .rdfaahpb {
+	background: var(--panel);
+	border-radius: 8px;
+	box-shadow: 0 3px 12px rgba(27, 31, 35, 0.15);
+
 	> .buttons {
 		padding: 6px 6px 0 6px;
 		width: 212px;