Sharkey/packages/client/src/components/drive.vue

780 lines
19 KiB
Vue
Raw Normal View History

2018-02-14 06:54:18 +00:00
<template>
<div class="yfudmmck">
2017-01-11 20:55:38 +00:00
<nav>
2018-02-14 06:54:18 +00:00
<div class="path" @contextmenu.prevent.stop="() => {}">
<XNavFolder
:class="{ current: folder == null }"
:parent-folder="folder"
@move="move"
@upload="upload"
@removeFile="removeFile"
@removeFolder="removeFolder"
/>
<template v-for="f in hierarchyFolders">
<span class="separator"><i class="fas fa-angle-right"></i></span>
<XNavFolder
:folder="f"
:parent-folder="folder"
@move="move"
@upload="upload"
@removeFile="removeFile"
@removeFolder="removeFolder"
/>
2018-02-08 05:50:18 +00:00
</template>
2021-11-19 10:36:12 +00:00
<span v-if="folder != null" class="separator"><i class="fas fa-angle-right"></i></span>
<span v-if="folder != null" class="folder current">{{ folder.name }}</span>
2017-01-11 20:55:38 +00:00
</div>
2021-11-19 10:36:12 +00:00
<button class="menu _button" @click="showMenu"><i class="fas fa-ellipsis-h"></i></button>
2017-01-11 20:55:38 +00:00
</nav>
2021-11-19 10:36:12 +00:00
<div ref="main" class="main"
:class="{ uploading: uploadings.length > 0, fetching }"
2018-02-14 06:54:18 +00:00
@dragover.prevent.stop="onDragover"
2018-02-26 21:35:16 +00:00
@dragenter="onDragenter"
2018-02-14 06:54:18 +00:00
@dragleave="onDragleave"
@drop.prevent.stop="onDrop"
2021-01-11 09:49:39 +00:00
@contextmenu.stop="onContextmenu"
2018-02-14 06:54:18 +00:00
>
2021-11-19 10:36:12 +00:00
<div ref="contents" class="contents">
<div v-show="folders.length > 0" ref="foldersContainer" class="folders">
<XFolder
v-for="(f, i) in folders"
:key="f.id"
v-anim="i"
class="folder"
:folder="f"
:select-mode="select === 'folder'"
:is-selected="selectedFolders.some(x => x.id === f.id)"
@chosen="chooseFolder"
@move="move"
@upload="upload"
@removeFile="removeFile"
@removeFolder="removeFolder"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
/>
2017-12-19 04:18:17 +00:00
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
2021-11-19 10:36:12 +00:00
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
<MkButton v-if="moreFolders" ref="moreFolders">{{ i18n.locale.loadMore }}</MkButton>
2017-01-11 20:55:38 +00:00
</div>
2021-11-19 10:36:12 +00:00
<div v-show="files.length > 0" ref="filesContainer" class="files">
<XFile
v-for="(file, i) in files"
:key="file.id"
v-anim="i"
class="file"
:file="file"
:select-mode="select === 'file'"
:is-selected="selectedFiles.some(x => x.id === file.id)"
@chosen="chooseFile"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
/>
2017-12-19 04:18:17 +00:00
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
2021-11-19 10:36:12 +00:00
<div v-for="(n, i) in 16" :key="i" class="padding"></div>
<MkButton v-show="moreFiles" ref="loadMoreFiles" @click="fetchMoreFiles">{{ i18n.locale.loadMore }}</MkButton>
2017-01-11 20:55:38 +00:00
</div>
2021-11-19 10:36:12 +00:00
<div v-if="files.length == 0 && folders.length == 0 && !fetching" class="empty">
<p v-if="draghover">{{ i18n.t('empty-draghover') }}</p>
<p v-if="!draghover && folder == null"><strong>{{ i18n.locale.emptyDrive }}</strong><br/>{{ i18n.t('empty-drive-description') }}</p>
<p v-if="!draghover && folder != null">{{ i18n.locale.emptyFolder }}</p>
2016-12-28 22:49:51 +00:00
</div>
2017-01-11 20:55:38 +00:00
</div>
Migrate to Vue3 (#6587) * Update reaction.vue * fix bug * wip * wip * wjio * wip * Revert "wip" This reverts commit e427f2160adf4e8a4147006e25a89854edab0033. * wip * wip * wip * Update init.ts * Update drive-window.vue * wip * wip * Use PascalCase for components * Use PascalCase for components * update dep * wip * wip * wip * Update init.ts * wip * Update paging.ts * Update test.vue * watch deep * wip * lint * wip * wip * wip * wip * wiop * wip * Update webpack.config.ts * alllow null poll * wip * wip * wip * wiop * UI redesign & refactor (#6714) * wip * wip * wip * wip * wip * Update drive.vue * Update word-mute.vue * wip * wip * wip * clean up * wip * Update default.vue * wip * Update notes.vue * Update mfm.ts * Update index.home.vue * Update post-form.vue * Update post-form-attaches.vue * wip * Update post-form.vue * Update sidebar.vue * wip * wip * Update index.vue * wip * Update default.vue * Update index.vue * Update index.vue * wip * Update post-form-attaches.vue * Update note.vue * wip * clean up * Update notes.vue * wip * wip * Update ja-JP.yml * wip * wip * Update index.vue * wip * wip * wip * wip * wip * wip * wip * wip * Update default.vue * wip * Update _dark.json5 * wip * wip * wip * clean up * wip * wip * Update index.vue * Update test.vue * wip * wip * fix * wip * wip * wip * wip * clena yop * wip * wip * Update store.ts * Update messaging-room.vue * Update default.widgets.vue * fix * wip * wip * Update modal.vue * wip * Update os.ts * Update os.ts * Update deck.vue * Update init.ts * wip * Update ja-JP.yml * v-sizeは単にwindowのresizeを監視するだけで良いかもしれない * Update modal.vue * wip * Update tooltip.ts * wip * wip * wip * wip * wip * Update image-viewer.vue * wip * wip * Update style.scss * Update style.scss * Update visitor.vue * wip * Update init.ts * Update init.ts * wip * wip * Update visitor.vue * Update visitor.vue * Update visitor.vue * Update visitor.vue * wip * wip * Update modal.vue * Update header.vue * Update menu.vue * Update about.vue * Update about-misskey.vue * wip * wip * Update visitor.vue * Update tooltip.ts * wip * Update drive.vue * wip * Update style.scss * Update header.vue * wip * wip * Update users.user.vue * Update announcements.vue * wip * wip * wip * Update emojis.vue * wip * Update emojis.vue * Update style.scss * Update users.vue * wip * Update style.scss * wip * Update welcome.entrance.vue * Update radio.vue * Update size.ts * Update emoji-edit-dialog.vue * wip * Update emojis.vue * wip * Update emojis.vue * Update emojis.vue * Update emojis.vue * wip * wip * wip * wip * Update file-dialog.vue * wip * wip * Update token-generate-window.vue * Update notification-setting-window.vue * wip * wip * Update _error_.vue * Update ja-JP.yml * wip * wip * Update store.ts * Update emojis.vue * Update emojis.vue * Update emojis.vue * Update announcements.vue * Update store.ts * wip * Update page-editor.vue * wip * wip * Update modal.vue * wip * Update select-file.ts * Update timeline.vue * Update emojis.vue * Update os.ts * wip * Update user-select.vue * Update mfm.ts * Update get-file-info.ts * Update drive.vue * Update init.ts * Update mfm.ts * wip * wip * Update window.vue * Update note.vue * wip * wip * Update user-info.vue * wip * wip * wip * wip * wip * Update header.vue * Update header.vue * wip * Update explore.vue * wip * wip * wip * Update webpack.config.ts * wip * wip * wip * wip * wip * wip * Update autocomplete.ts * wip * wip * wip * Update toast.vue * wip * Update post-form-dialog.vue * wip * wip * wip * wip * wip * Update users.vue * wip * Update explore.vue * wip * wip * wip * Update package.json * wip * Update icon-dialog.vue * wip * wip * Update user-preview.ts * wip * wip * wip * wip * wip * Update instance.vue * Update user-name.vue * Update federation.vue * Update instance.vue * wip * wip * Update tag.vue * wip * wip * wip * wip * wip * Update instance.vue * wip * Update os.ts * Update os.ts * wip * wip * wip * Update router.ts * wip * Update init.ts * Update note.vue * Update messages.vue * wip * wip * wip * wip * wip * google * wip * wip * wip * wip * Update theme-editor.vue * wip * wip * Update room.vue * Update channel-editor.vue * wip * Update window.vue * Update window.vue * wip * Update window.vue * Update window.vue * wip * Update menu.vue * wip * wip * wip * wip * Update messaging-room.vue * wip * Update post-form.vue * Update default.widgets.vue * Update window.vue * wip
2020-10-17 11:12:00 +00:00
<MkLoading v-if="fetching"/>
2017-01-11 20:55:38 +00:00
</div>
2021-11-19 10:36:12 +00:00
<div v-if="draghover" class="dropzone"></div>
<input ref="fileInput" type="file" accept="*/*" multiple tabindex="-1" @change="onChangeFileInput"/>
2018-02-14 06:54:18 +00:00
</div>
</template>
<script lang="ts" setup>
import { markRaw, nextTick, onActivated, onBeforeUnmount, onMounted, ref, watch } from 'vue';
import * as Misskey from 'misskey-js';
2018-02-22 22:56:35 +00:00
import XNavFolder from './drive.nav-folder.vue';
import XFolder from './drive.folder.vue';
import XFile from './drive.file.vue';
import MkButton from './ui/button.vue';
2021-11-11 17:02:25 +00:00
import * as os from '@/os';
import { stream } from '@/stream';
import { defaultStore } from '@/store';
import { i18n } from '@/i18n';
const props = withDefaults(defineProps<{
initialFolder?: Misskey.entities.DriveFolder;
type?: string;
multiple?: boolean;
select?: 'file' | 'folder' | null;
}>(), {
multiple: false,
select: null,
});
2018-02-14 06:54:18 +00:00
const emit = defineEmits<{
(e: 'selected', v: Misskey.entities.DriveFile | Misskey.entities.DriveFolder): void;
(e: 'change-selection', v: Misskey.entities.DriveFile[] | Misskey.entities.DriveFolder[]): void;
(e: 'move-root'): void;
(e: 'cd', v: Misskey.entities.DriveFolder | null): void;
(e: 'open-folder', v: Misskey.entities.DriveFolder): void;
}>();
const loadMoreFiles = ref<InstanceType<typeof MkButton>>();
const fileInput = ref<HTMLInputElement>();
const folder = ref<Misskey.entities.DriveFolder | null>(null);
const files = ref<Misskey.entities.DriveFile[]>([]);
const folders = ref<Misskey.entities.DriveFolder[]>([]);
const moreFiles = ref(false);
const moreFolders = ref(false);
const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
const uploadings = os.uploads;
const connection = stream.useChannel('drive');
// ドロップされようとしているか
const draghover = ref(false);
// 自身の所有するアイテムがドラッグをスタートさせたか
// (自分自身の階層にドロップできないようにするためのフラグ)
const isDragSource = ref(false);
const fetching = ref(true);
const ilFilesObserver = new IntersectionObserver(
(entries) => entries.some((entry) => entry.isIntersecting) && !fetching.value && moreFiles.value && fetchMoreFiles()
)
watch(folder, () => emit('cd', folder.value));
function onStreamDriveFileCreated(file: Misskey.entities.DriveFile) {
addFile(file, true);
}
function onStreamDriveFileUpdated(file: Misskey.entities.DriveFile) {
const current = folder.value ? folder.value.id : null;
if (current != file.folderId) {
removeFile(file);
} else {
addFile(file, true);
}
}
function onStreamDriveFileDeleted(fileId: string) {
removeFile(fileId);
}
function onStreamDriveFolderCreated(createdFolder: Misskey.entities.DriveFolder) {
addFolder(createdFolder, true);
}
function onStreamDriveFolderUpdated(updatedFolder: Misskey.entities.DriveFolder) {
const current = folder.value ? folder.value.id : null;
if (current != updatedFolder.parentId) {
removeFolder(updatedFolder);
} else {
addFolder(updatedFolder, true);
}
}
function onStreamDriveFolderDeleted(folderId: string) {
removeFolder(folderId);
}
function onDragover(e: DragEvent): any {
if (!e.dataTransfer) return;
// ドラッグ元が自分自身の所有するアイテムだったら
if (isDragSource.value) {
// 自分自身にはドロップさせない
e.dataTransfer.dropEffect = 'none';
return;
}
const isFile = e.dataTransfer.items[0].kind == 'file';
const isDriveFile = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FILE_;
const isDriveFolder = e.dataTransfer.types[0] == _DATA_TRANSFER_DRIVE_FOLDER_;
if (isFile || isDriveFile || isDriveFolder) {
e.dataTransfer.dropEffect = e.dataTransfer.effectAllowed == 'all' ? 'copy' : 'move';
} else {
e.dataTransfer.dropEffect = 'none';
}
2018-02-14 06:54:18 +00:00
return false;
}
2018-02-14 06:54:18 +00:00
function onDragenter() {
if (!isDragSource.value) draghover.value = true;
}
function onDragleave() {
draghover.value = false;
}
function onDrop(e: DragEvent): any {
draghover.value = false;
if (!e.dataTransfer) return;
// ドロップされてきたものがファイルだったら
if (e.dataTransfer.files.length > 0) {
for (const file of Array.from(e.dataTransfer.files)) {
upload(file, folder.value);
}
return;
}
//#region ドライブのファイル
const driveFile = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
if (driveFile != null && driveFile != '') {
const file = JSON.parse(driveFile);
if (files.value.some(f => f.id == file.id)) return;
removeFile(file.id);
os.api('drive/files/update', {
fileId: file.id,
folderId: folder.value ? folder.value.id : null
});
}
//#endregion
//#region ドライブのフォルダ
const driveFolder = e.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FOLDER_);
if (driveFolder != null && driveFolder != '') {
const droppedFolder = JSON.parse(driveFolder);
// 移動先が自分自身ならreject
if (folder.value && droppedFolder.id == folder.value.id) return false;
if (folders.value.some(f => f.id == droppedFolder.id)) return false;
removeFolder(droppedFolder.id);
os.api('drive/folders/update', {
folderId: droppedFolder.id,
parentId: folder.value ? folder.value.id : null
}).then(() => {
// noop
}).catch(err => {
switch (err) {
case 'detected-circular-definition':
os.alert({
title: i18n.locale.unableToProcess,
text: i18n.locale.circularReferenceFolder
});
break;
default:
os.alert({
type: 'error',
text: i18n.locale.somethingHappened
});
2017-02-21 00:49:35 +00:00
}
});
}
//#endregion
}
function selectLocalFile() {
fileInput.value?.click();
}
function urlUpload() {
os.inputText({
title: i18n.locale.uploadFromUrl,
type: 'url',
placeholder: i18n.locale.uploadFromUrlDescription
}).then(({ canceled, result: url }) => {
if (canceled || !url) return;
os.api('drive/files/upload-from-url', {
url: url,
folderId: folder.value ? folder.value.id : undefined
});
os.alert({
title: i18n.locale.uploadFromUrlRequested,
text: i18n.locale.uploadFromUrlMayTakeTime
});
});
}
function createFolder() {
os.inputText({
title: i18n.locale.createFolder,
placeholder: i18n.locale.folderName
}).then(({ canceled, result: name }) => {
if (canceled) return;
os.api('drive/folders/create', {
name: name,
parentId: folder.value ? folder.value.id : undefined
}).then(createdFolder => {
addFolder(createdFolder, true);
});
});
}
function renameFolder(folderToRename: Misskey.entities.DriveFolder) {
os.inputText({
title: i18n.locale.renameFolder,
placeholder: i18n.locale.inputNewFolderName,
default: folderToRename.name
}).then(({ canceled, result: name }) => {
if (canceled) return;
os.api('drive/folders/update', {
folderId: folderToRename.id,
name: name
}).then(updatedFolder => {
// FIXME: 画面を更新するために自分自身に移動
move(updatedFolder);
});
});
}
function deleteFolder(folderToDelete: Misskey.entities.DriveFolder) {
os.api('drive/folders/delete', {
folderId: folderToDelete.id
}).then(() => {
// 削除時に親フォルダに移動
move(folderToDelete.parentId);
}).catch(err => {
switch(err.id) {
case 'b0fc8a17-963c-405d-bfbc-859a487295e1':
os.alert({
type: 'error',
title: i18n.locale.unableToDelete,
text: i18n.locale.hasChildFilesOrFolders
});
break;
default:
os.alert({
type: 'error',
text: i18n.locale.unableToDelete
});
2018-02-26 21:25:17 +00:00
}
});
}
2018-02-26 21:25:17 +00:00
function onChangeFileInput() {
if (!fileInput.value?.files) return;
for (const file of Array.from(fileInput.value.files)) {
upload(file, folder.value);
}
}
function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null) {
os.upload(file, (folderToUpload && typeof folderToUpload == 'object') ? folderToUpload.id : null).then(res => {
addFile(res, true);
});
}
function chooseFile(file: Misskey.entities.DriveFile) {
const isAlreadySelected = selectedFiles.value.some(f => f.id == file.id);
if (props.multiple) {
if (isAlreadySelected) {
selectedFiles.value = selectedFiles.value.filter(f => f.id != file.id);
} else {
selectedFiles.value.push(file);
}
emit('change-selection', selectedFiles.value);
} else {
if (isAlreadySelected) {
emit('selected', file);
} else {
selectedFiles.value = [file];
emit('change-selection', [file]);
}
}
}
2018-02-26 21:25:17 +00:00
function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
const isAlreadySelected = selectedFolders.value.some(f => f.id == folderToChoose.id);
if (props.multiple) {
if (isAlreadySelected) {
selectedFolders.value = selectedFolders.value.filter(f => f.id != folderToChoose.id);
} else {
selectedFolders.value.push(folderToChoose);
}
emit('change-selection', selectedFolders.value);
} else {
if (isAlreadySelected) {
emit('selected', folderToChoose);
} else {
selectedFolders.value = [folderToChoose];
emit('change-selection', [folderToChoose]);
}
}
}
function move(target?: Misskey.entities.DriveFolder) {
if (!target) {
goRoot();
return;
} else if (typeof target == 'object') {
target = target.id;
}
2018-02-26 21:35:16 +00:00
fetching.value = true;
2018-02-18 03:35:18 +00:00
os.api('drive/folders/show', {
folderId: target
}).then(folderToMove => {
folder.value = folderToMove;
hierarchyFolders.value = [];
2018-02-18 03:35:18 +00:00
const dive = folderToDive => {
hierarchyFolders.value.unshift(folderToDive);
if (folderToDive.parent) dive(folderToDive.parent);
};
2018-02-18 03:35:18 +00:00
if (folderToMove.parent) dive(folderToMove.parent);
2017-01-11 20:55:38 +00:00
emit('open-folder', folderToMove);
fetch();
});
}
2017-01-11 20:55:38 +00:00
function addFolder(folderToAdd: Misskey.entities.DriveFolder, unshift = false) {
const current = folder.value ? folder.value.id : null;
if (current != folderToAdd.parentId) return;
2017-02-16 20:46:14 +00:00
if (folders.value.some(f => f.id == folderToAdd.id)) {
const exist = folders.value.map(f => f.id).indexOf(folderToAdd.id);
folders.value[exist] = folderToAdd;
return;
}
if (unshift) {
folders.value.unshift(folderToAdd);
} else {
folders.value.push(folderToAdd);
}
}
2017-02-21 00:49:35 +00:00
function addFile(fileToAdd: Misskey.entities.DriveFile, unshift = false) {
const current = folder.value ? folder.value.id : null;
if (current != fileToAdd.folderId) return;
2016-12-28 22:49:51 +00:00
if (files.value.some(f => f.id == fileToAdd.id)) {
const exist = files.value.map(f => f.id).indexOf(fileToAdd.id);
files.value[exist] = fileToAdd;
return;
}
2016-12-28 22:49:51 +00:00
if (unshift) {
files.value.unshift(fileToAdd);
} else {
files.value.push(fileToAdd);
}
}
function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
const folderIdToRemove = typeof folderToRemove === 'object' ? folderToRemove.id : folderToRemove;
folders.value = folders.value.filter(f => f.id != folderIdToRemove);
}
function removeFile(file: Misskey.entities.DriveFile | string) {
const fileId = typeof file === 'object' ? file.id : file;
files.value = files.value.filter(f => f.id != fileId);
}
function appendFile(file: Misskey.entities.DriveFile) {
addFile(file);
}
function appendFolder(folderToAppend: Misskey.entities.DriveFolder) {
addFolder(folderToAppend);
}
/*
function prependFile(file: Misskey.entities.DriveFile) {
addFile(file, true);
}
function prependFolder(folderToPrepend: Misskey.entities.DriveFolder) {
addFolder(folderToPrepend, true);
}
*/
function goRoot() {
// 既にrootにいるなら何もしない
if (folder.value == null) return;
folder.value = null;
hierarchyFolders.value = [];
emit('move-root');
fetch();
}
async function fetch() {
folders.value = [];
files.value = [];
moreFolders.value = false;
moreFiles.value = false;
fetching.value = true;
const foldersMax = 30;
const filesMax = 30;
const foldersPromise = os.api('drive/folders', {
folderId: folder.value ? folder.value.id : null,
limit: foldersMax + 1
}).then(fetchedFolders => {
if (fetchedFolders.length == foldersMax + 1) {
moreFolders.value = true;
fetchedFolders.pop();
}
return fetchedFolders;
});
const filesPromise = os.api('drive/files', {
folderId: folder.value ? folder.value.id : null,
type: props.type,
limit: filesMax + 1
}).then(fetchedFiles => {
if (fetchedFiles.length == filesMax + 1) {
moreFiles.value = true;
fetchedFiles.pop();
}
return fetchedFiles;
});
2016-12-28 22:49:51 +00:00
const [fetchedFolders, fetchedFiles] = await Promise.all([foldersPromise, filesPromise]);
2017-01-11 20:55:38 +00:00
for (const x of fetchedFolders) appendFolder(x);
for (const x of fetchedFiles) appendFile(x);
2018-02-18 03:35:18 +00:00
fetching.value = false;
}
2017-01-11 20:55:38 +00:00
function fetchMoreFiles() {
fetching.value = true;
2017-01-11 20:55:38 +00:00
const max = 30;
2018-02-18 03:35:18 +00:00
// ファイル一覧取得
os.api('drive/files', {
folderId: folder.value ? folder.value.id : null,
type: props.type,
untilId: files.value[files.value.length - 1].id,
limit: max + 1
}).then(files => {
if (files.length == max + 1) {
moreFiles.value = true;
files.pop();
} else {
moreFiles.value = false;
}
for (const x of files) appendFile(x);
fetching.value = false;
});
}
function getMenu() {
return [{
text: i18n.locale.addFile,
type: 'label'
}, {
text: i18n.locale.upload,
icon: 'fas fa-upload',
action: () => { selectLocalFile(); }
}, {
text: i18n.locale.fromUrl,
icon: 'fas fa-link',
action: () => { urlUpload(); }
}, null, {
text: folder.value ? folder.value.name : i18n.locale.drive,
type: 'label'
}, folder.value ? {
text: i18n.locale.renameFolder,
icon: 'fas fa-i-cursor',
action: () => { renameFolder(folder.value); }
} : undefined, folder.value ? {
text: i18n.locale.deleteFolder,
icon: 'fas fa-trash-alt',
action: () => { deleteFolder(folder.value as Misskey.entities.DriveFolder); }
} : undefined, {
text: i18n.locale.createFolder,
icon: 'fas fa-folder-plus',
action: () => { createFolder(); }
}];
}
function showMenu(ev: MouseEvent) {
os.popupMenu(getMenu(), (ev.currentTarget || ev.target || undefined) as HTMLElement | undefined);
}
function onContextmenu(ev: MouseEvent) {
os.contextMenu(getMenu(), ev);
}
onMounted(() => {
if (defaultStore.state.enableInfiniteScroll && loadMoreFiles.value) {
nextTick(() => {
ilFilesObserver.observe(loadMoreFiles.value?.$el)
});
}
2017-01-11 20:55:38 +00:00
connection.on('fileCreated', onStreamDriveFileCreated);
connection.on('fileUpdated', onStreamDriveFileUpdated);
connection.on('fileDeleted', onStreamDriveFileDeleted);
connection.on('folderCreated', onStreamDriveFolderCreated);
connection.on('folderUpdated', onStreamDriveFolderUpdated);
connection.on('folderDeleted', onStreamDriveFolderDeleted);
if (props.initialFolder) {
move(props.initialFolder);
} else {
fetch();
}
});
2016-12-28 22:49:51 +00:00
onActivated(() => {
if (defaultStore.state.enableInfiniteScroll) {
nextTick(() => {
ilFilesObserver.observe(loadMoreFiles.value?.$el)
});
2018-02-14 06:54:18 +00:00
}
});
onBeforeUnmount(() => {
connection.dispose();
ilFilesObserver.disconnect();
});
2018-02-14 06:54:18 +00:00
</script>
<style lang="scss" scoped>
.yfudmmck {
2020-11-03 01:27:00 +00:00
display: flex;
flex-direction: column;
height: 100%;
> nav {
2021-07-29 08:10:16 +00:00
display: flex;
z-index: 2;
width: 100%;
Migrate to Vue3 (#6587) * Update reaction.vue * fix bug * wip * wip * wjio * wip * Revert "wip" This reverts commit e427f2160adf4e8a4147006e25a89854edab0033. * wip * wip * wip * Update init.ts * Update drive-window.vue * wip * wip * Use PascalCase for components * Use PascalCase for components * update dep * wip * wip * wip * Update init.ts * wip * Update paging.ts * Update test.vue * watch deep * wip * lint * wip * wip * wip * wip * wiop * wip * Update webpack.config.ts * alllow null poll * wip * wip * wip * wiop * UI redesign & refactor (#6714) * wip * wip * wip * wip * wip * Update drive.vue * Update word-mute.vue * wip * wip * wip * clean up * wip * Update default.vue * wip * Update notes.vue * Update mfm.ts * Update index.home.vue * Update post-form.vue * Update post-form-attaches.vue * wip * Update post-form.vue * Update sidebar.vue * wip * wip * Update index.vue * wip * Update default.vue * Update index.vue * Update index.vue * wip * Update post-form-attaches.vue * Update note.vue * wip * clean up * Update notes.vue * wip * wip * Update ja-JP.yml * wip * wip * Update index.vue * wip * wip * wip * wip * wip * wip * wip * wip * Update default.vue * wip * Update _dark.json5 * wip * wip * wip * clean up * wip * wip * Update index.vue * Update test.vue * wip * wip * fix * wip * wip * wip * wip * clena yop * wip * wip * Update store.ts * Update messaging-room.vue * Update default.widgets.vue * fix * wip * wip * Update modal.vue * wip * Update os.ts * Update os.ts * Update deck.vue * Update init.ts * wip * Update ja-JP.yml * v-sizeは単にwindowのresizeを監視するだけで良いかもしれない * Update modal.vue * wip * Update tooltip.ts * wip * wip * wip * wip * wip * Update image-viewer.vue * wip * wip * Update style.scss * Update style.scss * Update visitor.vue * wip * Update init.ts * Update init.ts * wip * wip * Update visitor.vue * Update visitor.vue * Update visitor.vue * Update visitor.vue * wip * wip * Update modal.vue * Update header.vue * Update menu.vue * Update about.vue * Update about-misskey.vue * wip * wip * Update visitor.vue * Update tooltip.ts * wip * Update drive.vue * wip * Update style.scss * Update header.vue * wip * wip * Update users.user.vue * Update announcements.vue * wip * wip * wip * Update emojis.vue * wip * Update emojis.vue * Update style.scss * Update users.vue * wip * Update style.scss * wip * Update welcome.entrance.vue * Update radio.vue * Update size.ts * Update emoji-edit-dialog.vue * wip * Update emojis.vue * wip * Update emojis.vue * Update emojis.vue * Update emojis.vue * wip * wip * wip * wip * Update file-dialog.vue * wip * wip * Update token-generate-window.vue * Update notification-setting-window.vue * wip * wip * Update _error_.vue * Update ja-JP.yml * wip * wip * Update store.ts * Update emojis.vue * Update emojis.vue * Update emojis.vue * Update announcements.vue * Update store.ts * wip * Update page-editor.vue * wip * wip * Update modal.vue * wip * Update select-file.ts * Update timeline.vue * Update emojis.vue * Update os.ts * wip * Update user-select.vue * Update mfm.ts * Update get-file-info.ts * Update drive.vue * Update init.ts * Update mfm.ts * wip * wip * Update window.vue * Update note.vue * wip * wip * Update user-info.vue * wip * wip * wip * wip * wip * Update header.vue * Update header.vue * wip * Update explore.vue * wip * wip * wip * Update webpack.config.ts * wip * wip * wip * wip * wip * wip * Update autocomplete.ts * wip * wip * wip * Update toast.vue * wip * Update post-form-dialog.vue * wip * wip * wip * wip * wip * Update users.vue * wip * Update explore.vue * wip * wip * wip * Update package.json * wip * Update icon-dialog.vue * wip * wip * Update user-preview.ts * wip * wip * wip * wip * wip * Update instance.vue * Update user-name.vue * Update federation.vue * Update instance.vue * wip * wip * Update tag.vue * wip * wip * wip * wip * wip * Update instance.vue * wip * Update os.ts * Update os.ts * wip * wip * wip * Update router.ts * wip * Update init.ts * Update note.vue * Update messages.vue * wip * wip * wip * wip * wip * google * wip * wip * wip * wip * Update theme-editor.vue * wip * wip * Update room.vue * Update channel-editor.vue * wip * Update window.vue * Update window.vue * wip * Update window.vue * Update window.vue * wip * Update menu.vue * wip * wip * wip * wip * Update messaging-room.vue * wip * Update post-form.vue * Update default.widgets.vue * Update window.vue * wip
2020-10-17 11:12:00 +00:00
padding: 0 8px;
box-sizing: border-box;
overflow: auto;
font-size: 0.9em;
box-shadow: 0 1px 0 var(--divider);
&, * {
user-select: none;
}
> .path {
display: inline-block;
vertical-align: bottom;
2021-12-10 01:46:29 +00:00
line-height: 50px;
white-space: nowrap;
> * {
display: inline-block;
margin: 0;
padding: 0 8px;
2021-12-10 01:46:29 +00:00
line-height: 50px;
cursor: pointer;
* {
pointer-events: none;
}
&:hover {
text-decoration: underline;
}
&.current {
font-weight: bold;
cursor: default;
&:hover {
text-decoration: none;
}
}
&.separator {
margin: 0;
padding: 0;
opacity: 0.5;
cursor: default;
> i {
margin: 0;
}
}
}
}
2021-07-29 08:10:16 +00:00
> .menu {
margin-left: auto;
2021-12-10 01:46:29 +00:00
padding: 0 12px;
2021-07-29 08:10:16 +00:00
}
}
> .main {
2020-11-03 01:27:00 +00:00
flex: 1;
overflow: auto;
padding: var(--margin);
&, * {
user-select: none;
}
2018-02-14 06:54:18 +00:00
&.fetching {
cursor: wait !important;
* {
pointer-events: none;
}
> .contents {
opacity: 0.5;
}
}
&.uploading {
height: calc(100% - 38px - 100px);
}
> .contents {
> .folders,
> .files {
display: flex;
flex-wrap: wrap;
> .folder,
> .file {
flex-grow: 1;
width: 128px;
margin: 4px;
box-sizing: border-box;
}
> .padding {
flex-grow: 1;
pointer-events: none;
width: 128px + 8px;
2018-02-14 06:54:18 +00:00
}
}
> .empty {
padding: 16px;
text-align: center;
pointer-events: none;
opacity: 0.5;
2018-02-14 06:54:18 +00:00
> p {
margin: 0;
}
}
}
}
2018-02-14 06:54:18 +00:00
> .dropzone {
position: absolute;
left: 0;
top: 38px;
width: 100%;
height: calc(100% - 38px);
border: dashed 2px var(--focus);
pointer-events: none;
}
> input {
display: none;
}
}
2018-02-14 06:54:18 +00:00
</style>