Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

ドライブで複数選択できるようにした

Browse source
This commit is contained in:
mattyatea 2023-10-06 08:01:42 +09:00
parent a328a03c51
commit c345383374
6 changed files with 370 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
locales/index.d.ts vendored
View file

@ -79,6 +79,10 @@ export interface Locale {
"files": string;
"download": string;
"driveFileDeleteConfirm": string;
"driveFilesDeleteConfirm": string;
"driveFilesSensitiveonConfirm": string;
"driveFilesSensitiveoffConfirm": string;
"driveFolderDeleteConfirm": string;
"unfollowConfirm": string;
"exportRequested": string;
"importRequested": string;

4
locales/ja-JP.yml
View file

@ -76,6 +76,10 @@ export: "エクスポート"
files: "ファイル"
download: "ダウンロード"
driveFileDeleteConfirm: "ファイル「{name}」を削除しますか？このファイルを使用した一部のコンテンツも削除されます。"
driveFilesDeleteConfirm: "{name}つのファイルを削除しますか？このファイルを使用した一部のコンテンツも削除されます。"
driveFilesSensitiveonConfirm: "{name}つのファイルをセンシティブにしますか？"
driveFilesSensitiveoffConfirm: "{name}つのファイルのセンシティブを解除しますか？"
driveFolderDeleteConfirm: "フォルダ「{name}」を削除しますか？このフォルダの中に存在するファイルを使用した一部のコンテンツも削除されます。"
unfollowConfirm: "{name}のフォローを解除しますか？"
exportRequested: "エクスポートをリクエストしました。これには時間がかかる場合があります。エクスポートが終わると、「ドライブ」に追加されます。"
importRequested: "インポートをリクエストしました。これには時間がかかる場合があります。"

3
package.json
View file

@ -1,6 +1,6 @@
{
"name": "misskey",
"version": "2023.9.3-prismisskey.2",
"version": "2023.9.3-prismisskey.3",
"codename": "nasubi",
"repository": {
"type": "git",
@ -18,6 +18,7 @@
"build-assets": "node ./scripts/build-assets.mjs",
"build": "pnpm build-pre && pnpm -r build && pnpm build-assets",
"build-storybook": "pnpm --filter frontend build-storybook",
"build-and-start": "pnpm build && pnpm start",
"start": "pnpm check:connect && cd packages/backend && node ./built/boot/entry.js",
"start:test": "cd packages/backend && cross-env NODE_ENV=test node ./built/boot/entry.js",
"init": "pnpm migrate",

152
packages/frontend/src/components/MkDrive.folder.vue
View file

@ -44,6 +44,7 @@ const props = withDefaults(defineProps<{
folder: Misskey.entities.DriveFolder;
isSelected?: boolean;
selectMode?: boolean;
selectedFiles?: string[];
}>(), {
isSelected: false,
selectMode: false,
@ -143,10 +144,19 @@ function onDrop(ev: DragEvent) {
if (driveFile != null && driveFile !== '') {
const file = JSON.parse(driveFile);
emit('removeFile', file.id);
os.api('drive/files/update', {
fileId: file.id,
folderId: props.folder.id,
});
if (props.selectedFiles.length > 0) {
props.selectedFiles.forEach((e)=>{
os.api('drive/files/update', {
fileId: e.id,
folderId: props.folder.id,
});
})
}else{
os.api('drive/files/update', {
fileId: file.id,
folderId: props.folder.id,
});
}
}
//#endregion
@ -221,30 +231,120 @@ function rename() {
}
function deleteFolder() {
os.api('drive/folders/delete', {
folderId: props.folder.id,
}).then(() => {
if (defaultStore.state.uploadFolder === props.folder.id) {
defaultStore.set('uploadFolder', null);
}
}).catch(err => {
switch (err.id) {
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
os.alert({
type: 'error',
title: i18n.ts.unableToDelete,
text: i18n.ts.hasChildFilesOrFolders,
});
break;
default:
os.alert({
type: 'error',
text: i18n.ts.unableToDelete,
});
}
});
os.api('drive/folders/show', {
folderId: props.folder.id,
}).then(async (r) => {
if (r.foldersCount > 0) {
await os.alert({
type: 'error',
title: i18n.ts.unableToDelete,
text: 'フォルダ内にフォルダが存在するため、削除できません。 \n フォルダ内のフォルダを削除してから試してみてください。',
});
}
if (r.filesCount > 0) {
const {canceled} = await os.confirm({
type: 'warning',
text: i18n.t('driveFolderDeleteConfirm', {name: props.folder.name}),
});
if (canceled) return;
let allResults = [];
let Result = await os.api('drive/files', {folderId: props.folder.id, limit: 31});
allResults = allResults.concat(Result)
while (Result.length >= 31) {
const untilId = Result[Result.length - 1].id;
Result = await os.api('drive/files', { folderId: props.folder.id, limit: 31, untilId });
allResults = allResults.concat(Result); // pushをconcatに変更
}
allResults.forEach((r,i)=>{
os.api('drive/files/delete',{fileId: r.id})
})
os.api('drive/folders/show', {
folderId: props.folder.id,
}).then(async (r) =>{
if (r.filesCount > 0) {
let allResults = [];
let Result = await os.api('drive/files', {folderId: props.folder.id, limit: 31});
allResults = allResults.concat(Result)
while (Result.length >= 31) {
const untilId = Result[Result.length - 1].id;
Result = await os.api('drive/files', { folderId: props.folder.id, limit: 31, untilId });
allResults = allResults.concat(Result);
}
allResults.forEach((r,i)=>{
os.api('drive/files/delete',{fileId: r.id})
})
os.api('drive/folders/delete', {
folderId: props.folder.id,
}).then(() => {
if (defaultStore.state.uploadFolder === props.folder.id) {
defaultStore.set('uploadFolder', null);
}
}).catch(err => {
switch (err.id) {
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
os.alert({
type: 'error',
title: i18n.ts.unableToDelete,
text: i18n.ts.hasChildFilesOrFolders,
});
break;
default:
os.alert({
type: 'error',
text: i18n.ts.unableToDelete,
});
}
});
os.api('drive/folders/delete', {
folderId: props.folder.id,
})
}else{
os.api('drive/folders/delete', {
folderId: props.folder.id,
})
}
})
} else {
await os.api('drive/folders/delete', {
folderId: props.folder.id,
}).then(() => {
if (defaultStore.state.uploadFolder === props.folder.id) {
defaultStore.set('uploadFolder', null);
}
}).catch(err => {
switch (err.id) {
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
os.alert({
type: 'error',
title: i18n.ts.unableToDelete,
text: i18n.ts.hasChildFilesOrFolders,
});
break;
default:
os.alert({
type: 'error',
text: i18n.ts.unableToDelete,
});
}
});
}
})
}
function setAsUploadFolder() {
defaultStore.set('uploadFolder', props.folder.id);
}

18
packages/frontend/src/components/MkDrive.navFolder.vue
View file

@ -26,6 +26,7 @@ import { i18n } from '@/i18n.js';
const props = defineProps<{
folder?: Misskey.entities.DriveFolder;
parentFolder: Misskey.entities.DriveFolder | null;
selectedFiles: string[];
}>();
const emit = defineEmits<{
@ -112,10 +113,19 @@ function onDrop(ev: DragEvent) {
if (driveFile != null && driveFile !== '') {
const file = JSON.parse(driveFile);
emit('removeFile', file.id);
os.api('drive/files/update', {
fileId: file.id,
folderId: props.folder ? props.folder.id : null,
});
if (props.selectedFiles.length > 0) {
props.selectedFiles.forEach((e) => {
os.api('drive/files/update', {
fileId: e.id,
folderId: props.folder ? props.folder.id : null,
});
});
} else {
os.api('drive/files/update', {
fileId: file.id,
folderId: props.folder ? props.folder.id : null,
});
}
}
//#endregion

312
packages/frontend/src/components/MkDrive.vue
View file

@ -10,6 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<XNavFolder
:class="[$style.navPathItem, { [$style.navCurrent]: folder == null }]"
:parentFolder="folder"
:selectedFiles="selectedFiles"
@move="move"
@upload="upload"
@removeFile="removeFile"
@ -27,10 +28,23 @@ SPDX-License-Identifier: AGPL-3.0-only
@removeFolder="removeFolder"
/>
</template>
<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i class="ti ti-chevron-right"></i></span>
<span v-if="folder != null" :class="[$style.navPathItem, $style.navSeparator]"><i
class="ti ti-chevron-right"
></i></span>
<span v-if="folder != null" :class="[$style.navPathItem, $style.navCurrent]">{{ folder.name }}</span>
</div>
<button class="_button" :class="$style.navMenu" @click="showMenu"><i class="ti ti-dots"></i></button>
<button v-if="!multiple" class="_button" :class="$style.navMenu" @click="filesSelect">複数選択モード</button>
<span v-if="multiple && selectedFiles.length > 0" style="padding-right: 12px; margin-top: auto; margin-bottom: auto;opacity: 0.5;">
({{ number(selectedFiles.length) }})
</span>
<button v-if="multiple" class="_button" :class="$style.navMenu" @click="filesSelect">複数選択モード解除</button>
<button v-if="multiple && selectedFiles.length === 0" style="padding-right: 12px;" class="_button" @click="filesAllSelect">
全選択
</button>
<button v-if="multiple && selectedFiles.length !== 0" style="padding-right: 12px;" class="_button" @click="filesAllSelect">
全選択解除
</button>
<button class="_button" @click="showMenu"><i class="ti ti-dots"></i></button>
</nav>
<div
ref="main"
@ -51,6 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:folder="f"
:selectMode="select === 'folder'"
:isSelected="selectedFolders.some(x => x.id === f.id)"
:selectedFiles="selectedFiles"
@chosen="chooseFolder"
@move="move"
@upload="upload"
@ -73,6 +88,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:folder="folder"
:selectMode="select === 'file'"
:isSelected="selectedFiles.some(x => x.id === file.id)"
@click.shift.left.exact="filesSelect"
@chosen="chooseFile"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
@ -83,14 +99,21 @@ SPDX-License-Identifier: AGPL-3.0-only
</div>
<div v-if="files.length == 0 && folders.length == 0 && !fetching" :class="$style.empty">
<div v-if="draghover">{{ i18n.t('empty-draghover') }}</div>
<div v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.t('empty-drive-description') }}</div>
<div v-if="!draghover && folder == null">
<strong>{{
i18n.ts.emptyDrive
}}</strong><br/>{{ i18n.t('empty-drive-description') }}
</div>
<div v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</div>
</div>
</div>
<MkLoading v-if="fetching"/>
</div>
<div v-if="draghover" :class="$style.dropzone"></div>
<input ref="fileInput" style="display: none;" type="file" accept="*/*" multiple tabindex="-1" @change="onChangeFileInput"/>
<input
ref="fileInput" style="display: none;" type="file" accept="*/*" multiple tabindex="-1"
@change="onChangeFileInput"
/>
</div>
</template>
@ -107,23 +130,24 @@ import { defaultStore } from '@/store.js';
import { i18n } from '@/i18n.js';
import { uploadFile, uploads } from '@/scripts/upload.js';
import { claimAchievement } from '@/scripts/achievements.js';
import number from "@/filters/number.js";
const props = withDefaults(defineProps<{
initialFolder?: Misskey.entities.DriveFolder;
type?: string;
multiple?: boolean;
select?: 'file' | 'folder' | null;
initialFolder?: Misskey.entities.DriveFolder;
type?: string;
multiple?: boolean;
select?: 'file' | 'folder' | null;
}>(), {
multiple: false,
select: null,
});
const emit = defineEmits<{
(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
(ev: 'move-root'): void;
(ev: 'cd', v: Misskey.entities.DriveFolder | null): void;
(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
(ev: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
(ev: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
(ev: 'move-root'): void;
(ev: 'cd', v: Misskey.entities.DriveFolder | null): void;
(ev: 'open-folder', v: Misskey.entities.DriveFolder): void;
}>();
const loadMoreFiles = shallowRef<InstanceType<typeof MkButton>>();
@ -140,6 +164,8 @@ const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
const uploadings = uploads;
const connection = useStream().useChannel('drive');
const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい
const multiple = ref(props.multiple || false);
const select = ref(props.select || null);
// ドロップされようとしているか
const draghover = ref(false);
@ -390,7 +416,7 @@ function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null
function chooseFile(file: Misskey.entities.DriveFile) {
const isAlreadySelected = selectedFiles.value.some(f => f.id === file.id);
if (props.multiple) {
if (multiple.value) {
if (isAlreadySelected) {
selectedFiles.value = selectedFiles.value.filter(f => f.id !== file.id);
} else {
@ -409,7 +435,7 @@ function chooseFile(file: Misskey.entities.DriveFile) {
function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
const isAlreadySelected = selectedFolders.value.some(f => f.id === folderToChoose.id);
if (props.multiple) {
if (multiple.value) {
if (isAlreadySelected) {
selectedFolders.value = selectedFolders.value.filter(f => f.id !== folderToChoose.id);
} else {
@ -496,6 +522,7 @@ function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
function removeFile(file: Misskey.entities.DriveFile | string) {
const fileId = typeof file === 'object' ? file.id : file;
files.value = files.value.filter(f => f.id !== fileId);
selectedFiles.value = selectedFiles.value.filter(f => f.id !== fileId);
}
function appendFile(file: Misskey.entities.DriveFile) {
@ -505,6 +532,7 @@ function appendFile(file: Misskey.entities.DriveFile) {
function appendFolder(folderToAppend: Misskey.entities.DriveFolder) {
addFolder(folderToAppend);
}
/*
function prependFile(file: Misskey.entities.DriveFile) {
addFile(file, true);
@ -621,31 +649,128 @@ function getMenu() {
}, {
text: i18n.ts.upload,
icon: 'ti ti-upload',
action: () => { selectLocalFile(); },
action: () => {
selectLocalFile();
},
}, {
text: i18n.ts.fromUrl,
icon: 'ti ti-link',
action: () => { urlUpload(); },
action: () => {
urlUpload();
},
}, null, {
text: folder.value ? folder.value.name : i18n.ts.drive,
type: 'label',
}, folder.value ? {
text: i18n.ts.renameFolder,
icon: 'ti ti-forms',
action: () => { renameFolder(folder.value); },
action: () => {
renameFolder(folder.value);
},
} : undefined, folder.value ? {
text: i18n.ts.deleteFolder,
icon: 'ti ti-trash',
action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); },
action: () => {
deleteFolder(folder.value as Misskey.entities.DriveFolder);
},
} : undefined, {
text: i18n.ts.createFolder,
icon: 'ti ti-folder-plus',
action: () => { createFolder(); },
action: () => {
createFolder();
},
}];
}
async function isSensitive(Files, isSensitive: boolean) {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t(isSensitive ? 'driveFilesSensitiveonConfirm' : 'driveFilesSensitiveoffConfirm', { name: Files.length }),
});
if (canceled) return;
Files.forEach((file) => {
os.api('drive/files/update', {
fileId: file.id,
isSensitive,
});
});
}
async function fileDelete(Files) {
const { canceled } = await os.confirm({
type: 'warning',
text: i18n.t('driveFilesDeleteConfirm', { name: Files.length }),
});
if (canceled) return;
Files.forEach((file) => {
os.api('drive/files/delete', {
fileId: file.id,
});
});
}
function getFilesMenu(Files) {
return [{
text: i18n.ts.createNoteFromTheFile,
icon: 'ti ti-pencil',
action: () => {
if (Files.length >= 16) {
os.confirm({
type: 'warning',
text: '16ファイル以上添付しようとしています',
});
return;
} else {
os.post({
initialFiles: [...Files],
});
}
},
}, {
text: i18n.ts.unmarkAsSensitive,
icon: 'ti ti-eye',
action: () => {
isSensitive(Files, false);
},
}, {
text: i18n.ts.markAsSensitive,
icon: 'ti ti-eye-exclamation',
action: () => {
isSensitive(Files, true);
},
}, {
text: i18n.ts.delete,
icon: 'ti ti-trash',
danger: true,
action: () => {
fileDelete(Files);
},
}];
}
function filesSelect() {
multiple.value = !multiple.value;
select.value = (select.value === null) ? 'file' : null;
selectedFiles.value = [];
}
function filesAllSelect() {
if (selectedFiles.value.length === 0) {
selectedFiles.value = files.value;
} else {
selectedFiles.value = [];
}
}
function showMenu(ev: MouseEvent) {
os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
console.log(selectedFiles.value.length);
if (selectedFiles.value.length === 0) {
os.popupMenu(getMenu(), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
} else {
os.popupMenu(getFilesMenu(selectedFiles.value), (ev.currentTarget ?? ev.target ?? undefined) as HTMLElement | undefined);
}
}
function onContextmenu(ev: MouseEvent) {
@ -689,114 +814,117 @@ onBeforeUnmount(() => {
<style lang="scss" module>
.root {
display: flex;
flex-direction: column;
height: 100%;
display: flex;
flex-direction: column;
height: 100%;
}
.nav {
display: flex;
z-index: 2;
width: 100%;
padding: 0 8px;
box-sizing: border-box;
overflow: auto;
font-size: 0.9em;
box-shadow: 0 1px 0 var(--divider);
user-select: none;
display: flex;
top: 0;
position: sticky;
z-index: 1000;
background-color: var(--bg);
width: 100%;
padding: 0 8px;
box-sizing: border-box;
overflow: auto;
font-size: 0.9em;
box-shadow: 0 1px 0 var(--divider);
user-select: none;
}
.navPath {
display: inline-block;
vertical-align: bottom;
line-height: 42px;
white-space: nowrap;
display: inline-block;
vertical-align: bottom;
line-height: 42px;
white-space: nowrap;
}
.navPathItem {
display: inline-block;
margin: 0;
padding: 0 8px;
line-height: 42px;
cursor: pointer;
display: inline-block;
margin: 0;
padding: 0 8px;
line-height: 42px;
cursor: pointer;
&:hover {
text-decoration: underline;
}
&:hover {
text-decoration: underline;
}
&.navCurrent {
font-weight: bold;
cursor: default;
&.navCurrent {
font-weight: bold;
cursor: default;
&:hover {
text-decoration: none;
}
}
&:hover {
text-decoration: none;
}
}
&.navSeparator {
margin: 0;
padding: 0;
opacity: 0.5;
cursor: default;
}
&.navSeparator {
margin: 0;
padding: 0;
opacity: 0.5;
cursor: default;
}
}
.navMenu {
margin-left: auto;
padding: 0 12px;
margin-left: auto;
padding: 0 12px;
}
.main {
flex: 1;
overflow: auto;
padding: var(--margin);
user-select: none;
flex: 1;
overflow: auto;
padding: var(--margin);
user-select: none;
&.fetching {
cursor: wait !important;
opacity: 0.5;
pointer-events: none;
}
&.fetching {
cursor: wait !important;
opacity: 0.5;
pointer-events: none;
}
&.uploading {
height: calc(100% - 38px - 100px);
}
&.uploading {
height: calc(100% - 38px - 100px);
}
}
.folders,
.files {
display: flex;
flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
.folder,
.file {
flex-grow: 1;
width: 128px;
margin: 4px;
box-sizing: border-box;
flex-grow: 1;
width: 128px;
margin: 4px;
box-sizing: border-box;
}
.padding {
flex-grow: 1;
pointer-events: none;
width: 128px + 8px;
flex-grow: 1;
pointer-events: none;
width: 128px + 8px;
}
.empty {
padding: 16px;
text-align: center;
pointer-events: none;
opacity: 0.5;
padding: 16px;
text-align: center;
pointer-events: none;
opacity: 0.5;
}
.dropzone {
position: absolute;
left: 0;
top: 38px;
width: 100%;
height: calc(100% - 38px);
border: dashed 2px var(--focus);
pointer-events: none;
position: absolute;
left: 0;
top: 38px;
width: 100%;
height: calc(100% - 38px);
border: dashed 2px var(--focus);
pointer-events: none;
}
</style>