Improve usability

4 files changed, 42 insertions, 17 deletions

diff --git a/src/client/app/mobile/views/components/drive-file-chooser.vue b/src/client/app/mobile/views/components/drive-file-chooser.vue
index d95d5fa223..56e41e31d8 100644
--- a/src/client/app/mobile/views/components/drive-file-chooser.vue
+++ b/src/client/app/mobile/views/components/drive-file-chooser.vue
@@ -48,7 +48,7 @@ export default Vue.extend({
 <style lang="stylus" scoped>
 .mk-drive-file-chooser
 	position fixed
-	z-index 2048
+	z-index 20000
 	top 0
 	left 0
 	width 100%
diff --git a/src/client/app/mobile/views/components/note-detail.vue b/src/client/app/mobile/views/components/note-detail.vue
index f9996f9da6..02ef3845d3 100644
--- a/src/client/app/mobile/views/components/note-detail.vue
+++ b/src/client/app/mobile/views/components/note-detail.vue
@@ -75,6 +75,13 @@
 	<div class="replies" v-if="!compact">
 		<x-sub v-for="note in replies" :key="note.id" :note="note"/>
 	</div>
+
+	<modal name="replyForm">
+		<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
+	</modal>
+	<modal name="renoteForm">
+		<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
+	</modal>
 </div>
 </template>
 
@@ -116,9 +123,11 @@ export default Vue.extend({
 				this.note.mediaIds.length == 0 &&
 				this.note.poll == null);
 		},
+
 		p(): any {
 			return this.isRenote ? this.note.renote : this.note;
 		},
+
 		reactionsCount(): number {
 			return this.p.reactionCounts
 				? Object.keys(this.p.reactionCounts)
@@ -126,6 +135,7 @@ export default Vue.extend({
 					.reduce((a, b) => a + b)
 				: 0;
 		},
+
 		urls(): string[] {
 			if (this.p.text) {
 				const ast = parse(this.p.text);
@@ -180,16 +190,23 @@ export default Vue.extend({
 				this.conversation = conversation.reverse();
 			});
 		},
+
 		reply() {
-			(this as any).apis.post({
-				reply: this.p
-			});
+			this.$modal.push('replyForm');
+		},
+
+		replyFormClosed() {
+			this.$modal.pop();
 		},
+
 		renote() {
-			(this as any).apis.post({
-				renote: this.p
-			});
+			this.$modal.push('renoteForm');
 		},
+
+		renoteFormClosed() {
+			this.$modal.pop();
+		},
+
 		react() {
 			(this as any).os.new(MkReactionPicker, {
 				source: this.$refs.reactButton,
@@ -198,6 +215,7 @@ export default Vue.extend({
 				big: true
 			});
 		},
+
 		menu() {
 			(this as any).os.new(MkNoteMenu, {
 				source: this.$refs.menuButton,
diff --git a/src/client/app/mobile/views/components/note.vue b/src/client/app/mobile/views/components/note.vue
index d0cea135f9..f658686b05 100644
--- a/src/client/app/mobile/views/components/note.vue
+++ b/src/client/app/mobile/views/components/note.vue
@@ -60,6 +60,13 @@
 			</footer>
 		</div>
 	</article>
+
+	<modal name="replyForm">
+		<mk-post-form @posted="replyFormClosed" @cancel="replyFormClosed" :reply="p"/>
+	</modal>
+	<modal name="renoteForm">
+		<mk-post-form @posted="renoteFormClosed" @cancel="renoteFormClosed" :renote="p"/>
+	</modal>
 </div>
 </template>
 
@@ -195,15 +202,19 @@ export default Vue.extend({
 		},
 
 		reply() {
-			(this as any).apis.post({
-				reply: this.p
-			});
+			this.$modal.push('replyForm');
+		},
+
+		replyFormClosed() {
+			this.$modal.pop();
 		},
 
 		renote() {
-			(this as any).apis.post({
-				renote: this.p
-			});
+			this.$modal.push('renoteForm');
+		},
+
+		renoteFormClosed() {
+			this.$modal.pop();
 		},
 
 		react() {
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index a74df67c0a..537bf407dc 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -293,9 +293,6 @@ export default Vue.extend({
 				viaMobile: viaMobile
 			}).then(data => {
 				this.$emit('posted');
-				this.$nextTick(() => {
-					this.$destroy();
-				});
 			}).catch(err => {
 				this.posting = false;
 			});
@@ -309,7 +306,6 @@ export default Vue.extend({
 
 		cancel() {
 			this.$emit('cancel');
-			this.$destroy();
 		},
 
 		kao() {