Better post form

src/client/app/mobile/views/components/note-detail.vue

@@ -75,19 +75,11 @@
 	<div class="replies" v-if="!compact">
 		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
 	</div>
-
-	<modal :name="replyFormId">
-		<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
-	</modal>
-	<modal :name="renoteFormId">
-		<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
-	</modal>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import * as uuid from 'uuid';
 import parse from '../../../../../mfm/parse';
 
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
@@ -113,9 +105,7 @@ export default Vue.extend({
 		return {
 			conversation: [],
 			conversationFetching: false,
-			replies: [],
-			replyFormId: uuid(),
-			renoteFormId: uuid()
+			replies: []
 		};
 	},
 
@@ -195,19 +185,15 @@ export default Vue.extend({
 		},
 
 		reply() {
-			this.$modal.push(this.replyFormId);
-		},
-
-		replyFormClosed() {
-			this.$modal.pop();
+			(this as any).apis.post({
+				reply: this.p
+			});
 		},
 
 		renote() {
-			this.$modal.push(this.renoteFormId);
-		},
-
-		renoteFormClosed() {
-			this.$modal.pop();
+			(this as any).apis.post({
+				renote: this.p
+			});
 		},
 
 		react() {

src/client/app/mobile/views/components/note.vue

@@ -60,19 +60,11 @@
 			</footer>
 		</div>
 	</article>
-
-	<modal :name="replyFormId">
-		<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
-	</modal>
-	<modal :name="renoteFormId">
-		<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
-	</modal>
 </div>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import * as uuid from 'uuid';
 import parse from '../../../../../mfm/parse';
 
 import MkNoteMenu from '../../../common/views/components/note-menu.vue';
@@ -90,9 +82,7 @@ export default Vue.extend({
 		return {
 			showContent: false,
 			connection: null,
-			connectionId: null,
-			replyFormId: uuid(),
-			renoteFormId: uuid()
+			connectionId: null
 		};
 	},
 
@@ -205,19 +195,15 @@ export default Vue.extend({
 		},
 
 		reply() {
-			this.$modal.push(this.replyFormId);
-		},
-
-		replyFormClosed() {
-			this.$modal.pop();
+			(this as any).apis.post({
+				reply: this.p
+			});
 		},
 
 		renote() {
-			this.$modal.push(this.renoteFormId);
-		},
-
-		renoteFormClosed() {
-			this.$modal.pop();
+			(this as any).apis.post({
+				renote: this.p
+			});
 		},
 
 		react() {

src/client/app/mobile/views/components/post-form-dialog.vue

@@ -0,0 +1,131 @@
+<template>
+<div class="ulveipglmagnxfgvitaxyszerjwiqmwl">
+	<div class="bg" ref="bg" @click="onBgClick"></div>
+	<div class="main" ref="main" @click.self="onBgClick">
+		<mk-post-form ref="form"
+			:reply="reply"
+			:renote="renote"
+			:initial-text="initialText"
+			:instant="instant"
+			@posted="onPosted"
+			@cancel="onCanceled"/>
+	</div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as anime from 'animejs';
+
+export default Vue.extend({
+	props: {
+		reply: {
+			type: Object,
+			required: false
+		},
+		renote: {
+			type: Object,
+			required: false
+		},
+		initialText: {
+			type: String,
+			required: false
+		},
+		instant: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+
+	mounted() {
+		this.$nextTick(() => {
+			(this.$refs.bg as any).style.pointerEvents = 'auto';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 1,
+				duration: 100,
+				easing: 'linear'
+			});
+
+			anime({
+				targets: this.$refs.main,
+				opacity: 1,
+				translateY: [-16, 0],
+				duration: 300,
+				easing: 'easeOutQuad'
+			});
+		});
+	},
+
+	methods: {
+		focus() {
+			this.$refs.form.focus();
+		},
+
+		close() {
+			(this.$refs.bg as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.bg,
+				opacity: 0,
+				duration: 300,
+				easing: 'linear'
+			});
+
+			(this.$refs.main as any).style.pointerEvents = 'none';
+			anime({
+				targets: this.$refs.main,
+				opacity: 0,
+				translateY: 16,
+				duration: 300,
+				easing: 'easeOutQuad',
+				complete: () => this.$destroy()
+			});
+		},
+
+		onBgClick() {
+			this.$emit('cancel');
+			this.close();
+		},
+
+		onPosted() {
+			this.$emit('posted');
+			this.close();
+		},
+
+		onCanceled() {
+			this.$emit('cancel');
+			this.close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.ulveipglmagnxfgvitaxyszerjwiqmwl
+	> .bg
+		display block
+		position fixed
+		z-index 10000
+		top 0
+		left 0
+		width 100%
+		height 100%
+		background rgba(#000, 0.7)
+		opacity 0
+		pointer-events none
+
+	> .main
+		display block
+		position fixed
+		z-index 10000
+		top 0
+		left 0
+		right 0
+		height 100%
+		overflow auto
+		margin 0 auto 0 auto
+		opacity 0
+		transform translateY(-16px)
+
+</style>