Improve waiting dialog

2 files changed, 39 insertions, 23 deletions

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/icon-dialog.vue b/src/client/components/waiting-dialog.vue
index e8eae3342f..7e8ebeaec0 100644
--- a/src/client/components/icon-dialog.vue
+++ b/src/client/components/waiting-dialog.vue
@@ -1,8 +1,9 @@
 <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/>
+<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>
@@ -18,12 +19,18 @@ export default defineComponent({
 	},
 
 	props: {
-		type: {
-			required: true
+		success: {
+			type: Boolean,
+			required: true,
 		},
 		showing: {
-			required: true
-		}
+			type: Boolean,
+			required: true,
+		},
+		text: {
+			type: String,
+			required: false,
+		},
 	},
 
 	emits: ['done', 'closed'],
@@ -57,17 +64,32 @@ export default defineComponent({
 	text-align: center;
 	background: var(--panel);
 	border-radius: var(--radius);
-	width: initial;
-	font-size: 32px;
+	width: 250px;
 
-	&.success {
-		color: var(--accent);
-	}
+	&.iconOnly {
+		padding: 0;
+		width: 96px;
+		height: 96px;
 
-	&.waiting {
 		> .icon {
+			height: 100%;
+		}
+	}
+
+	> .icon {
+		font-size: 32px;
+
+		&.success {
+			color: var(--accent);
+		}
+
+		&.waiting {
 			opacity: 0.7;
 		}
 	}
+
+	> .text {
+		margin-top: 16px;
+	}
 }
 </style>