From 1df7abfbb906f2e364b5eb5fefc5f9de5dd60026 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 18 Oct 2020 10:11:34 +0900
Subject: Improve waiting dialog

---
 src/client/components/icon-dialog.vue    | 73 ------------------------
 src/client/components/page/page.post.vue | 12 +---
 src/client/components/waiting-dialog.vue | 95 ++++++++++++++++++++++++++++++++
 3 files changed, 98 insertions(+), 82 deletions(-)
 delete mode 100644 src/client/components/icon-dialog.vue
 create mode 100644 src/client/components/waiting-dialog.vue

(limited to 'src/client/components')

diff --git a/src/client/components/icon-dialog.vue b/src/client/components/icon-dialog.vue
deleted file mode 100644
index e8eae3342f..0000000000
--- a/src/client/components/icon-dialog.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-<MkModal ref="modal" @click="type === 'success' ? done() : () => {}" @closed="$emit('closed')">
-	<div class="iuyakobc" :class="type">
-		<Fa class="icon" v-if="type === 'success'" :icon="faCheck"/>
-		<Fa class="icon" v-else-if="type === 'waiting'" :icon="faSpinner" pulse/>
-	</div>
-</MkModal>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { faCheck, faSpinner } from '@fortawesome/free-solid-svg-icons';
-import MkModal from '@/components/ui/modal.vue';
-
-export default defineComponent({
-	components: {
-		MkModal,
-	},
-
-	props: {
-		type: {
-			required: true
-		},
-		showing: {
-			required: true
-		}
-	},
-
-	emits: ['done', 'closed'],
-
-	data() {
-		return {
-			faCheck, faSpinner,
-		};
-	},
-
-	watch: {
-		showing() {
-			if (!this.showing) this.done();
-		}
-	},
-
-	methods: {
-		done() {
-			this.$emit('done');
-			this.$refs.modal.close();
-		},
-	}
-});
-</script>
-
-<style lang="scss" scoped>
-.iuyakobc {
-	position: relative;
-	padding: 32px;
-	box-sizing: border-box;
-	text-align: center;
-	background: var(--panel);
-	border-radius: var(--radius);
-	width: initial;
-	font-size: 32px;
-
-	&.success {
-		color: var(--accent);
-	}
-
-	&.waiting {
-		> .icon {
-			opacity: 0.7;
-		}
-	}
-}
-</style>
diff --git a/src/client/components/page/page.post.vue b/src/client/components/page/page.post.vue
index e2b712667a..ac8be4a397 100644
--- a/src/client/components/page/page.post.vue
+++ b/src/client/components/page/page.post.vue
@@ -44,14 +44,7 @@ export default defineComponent({
 	},
 	methods: {
 		upload() {
-			return new Promise((ok) => {
-				const dialog = os.dialog({
-					type: 'waiting',
-					text: this.$t('uploading') + '...',
-					showOkButton: false,
-					showCancelButton: false,
-					cancelableByBgClick: false
-				});
+			const promise = new Promise((ok) => {
 				const canvas = this.hpml.canvases[this.value.canvasId];
 				canvas.toBlob(blob => {
 					const data = new FormData();
@@ -67,11 +60,12 @@ export default defineComponent({
 					})
 					.then(response => response.json())
 					.then(f => {
-						dialog.close();
 						ok(f);
 					})
 				});
 			});
+			os.promiseDialog(promise);
+			return promise;
 		},
 		async post() {
 			this.posting = true;
diff --git a/src/client/components/waiting-dialog.vue b/src/client/components/waiting-dialog.vue
new file mode 100644
index 0000000000..7e8ebeaec0
--- /dev/null
+++ b/src/client/components/waiting-dialog.vue
@@ -0,0 +1,95 @@
+<template>
+<MkModal ref="modal" @click="success ? done() : () => {}" @closed="$emit('closed')">
+	<div class="iuyakobc" :class="{ iconOnly: (text == null) || success }">
+		<Fa class="icon success" v-if="success" :icon="faCheck"/>
+		<Fa class="icon waiting" v-else :icon="faSpinner" pulse/>
+		<div class="text" v-if="text && !success">{{ text }}<MkEllipsis/></div>
+	</div>
+</MkModal>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import { faCheck, faSpinner } from '@fortawesome/free-solid-svg-icons';
+import MkModal from '@/components/ui/modal.vue';
+
+export default defineComponent({
+	components: {
+		MkModal,
+	},
+
+	props: {
+		success: {
+			type: Boolean,
+			required: true,
+		},
+		showing: {
+			type: Boolean,
+			required: true,
+		},
+		text: {
+			type: String,
+			required: false,
+		},
+	},
+
+	emits: ['done', 'closed'],
+
+	data() {
+		return {
+			faCheck, faSpinner,
+		};
+	},
+
+	watch: {
+		showing() {
+			if (!this.showing) this.done();
+		}
+	},
+
+	methods: {
+		done() {
+			this.$emit('done');
+			this.$refs.modal.close();
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.iuyakobc {
+	position: relative;
+	padding: 32px;
+	box-sizing: border-box;
+	text-align: center;
+	background: var(--panel);
+	border-radius: var(--radius);
+	width: 250px;
+
+	&.iconOnly {
+		padding: 0;
+		width: 96px;
+		height: 96px;
+
+		> .icon {
+			height: 100%;
+		}
+	}
+
+	> .icon {
+		font-size: 32px;
+
+		&.success {
+			color: var(--accent);
+		}
+
+		&.waiting {
+			opacity: 0.7;
+		}
+	}
+
+	> .text {
+		margin-top: 16px;
+	}
+}
+</style>
-- 
cgit v1.2.3-freya