Use menu instead of prompt Fix #4540, Fix #342 (#4575)

* Use menu instead prompt

* fix

* https://bit.ly/2U0JuVt

* fix

locales/ja-JP.yml

@@ -1573,12 +1573,11 @@ mobile/views/components/drive.vue:
   file-count: "ファイル"
   nothing-in-drive: "ドライブには何もありません"
   folder-is-empty: "このフォルダは空です"
-  prompt: "何をしますか？(数字を入力してください): <1 → ファイルをアップロード | 2 → ファイルをURLでアップロード | 3 → フォルダ作成 | 4 → このフォルダ名を変更 | 5 → このフォルダを移動 | 6 → このフォルダを削除>"
-  deletion-alert: "ごめんなさい！フォルダの削除は未実装です...。"
   folder-name: "フォルダー名"
   here-is-root: "現在いる場所はルートで、フォルダではありません。"
   url-prompt: "アップロードしたいファイルのURL"
   uploading: "アップロードをリクエストしました。アップロードが完了するまで時間がかかる場合があります。"
+  folder-name-cannot-empty: "フォルダ名を空白にすることはできません。"
 
 mobile/views/components/drive-file-chooser.vue:
   select-file: "ファイルを選択"
@@ -1668,6 +1667,15 @@ mobile/views/components/ui.nav.vue:
   admin: "管理"
   about: "Misskeyについて"
 
+mobile/views/pages/drive.vue:
+  contextmenu:
+    upload: "ファイルをアップロード"
+    url-upload: "ファイルをURLでアップロード"
+    create-folder: "フォルダーを作成"
+    rename-folder: "フォルダー名を変更"
+    move-folder: "このフォルダを移動"
+    delete-folder: "このフォルダを削除"
+
 mobile/views/pages/user-lists.vue:
   title: "リスト"
   enter-list-name: "リスト名を入力してください"

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

@@ -379,43 +379,30 @@ export default Vue.extend({
 			});
 		},
 
-		openContextMenu() {
-			const fn = window.prompt(this.$t('prompt'));
-			if (fn == null || fn == '') return;
-			switch (fn) {
-				case '1':
-					this.selectLocalFile();
-					break;
-				case '2':
-					this.urlUpload();
-					break;
-				case '3':
-					this.createFolder();
-					break;
-				case '4':
-					this.renameFolder();
-					break;
-				case '5':
-					this.moveFolder();
-					break;
-				case '6':
-					this.deleteFolder();
-					break;
-			}
-		},
-
 		selectLocalFile() {
 			(this.$refs.file as any).click();
 		},
 
 		createFolder() {
-			const name = window.prompt(this.$t('folder-name'));
+			this.$root.dialog({
-			if (name == null || name == '') return;
+				title: this.$t('folder-name')
-			this.$root.api('drive/folders/create', {
+				input: {
-				name: name,
+					default: this.folder.name
-				parentId: this.folder ? this.folder.id : undefined
+				}
-			}).then(folder => {
+			}).then(({ result: name }) => {
-				this.addFolder(folder, true);
+				if (!name) {
+					this.$root.dialog({
+						type: 'error',
+						text: this.$t('folder-name-cannot-empty')
+					});
+					return;
+				}
+				this.$root.api('drive/folders/create', {
+					name: name,
+					parentId: this.folder ? this.folder.id : undefined
+				}).then(folder => {
+					this.addFolder(folder, true);
+				});
 			});
 		},
 
@@ -427,13 +414,25 @@ export default Vue.extend({
 				});
 				return;
 			}
-			const name = window.prompt(this.$t('folder-name'), this.folder.name);
+			this.$root.dialog({
-			if (name == null || name == '') return;
+				title: this.$t('folder-name')
-			this.$root.api('drive/folders/update', {
+				input: {
-				name: name,
+					default: this.folder.name
-				folderId: this.folder.id
+				}
-			}).then(folder => {
+			}).then(({ result: name }) => {
-				this.cd(folder);
+				if (!name) {
+					this.$root.dialog({
+						type: 'error',
+						text: this.$t('cannot-empty')
+					});
+					return;
+				}
+				this.$root.api('drive/folders/update', {
+					name: name,
+					folderId: this.folder.id
+				}).then(folder => {
+					this.cd(folder);
+				});
 			});
 		},
 

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

@@ -5,7 +5,7 @@
 		<template v-if="file"><mk-file-type-icon data-icon :type="file.type" style="margin-right:4px;"/>{{ file.name }}</template>
 		<template v-if="!folder && !file"><span style="margin-right:4px;"><fa icon="cloud"/></span>{{ $t('@.drive') }}</template>
 	</template>
-	<template #func><button @click="fn"><fa icon="ellipsis-h"/></button></template>
+	<template #func v-if="folder || (!folder && !file)"><button @click="openContextMenu" ref="contextSource"><fa icon="ellipsis-h"/></button></template>
 	<x-drive
 		ref="browser"
 		:init-folder="initFolder"
@@ -26,9 +26,12 @@
 import Vue from 'vue';
 import i18n from '../../../i18n';
 import Progress from '../../../common/scripts/loading';
+import XMenu from '../../../common/views/components/menu.vue';
+import { faTrashAlt } from '@fortawesome/free-regular-svg-icons';
+import { faCloudUploadAlt } from '@fortawesome/free-solid-svg-icons';
 
 export default Vue.extend({
-	i18n: i18n(),
+	i18n: i18n('mobile/views/pages/drive.vue'),
 	components: {
 		XDrive: () => import('../components/drive.vue').then(m => m.default),
 	},
@@ -63,9 +66,6 @@ export default Vue.extend({
 				(this.$refs as any).browser.goRoot(true);
 			}
 		},
-		fn() {
-			(this.$refs as any).browser.openContextMenu();
-		},
 		onMoveRoot(silent) {
 			const title = `${this.$root.instanceName} Drive`;
 
@@ -104,6 +104,42 @@ export default Vue.extend({
 
 			this.file = file;
 			this.folder = null;
+		},
+		openContextMenu() {
+			this.$root.new(XMenu, {
+				items: [{
+					type: 'item',
+					text: this.$t('contextmenu.upload'),
+					icon: 'upload',
+					action: this.$refs.browser.selectLocalFile
+				}, {
+					type: 'item',
+					text: this.$t('contextmenu.url-upload'),
+					icon: faCloudUploadAlt,
+					action: this.$refs.browser.urlUpload
+				}, {
+					type: 'item',
+					text: this.$t('contextmenu.create-folder'),
+					icon: ['far', 'folder'],
+					action: this.$refs.browser.createFolder
+				}, ...(this.folder ? [{
+					type: 'item',
+					text: this.$t('contextmenu.rename-folder'),
+					icon: 'i-cursor',
+					action: this.$refs.browser.renameFolder
+				}, {
+					type: 'item',
+					text: this.$t('contextmenu.move-folder'),
+					icon: ['far', 'folder-open'],
+					action: this.$refs.browser.moveFolder
+				}, {
+					type: 'item',
+					text: this.$t('contextmenu.delete-folder'),
+					icon: faTrashAlt,
+					action: this.$refs.browser.deleteFolder
+				}] : [])],
+				source: this.$refs.contextSource,
+			});
 		}
 	}
 });