Improve input dialog

src/client/app/admin/views/announcements.vue

@@ -52,8 +52,8 @@ export default Vue.extend({
 				type: 'warning',
 				text: this.$t('_remove.are-you-sure').replace('$1', this.announcements.find((_, j) => j == i).title),
 				showCancelButton: true
-			}).then(res => {
+			}).then(({ canceled }) => {
-				if (!res) return;
+				if (canceled) return;
 				this.announcements = this.announcements.filter((_, j) => j !== i);
 				this.save(true);
 				this.$root.dialog({

src/client/app/admin/views/emoji.vue

@@ -120,8 +120,8 @@ export default Vue.extend({
 				type: 'warning',
 				text: this.$t('remove-emoji.are-you-sure').replace('$1', emoji.name),
 				showCancelButton: true
-			}).then(res => {
+			}).then(({ canceled }) => {
-				if (!res) return;
+				if (canceled) return;
 
 				this.$root.api('admin/emoji/remove', {
 					id: emoji.id

src/client/app/common/views/components/api-settings.vue

@@ -50,10 +50,13 @@ export default Vue.extend({
 
 	methods: {
 		regenerateToken() {
-			this.$input({
+			this.$root.dialog({
 				title: this.$t('enter-password'),
+				input: {
 					type: 'password'
-			}).then(password => {
+				}
+			}).then(({ canceled, result: password }) => {
+				if (canceled) return;
 				this.$root.api('i/regenerate_token', {
 					password: password
 				});

src/client/app/common/views/components/dialog.vue

@@ -2,15 +2,17 @@
 <div class="felqjxyj" :class="{ splash }">
 	<div class="bg" ref="bg" @click="onBgClick"></div>
 	<div class="main" ref="main">
-		<div class="icon" v-if="type" :class="type"><fa :icon="icon"/></div>
+		<div class="icon" v-if="!input && !select && !user" :class="type"><fa :icon="icon"/></div>
 		<header v-if="title" v-html="title"></header>
 		<div class="body" v-if="text" v-html="text"></div>
+		<ui-input v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></ui-input>
+		<ui-input v-if="user" v-model="userInputValue" autofocus @keydown="onInputKeydown"><span slot="prefix">@</span></ui-input>
 		<ui-select v-if="select" v-model="selectedValue">
 			<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
 		</ui-select>
 		<ui-horizon-group no-grow class="buttons fit-bottom" v-if="!splash">
-			<ui-button @click="ok" primary autofocus>OK</ui-button>
+			<ui-button @click="ok" primary :autofocus="!input && !select && !user">OK</ui-button>
-			<ui-button @click="cancel" v-if="showCancelButton">Cancel</ui-button>
+			<ui-button @click="cancel" v-if="showCancelButton || input || select || user">Cancel</ui-button>
 		</ui-horizon-group>
 	</div>
 </div>
@@ -20,6 +22,7 @@
 import Vue from 'vue';
 import * as anime from 'animejs';
 import { faTimesCircle, faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
+import parseAcct from "../../../../../misc/acct/parse";
 
 export default Vue.extend({
 	props: {
@@ -36,9 +39,15 @@ export default Vue.extend({
 			type: String,
 			required: false
 		},
+		input: {
+			required: false
+		},
 		select: {
 			required: false
 		},
+		user: {
+			required: false
+		},
 		showCancelButton: {
 			type: Boolean,
 			default: false
@@ -51,6 +60,8 @@ export default Vue.extend({
 
 	data() {
 		return {
+			inputValue: this.input && this.input.default ? this.input.default : null,
+			userInputValue: null,
 			selectedValue: null
 		};
 	},
@@ -94,10 +105,21 @@ export default Vue.extend({
 	},
 
 	methods: {
-		ok() {
+		async ok() {
-			const result = this.select ? this.selectedValue : true;
+			if (this.user) {
+				const user = await this.$root.api('users/show', parseAcct(this.userInputValue));
+				if (user) {
+					this.$emit('ok', user);
+					this.close();
+				}
+			} else {
+				const result =
+					this.input ? this.inputValue :
+					this.select ? this.selectedValue :
+					true;
 				this.$emit('ok', result);
 				this.close();
+			}
 		},
 
 		cancel() {
@@ -127,6 +149,14 @@ export default Vue.extend({
 
 		onBgClick() {
 			this.cancel();
+		},
+
+		onInputKeydown(e) {
+			if (e.which == 13) { // Enter
+				e.preventDefault();
+				e.stopPropagation();
+				this.ok();
+			}
 		}
 	}
 });

src/client/app/common/views/components/games/reversi/reversi.index.vue

@@ -99,13 +99,14 @@ export default Vue.extend({
 			this.$emit('go', game);
 		},
 
-		match() {
+		async match() {
-			this.$input({
+			const { result: user } = await this.$root.dialog({
-				title: this.$t('enter-username')
+				title: this.$t('enter-username'),
-			}).then(username => {
+				user: {
-				this.$root.api('users/show', {
+					local: true
-					username
+				}
-				}).then(user => {
+			});
+			if (user == null) return;
 			this.$root.api('games/reversi/match', {
 				userId: user.id
 			}).then(res => {
@@ -115,8 +116,6 @@ export default Vue.extend({
 					this.$emit('go', res);
 				}
 			});
-				});
-			});
 		},
 
 		accept(invitation) {

src/client/app/common/views/components/note-menu.vue

@@ -99,8 +99,8 @@ export default Vue.extend({
 				type: 'warning',
 				text: this.$t('delete-confirm'),
 				showCancelButton: true
-			}).then(res => {
+			}).then(({ canceled }) => {
-				if (!res) return;
+				if (canceled) return;
 
 				this.$root.api('notes/delete', {
 					noteId: this.note.id

src/client/app/common/views/components/password-settings.vue

@@ -11,19 +11,31 @@ import i18n from '../../../i18n';
 export default Vue.extend({
 	i18n: i18n('common/views/components/password-settings.vue'),
 	methods: {
-		reset() {
+		async reset() {
-			this.$input({
+			const { canceled: canceled1, result: currentPassword } = await this.$root.dialog({
 				title: this.$t('enter-current-password'),
+				input: {
 					type: 'password'
-			}).then(currentPassword => {
+				}
-				this.$input({
+			});
+			if (canceled1) return;
+
+			const { canceled: canceled2, result: newPassword } = await this.$root.dialog({
 				title: this.$t('enter-new-password'),
+				input: {
 					type: 'password'
-				}).then(newPassword => {
+				}
-					this.$input({
+			});
+			if (canceled2) return;
+
+			const { canceled: canceled3, result: newPassword2 } = await this.$root.dialog({
 				title: this.$t('enter-new-password-again'),
+				input: {
 					type: 'password'
-					}).then(newPassword2 => {
+				}
+			});
+			if (canceled3) return;
+
 			if (newPassword !== newPassword2) {
 				this.$root.dialog({
 					title: null,
@@ -37,9 +49,6 @@ export default Vue.extend({
 			}).then(() => {
 				this.$notify(this.$t('changed'));
 			});
-					});
-				});
-			});
 		}
 	}
 });

src/client/app/common/views/components/profile-editor.vue

@@ -222,10 +222,13 @@ export default Vue.extend({
 		},
 
 		updateEmail() {
-			this.$input({
+			this.$root.dialog({
 				title: this.$t('@.enter-password'),
+				input: {
 					type: 'password'
-			}).then(password => {
+				}
+			}).then(({ canceled, result: password }) => {
+				if (canceled) return;
 				this.$root.api('i/update_email', {
 					password: password,
 					email: this.email == '' ? null : this.email

src/client/app/common/views/components/ui/input.vue

@@ -14,17 +14,19 @@
 				:disabled="disabled"
 				:required="required"
 				:readonly="readonly"
+				:placeholder="placeholder"
 				:pattern="pattern"
 				:autocomplete="autocomplete"
 				:spellcheck="spellcheck"
 				@focus="focused = true"
 				@blur="focused = false"
+				@keydown="$emit('keydown', $event)"
 			>
 		</template>
 		<template v-else>
 			<input ref="input"
 				type="text"
-				:value="placeholder"
+				:value="filePlaceholder"
 				readonly
 				@click="chooseFile"
 			>
@@ -74,6 +76,15 @@ export default Vue.extend({
 			type: String,
 			required: false
 		},
+		placeholder: {
+			type: String,
+			required: false
+		},
+		autofocus: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
 		autocomplete: {
 			required: false
 		},
@@ -109,7 +120,7 @@ export default Vue.extend({
 		filled(): boolean {
 			return this.v != '' && this.v != null;
 		},
-		placeholder(): string {
+		filePlaceholder(): string {
 			if (this.type != 'file') return null;
 			if (this.v == null) return null;
 
@@ -142,6 +153,12 @@ export default Vue.extend({
 		}
 	},
 	mounted() {
+		if (this.autofocus) {
+			this.$nextTick(() => {
+				this.$refs.input.focus();
+			});
+		}
+
 		this.$nextTick(() => {
 			if (this.$refs.prefix) {
 				this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';

src/client/app/desktop/script.ts

@@ -34,7 +34,6 @@ import PostFormWindow from './views/components/post-form-window.vue';
 import RenoteFormWindow from './views/components/renote-form-window.vue';
 import MkChooseFileFromDriveWindow from './views/components/choose-file-from-drive-window.vue';
 import MkChooseFolderFromDriveWindow from './views/components/choose-folder-from-drive-window.vue';
-import InputDialog from './views/components/input-dialog.vue';
 import Notification from './views/components/ui-notification.vue';
 
 import { url } from '../config';
@@ -113,22 +112,6 @@ init(async (launch) => {
 				});
 			},
 
-			$input(opts) {
-				return new Promise<string>((res, rej) => {
-					const o = opts || {};
-					const d = this.$root.new(InputDialog, {
-						title: o.title,
-						placeholder: o.placeholder,
-						default: o.default,
-						type: o.type || 'text',
-						allowEmpty: o.allowEmpty
-					});
-					d.$once('done', text => {
-						res(text);
-					});
-				});
-			},
-
 			$notify(message) {
 				this.$root.new(Notification, {
 					message

src/client/app/desktop/views/components/drive.file.vue

@@ -148,12 +148,15 @@ export default Vue.extend({
 		},
 
 		rename() {
-			this.$input({
+			this.$root.dialog({
 				title: this.$t('contextmenu.rename-file'),
+				input: {
 					placeholder: this.$t('contextmenu.input-new-file-name'),
 					default: this.file.name,
 					allowEmpty: false
-			}).then(name => {
+				}
+			}).then(({ canceled, result: name }) => {
+				if (canceled) return;
 				this.$root.api('drive/files/update', {
 					fileId: this.file.id,
 					name: name

src/client/app/desktop/views/components/drive.folder.vue

@@ -192,11 +192,14 @@ export default Vue.extend({
 		},
 
 		rename() {
-			this.$input({
+			this.$root.dialog({
 				title: this.$t('contextmenu.rename-folder'),
+				input: {
 					placeholder: this.$t('contextmenu.input-new-folder-name'),
 					default: this.folder.name
-			}).then(name => {
+				}
+			}).then(({ canceled, result: name }) => {
+				if (canceled) return;
 				this.$root.api('drive/folders/update', {
 					folderId: this.folder.id,
 					name: name

src/client/app/desktop/views/components/drive.vue

@@ -331,10 +331,13 @@ export default Vue.extend({
 		},
 
 		urlUpload() {
-			this.$input({
+			this.$root.dialog({
 				title: this.$t('url-upload'),
+				input: {
 					placeholder: this.$t('url-of-file')
-			}).then(url => {
+				}
+			}).then(({ canceled, result: url }) => {
+				if (canceled) return;
 				this.$root.api('drive/files/upload_from_url', {
 					url: url,
 					folderId: this.folder ? this.folder.id : undefined
@@ -348,10 +351,13 @@ export default Vue.extend({
 		},
 
 		createFolder() {
-			this.$input({
+			this.$root.dialog({
 				title: this.$t('create-folder'),
+				input: {
 					placeholder: this.$t('folder-name')
-			}).then(name => {
+				}
+			}).then(({ canceled, result: name }) => {
+				if (canceled) return;
 				this.$root.api('drive/folders/create', {
 					name: name,
 					parentId: this.folder ? this.folder.id : undefined

src/client/app/desktop/views/components/input-dialog.vue

@@ -1,180 +0,0 @@
-<template>
-<mk-window ref="window" is-modal width="500px" @before-close="beforeClose" @closed="destroyDom">
-	<span slot="header" :class="$style.header">
-		<fa icon="i-cursor"/>{{ title }}
-	</span>
-
-	<div :class="$style.body">
-		<input ref="text" v-model="text" :type="type" @keydown="onKeydown" :placeholder="placeholder"/>
-	</div>
-	<div :class="$style.actions">
-		<button :class="$style.cancel" @click="cancel">{{ $t('cancel') }}</button>
-		<button :class="$style.ok" :disabled="!allowEmpty && text.length == 0" @click="ok">{{ $t('ok') }}</button>
-	</div>
-</mk-window>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-import i18n from '../../../i18n';
-export default Vue.extend({
-	i18n: i18n('desktop/views/input-dialog.vue'),
-	props: {
-		title: {
-			type: String
-		},
-		placeholder: {
-			type: String
-		},
-		default: {
-			type: String
-		},
-		allowEmpty: {
-			default: true
-		},
-		type: {
-			default: 'text'
-		}
-	},
-	data() {
-		return {
-			done: false,
-			text: ''
-		};
-	},
-	mounted() {
-		if (this.default) this.text = this.default;
-		this.$nextTick(() => {
-			(this.$refs.text as any).focus();
-		});
-	},
-	methods: {
-		ok() {
-			if (!this.allowEmpty && this.text == '') return;
-			this.done = true;
-			(this.$refs.window as any).close();
-		},
-		cancel() {
-			this.done = false;
-			(this.$refs.window as any).close();
-		},
-		beforeClose() {
-			if (this.done) {
-				this.$emit('done', this.text);
-			} else {
-				this.$emit('canceled');
-			}
-		},
-		onKeydown(e) {
-			if (e.which == 13) { // Enter
-				e.preventDefault();
-				e.stopPropagation();
-				this.ok();
-			}
-		}
-	}
-});
-</script>
-
-
-<style lang="stylus" module>
-.header
-	> [data-icon]
-		margin-right 4px
-
-.body
-	padding 16px
-
-	> input
-		display block
-		padding 8px
-		margin 0
-		width 100%
-		max-width 100%
-		min-width 100%
-		font-size 1em
-		color #333
-		background #fff
-		outline none
-		border solid 1px var(--primaryAlpha01)
-		border-radius 4px
-		transition border-color .3s ease
-
-		&:hover
-			border-color var(--primaryAlpha02)
-			transition border-color .1s ease
-
-		&:focus
-			color var(--primary)
-			border-color var(--primaryAlpha05)
-			transition border-color 0s ease
-
-		&::-webkit-input-placeholder
-			color var(--primaryAlpha03)
-
-.actions
-	height 72px
-	background var(--primaryLighten95)
-
-.ok
-.cancel
-	display block
-	position absolute
-	bottom 16px
-	cursor pointer
-	padding 0
-	margin 0
-	width 120px
-	height 40px
-	font-size 1em
-	outline none
-	border-radius 4px
-
-	&:focus
-		&:after
-			content ""
-			pointer-events none
-			position absolute
-			top -5px
-			right -5px
-			bottom -5px
-			left -5px
-			border 2px solid var(--primaryAlpha03)
-			border-radius 8px
-
-	&:disabled
-		opacity 0.7
-		cursor default
-
-.ok
-	right 16px
-	color var(--primaryForeground)
-	background linear-gradient(to bottom, var(--primaryLighten25) 0%, var(--primaryLighten10) 100%)
-	border solid 1px var(--primaryLighten15)
-
-	&:not(:disabled)
-		font-weight bold
-
-	&:hover:not(:disabled)
-		background linear-gradient(to bottom, var(--primaryLighten8) 0%, var(--primaryDarken8) 100%)
-		border-color var(--primary)
-
-	&:active:not(:disabled)
-		background var(--primary)
-		border-color var(--primary)
-
-.cancel
-	right 148px
-	color #888
-	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-	border solid 1px #e2e2e2
-
-	&:hover
-		background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-		border-color #dcdcdc
-
-	&:active
-		background #ececec
-		border-color #dcdcdc
-
-</style>

src/client/app/desktop/views/components/post-form.vue

@@ -384,14 +384,13 @@ export default Vue.extend({
 		},
 
 		addVisibleUser() {
-			this.$input({
+			this.$root.dialog({
-				title: this.$t('enter-username')
+				title: this.$t('enter-username'),
-			}).then(acct => {
+				user: true
-				if (acct.startsWith('@')) acct = acct.substr(1);
+			}).then(({ canceled, result: user }) => {
-				this.$root.api('users/show', parseAcct(acct)).then(user => {
+				if (canceled) return;
 				this.visibleUsers.push(user);
 			});
-			});
 		},
 
 		removeVisibleUser(user) {

src/client/app/desktop/views/components/settings.2fa.vue

@@ -35,10 +35,13 @@ export default Vue.extend({
 	},
 	methods: {
 		register() {
-			this.$input({
+			this.$root.dialog({
 				title: this.$t('enter-password'),
+				input: {
 					type: 'password'
-			}).then(password => {
+				}
+			}).then(({ canceled, result: password }) => {
+				if (canceled) return;
 				this.$root.api('i/2fa/register', {
 					password: password
 				}).then(data => {
@@ -48,10 +51,13 @@ export default Vue.extend({
 		},
 
 		unregister() {
-			this.$input({
+			this.$root.dialog({
 				title: this.$t('enter-password'),
+				input: {
 					type: 'password'
-			}).then(password => {
+				}
+			}).then(({ canceled, result: password }) => {
+				if (canceled) return;
 				this.$root.api('i/2fa/unregister', {
 					password: password
 				}).then(() => {

src/client/app/desktop/views/components/timeline.vue

@@ -109,9 +109,11 @@ export default Vue.extend({
 				icon: 'plus',
 				text: this.$t('add-list'),
 				action: () => {
-					this.$input({
+					this.$root.dialog({
 						title: this.$t('list-name'),
-					}).then(async title => {
+						input: true
+					}).then(async ({ canceled, result: title }) => {
+						if (canceled) return;
 						const list = await this.$root.api('users/lists/create', {
 							title
 						});

src/client/app/desktop/views/components/user-lists-window.vue

@@ -29,9 +29,11 @@ export default Vue.extend({
 	},
 	methods: {
 		add() {
-			this.$input({
+			this.$root.dialog({
 				title: this.$t('list-name'),
-			}).then(async title => {
+				input: true
+			}).then(async ({ canceled, result: title }) => {
+				if (canceled) return;
 				const list = await this.$root.api('users/lists/create', {
 					title
 				});

src/client/app/desktop/views/pages/deck/deck.column.vue

@@ -167,11 +167,14 @@ export default Vue.extend({
 				icon: 'pencil-alt',
 				text: this.$t('rename'),
 				action: () => {
-					this.$input({
+					this.$root.dialog({
 						title: this.$t('rename'),
+						input: {
 							default: this.name,
 							allowEmpty: false
-					}).then(name => {
+						}
+					}).then(({ canceled, result: name }) => {
+						if (canceled) return;
 						this.$store.dispatch('settings/renameDeckColumn', { id: this.column.id, name });
 					});
 				}

src/client/app/desktop/views/pages/deck/deck.vue

@@ -252,9 +252,11 @@ export default Vue.extend({
 					icon: 'hashtag',
 					text: this.$t('@deck.hashtag'),
 					action: () => {
-						this.$input({
+						this.$root.dialog({
-							title: this.$t('enter-hashtag-tl-title')
+							title: this.$t('enter-hashtag-tl-title'),
-						}).then(title => {
+							input: true
+						}).then(({ canceled, result: title }) => {
+							if (canceled) return;
 							this.$store.dispatch('settings/addDeckColumn', {
 								id: uuid(),
 								type: 'hashtag',

src/client/app/desktop/views/pages/user/user.profile.vue

@@ -77,8 +77,8 @@ export default Vue.extend({
 				type: 'warning',
 				text: this.$t('block-confirm'),
 				showCancelButton: true
-			}).then(res => {
+			}).then(({ canceled }) => {
-				if (!res) return;
+				if (canceled) return;
 
 				this.$root.api('blocking/create', {
 					userId: this.user.id

src/client/app/init.ts

@@ -460,8 +460,8 @@ export default (callback: (launch: (router: VueRouter) => [Vue, MiOS]) => void,
 					dialog(opts) {
 						return new Promise((res) => {
 							const vm = this.new(Dialog, opts);
-							vm.$once('ok', result => res(result));
+							vm.$once('ok', result => res({ canceled: false, result }));
-							vm.$once('cancel', () => res(false));
+							vm.$once('cancel', () => res({ canceled: true }));
 						});
 					}
 				},

src/client/app/mobile/script.ts

@@ -95,15 +95,6 @@ init((launch) => {
 				});
 			},
 
-			$input(opts) {
-				return new Promise<string>((res, rej) => {
-					const x = window.prompt(opts.title);
-					if (x) {
-						res(x);
-					}
-				});
-			},
-
 			$notify(message) {
 				alert(message);
 			}

src/client/app/mobile/views/pages/notifications.vue

@@ -27,8 +27,8 @@ export default Vue.extend({
 				type: 'warning',
 				text: this.$t('read-all'),
 				showCancelButton: true
-			}).then(res => {
+			}).then(({ canceled }) => {
-				if (!res) return;
+				if (canceled) return;
 
 				this.$root.api('notifications/mark_all_as_read');
 			});

src/client/app/mobile/views/pages/user-lists.vue

@@ -38,9 +38,11 @@ export default Vue.extend({
 	},
 	methods: {
 		fn() {
-			this.$input({
+			this.$root.dialog({
 				title: this.$t('enter-list-name'),
-			}).then(async title => {
+				input: true
+			}).then(async ({ canceled, result: title }) => {
+				if (canceled) return;
 				const list = await this.$root.api('users/lists/create', {
 					title
 				});

src/client/app/mobile/views/pages/user.vue

@@ -120,7 +120,7 @@ export default Vue.extend({
 				text: this.$t('push-to-list'),
 				action: async () => {
 					const lists = await this.$root.api('users/lists/list');
-					const listId = await this.$root.dialog({
+					const { canceled, result: listId } = await this.$root.dialog({
 						type: null,
 						title: this.$t('select-list'),
 						select: {
@@ -130,7 +130,7 @@ export default Vue.extend({
 						},
 						showCancelButton: true
 					});
-					if (!listId) return;
+					if (canceled) return;
 					await this.$root.api('users/lists/push', {
 						listId: listId,
 						userId: this.user.id