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

* Use menu instead prompt

* fix

* https://bit.ly/2U0JuVt

* fix
This commit is contained in:
tamaina 2019-04-18 03:32:45 +09:00 committed by syuilo
parent f7b1ef0690
commit 704aabd703
3 changed files with 89 additions and 46 deletions

View file

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

View file

@ -379,44 +379,31 @@ 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() { selectLocalFile() {
(this.$refs.file as any).click(); (this.$refs.file as any).click();
}, },
createFolder() { createFolder() {
const name = window.prompt(this.$t('folder-name')); this.$root.dialog({
if (name == null || name == '') return; title: this.$t('folder-name')
input: {
default: this.folder.name
}
}).then(({ result: name }) => {
if (!name) {
this.$root.dialog({
type: 'error',
text: this.$t('folder-name-cannot-empty')
});
return;
}
this.$root.api('drive/folders/create', { this.$root.api('drive/folders/create', {
name: name, name: name,
parentId: this.folder ? this.folder.id : undefined parentId: this.folder ? this.folder.id : undefined
}).then(folder => { }).then(folder => {
this.addFolder(folder, true); this.addFolder(folder, true);
}); });
});
}, },
renameFolder() { renameFolder() {
@ -427,14 +414,26 @@ export default Vue.extend({
}); });
return; 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')
input: {
default: this.folder.name
}
}).then(({ result: name }) => {
if (!name) {
this.$root.dialog({
type: 'error',
text: this.$t('cannot-empty')
});
return;
}
this.$root.api('drive/folders/update', { this.$root.api('drive/folders/update', {
name: name, name: name,
folderId: this.folder.id folderId: this.folder.id
}).then(folder => { }).then(folder => {
this.cd(folder); this.cd(folder);
}); });
});
}, },
moveFolder() { moveFolder() {

View file

@ -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="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 v-if="!folder && !file"><span style="margin-right:4px;"><fa icon="cloud"/></span>{{ $t('@.drive') }}</template>
</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 <x-drive
ref="browser" ref="browser"
:init-folder="initFolder" :init-folder="initFolder"
@ -26,9 +26,12 @@
import Vue from 'vue'; import Vue from 'vue';
import i18n from '../../../i18n'; import i18n from '../../../i18n';
import Progress from '../../../common/scripts/loading'; 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({ export default Vue.extend({
i18n: i18n(), i18n: i18n('mobile/views/pages/drive.vue'),
components: { components: {
XDrive: () => import('../components/drive.vue').then(m => m.default), XDrive: () => import('../components/drive.vue').then(m => m.default),
}, },
@ -63,9 +66,6 @@ export default Vue.extend({
(this.$refs as any).browser.goRoot(true); (this.$refs as any).browser.goRoot(true);
} }
}, },
fn() {
(this.$refs as any).browser.openContextMenu();
},
onMoveRoot(silent) { onMoveRoot(silent) {
const title = `${this.$root.instanceName} Drive`; const title = `${this.$root.instanceName} Drive`;
@ -104,6 +104,42 @@ export default Vue.extend({
this.file = file; this.file = file;
this.folder = null; 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,
});
} }
} }
}); });