usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2025-05-11 13:11:05 +09:00
parent f239e6fc62
commit cf701f389d
7 changed files with 57 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/src/components/MkDrive.file.vue
View File

@ -48,7 +48,7 @@ import { $i } from '@/i.js';
import { getDriveFileMenu } from '@/utility/get-drive-file-menu.js'; import { getDriveFileMenu } from '@/utility/get-drive-file-menu.js';
import { deviceKind } from '@/utility/device-kind.js'; import { deviceKind } from '@/utility/device-kind.js';
import { useRouter } from '@/router.js'; import { useRouter } from '@/router.js';
import { DATA_TRANSFER_DRIVE_FILE } from '@/consts.js'; import { DATA_TRANSFER_DRIVE_FILES } from '@/consts.js';
const router = useRouter(); const router = useRouter();
@ -91,7 +91,7 @@ function onContextmenu(ev: MouseEvent) {
function onDragstart(ev: DragEvent) { function onDragstart(ev: DragEvent) {
if (ev.dataTransfer) { if (ev.dataTransfer) {
ev.dataTransfer.effectAllowed = 'move'; ev.dataTransfer.effectAllowed = 'move';
ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FILE, JSON.stringify(props.file)); ev.dataTransfer.setData(DATA_TRANSFER_DRIVE_FILES, JSON.stringify([props.file]));
} }
isDragging.value = true; isDragging.value = true;

24
packages/frontend/src/components/MkDrive.folder.vue
View File

@ -42,7 +42,7 @@ import { i18n } from '@/i18n.js';
import { claimAchievement } from '@/utility/achievements.js'; import { claimAchievement } from '@/utility/achievements.js';
import { copyToClipboard } from '@/utility/copy-to-clipboard.js'; import { copyToClipboard } from '@/utility/copy-to-clipboard.js';
import { prefer } from '@/preferences.js'; import { prefer } from '@/preferences.js';
import { DATA_TRANSFER_DRIVE_FILE, DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDER, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js'; import { DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js';
import { globalEvents } from '@/events.js'; import { globalEvents } from '@/events.js';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
@ -95,12 +95,10 @@ function onDragover(ev: DragEvent) {
} }
const isFile = ev.dataTransfer.items[0].kind === 'file'; const isFile = ev.dataTransfer.items[0].kind === 'file';
const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES; const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
const isDriveFolder = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDER;
const isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS; const isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
if (isFile || isDriveFile || isDriveFolder || isDriveFiles || isDriveFolders) { if (isFile || isDriveFiles || isDriveFolders) {
switch (ev.dataTransfer.effectAllowed) { switch (ev.dataTransfer.effectAllowed) {
case 'all': case 'all':
case 'uninitialized': case 'uninitialized':
@ -144,21 +142,6 @@ function onDrop(ev: DragEvent) {
} }
//#region ドライブのファイル //#region ドライブのファイル
{
const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
if (driveFile != null && driveFile !== '') {
const file = JSON.parse(driveFile);
misskeyApi('drive/files/update', {
fileId: file.id,
folderId: props.folder.id,
}).then(() => {
globalEvents.emit('driveFilesMoved', [file], props.folder);
});
}
}
//#endregion
//#region ドライブのファイル(複数)
{ {
const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES); const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
if (driveFiles != null && driveFiles !== '') { if (driveFiles != null && driveFiles !== '') {
@ -174,8 +157,9 @@ function onDrop(ev: DragEvent) {
//#endregion //#endregion
//#region ドライブのフォルダ //#region ドライブのフォルダ
// TODO
{ {
const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER); const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDERS);
if (driveFolder != null && driveFolder !== '') { if (driveFolder != null && driveFolder !== '') {
const folder = JSON.parse(driveFolder); const folder = JSON.parse(driveFolder);

22
packages/frontend/src/components/MkDrive.navFolder.vue
View File

@ -21,7 +21,7 @@ import { ref } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import { misskeyApi } from '@/utility/misskey-api.js'; import { misskeyApi } from '@/utility/misskey-api.js';
import { i18n } from '@/i18n.js'; import { i18n } from '@/i18n.js';
import { DATA_TRANSFER_DRIVE_FILE, DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDER, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js'; import { DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js';
import { globalEvents } from '@/events.js'; import { globalEvents } from '@/events.js';
const props = defineProps<{ const props = defineProps<{
@ -44,12 +44,10 @@ function onDragover(ev: DragEvent) {
} }
const isFile = ev.dataTransfer.items[0].kind === 'file'; const isFile = ev.dataTransfer.items[0].kind === 'file';
const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES; const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
const isDriveFolder = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDER;
const isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS; const isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
if (isFile || isDriveFile || isDriveFolder || isDriveFiles || isDriveFolders) { if (isFile || isDriveFiles || isDriveFolders) {
switch (ev.dataTransfer.effectAllowed) { switch (ev.dataTransfer.effectAllowed) {
case 'all': case 'all':
case 'uninitialized': case 'uninitialized':
@ -95,21 +93,6 @@ function onDrop(ev: DragEvent) {
} }
//#region ドライブのファイル //#region ドライブのファイル
{
const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
if (driveFile != null && driveFile !== '') {
const file = JSON.parse(driveFile);
misskeyApi('drive/files/update', {
fileId: file.id,
folderId: props.folder ? props.folder.id : null,
}).then(() => {
globalEvents.emit('driveFilesMoved', [file], props.folder ?? null);
});
}
}
//#endregion
//#region ドライブのファイル(複数)
{ {
const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES); const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
if (driveFiles != null && driveFiles !== '') { if (driveFiles != null && driveFiles !== '') {
@ -125,6 +108,7 @@ function onDrop(ev: DragEvent) {
//#endregion //#endregion
//#region ドライブのフォルダ //#region ドライブのフォルダ
// TODO
{ {
const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER); const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
if (driveFolder != null && driveFolder !== '') { if (driveFolder != null && driveFolder !== '') {

54
packages/frontend/src/components/MkDrive.vue
View File

@ -83,14 +83,22 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<div v-show="filesPaginator.items.value.length > 0"> <div v-show="filesPaginator.items.value.length > 0">
<MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()"> <MkStickyContainer v-for="(item, i) in filesTimeline" :key="`${item.date.getFullYear()}/${item.date.getMonth() + 1}`">
<template #header> <template #header>
<div :class="$style.date"> <div :class="$style.date">
<span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}</span> <span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}</span>
</div> </div>
</template> </template>
<div :class="$style.files"> <TransitionGroup
tag="div"
:enterActiveClass="prefer.s.animation ? $style.transition_files_enterActive : ''"
:leaveActiveClass="prefer.s.animation ? $style.transition_files_leaveActive : ''"
:enterFromClass="prefer.s.animation ? $style.transition_files_enterFrom : ''"
:leaveToClass="prefer.s.animation ? $style.transition_files_leaveTo : ''"
:moveClass="prefer.s.animation ? $style.transition_files_move : ''"
:class="$style.files"
>
<XFile <XFile
v-for="file in item.items" :key="file.id" v-for="file in item.items" :key="file.id"
:class="$style.file" :class="$style.file"
@ -102,7 +110,7 @@ SPDX-License-Identifier: AGPL-3.0-only
@dragstart="onFileDragstart(file, $event)" @dragstart="onFileDragstart(file, $event)"
@dragend="isDragSource = false" @dragend="isDragSource = false"
/> />
</div> </TransitionGroup>
</MkStickyContainer> </MkStickyContainer>
<MkButton v-show="filesPaginator.canFetchOlder.value" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton> <MkButton v-show="filesPaginator.canFetchOlder.value" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
</div> </div>
@ -126,7 +134,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, computed } from 'vue'; import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, useTemplateRef, watch, computed, TransitionGroup } from 'vue';
import * as Misskey from 'misskey-js'; import * as Misskey from 'misskey-js';
import MkButton from './MkButton.vue'; import MkButton from './MkButton.vue';
import MkInfo from './MkInfo.vue'; import MkInfo from './MkInfo.vue';
@ -146,7 +154,7 @@ import { store } from '@/store.js';
import { isSeparatorNeeded, getSeparatorInfo, makeDateGroupedTimelineComputedRef } from '@/utility/timeline-date-separate.js'; import { isSeparatorNeeded, getSeparatorInfo, makeDateGroupedTimelineComputedRef } from '@/utility/timeline-date-separate.js';
import { usePagination } from '@/composables/use-pagination.js'; import { usePagination } from '@/composables/use-pagination.js';
import { globalEvents, useGlobalEvent } from '@/events.js'; import { globalEvents, useGlobalEvent } from '@/events.js';
import { DATA_TRANSFER_DRIVE_FILE, DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDER } from '@/consts.js'; import { DATA_TRANSFER_DRIVE_FILES, DATA_TRANSFER_DRIVE_FOLDERS } from '@/consts.js';
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
initialFolder?: Misskey.entities.DriveFolder['id'] | null; initialFolder?: Misskey.entities.DriveFolder['id'] | null;
@ -271,9 +279,9 @@ function onDragover(ev: DragEvent) {
} }
const isFile = ev.dataTransfer.items[0].kind === 'file'; const isFile = ev.dataTransfer.items[0].kind === 'file';
const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE; const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
const isDriveFolder = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDER; const isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
if (isFile || isDriveFile || isDriveFolder) { if (isFile || isDriveFiles || isDriveFolders) {
switch (ev.dataTransfer.effectAllowed) { switch (ev.dataTransfer.effectAllowed) {
case 'all': case 'all':
case 'uninitialized': case 'uninitialized':
@ -319,22 +327,6 @@ function onDrop(ev: DragEvent) {
} }
//#region ドライブのファイル //#region ドライブのファイル
{
const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
if (driveFile != null && driveFile !== '') {
const file = JSON.parse(driveFile);
if (filesPaginator.items.value.some(f => f.id === file.id)) return;
misskeyApi('drive/files/update', {
fileId: file.id,
folderId: folder.value ? folder.value.id : null,
}).then(() => {
globalEvents.emit('driveFilesMoved', [file], folder.value);
});
}
}
//#endregion
//#region ドライブのファイル(複数)
{ {
const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES); const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
if (driveFiles != null && driveFiles !== '') { if (driveFiles != null && driveFiles !== '') {
@ -350,6 +342,7 @@ function onDrop(ev: DragEvent) {
//#endregion //#endregion
//#region ドライブのフォルダ //#region ドライブのフォルダ
// TODO
{ {
const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER); const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
if (driveFolder != null && driveFolder !== '') { if (driveFolder != null && driveFolder !== '') {
@ -704,6 +697,19 @@ onBeforeUnmount(() => {
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.transition_files_move,
.transition_files_enterActive,
.transition_files_leaveActive {
transition: all 0.2s ease;
}
.transition_files_enterFrom,
.transition_files_leaveTo {
opacity: 0;
}
.transition_files_leaveActive {
position: absolute;
}
.nav { .nav {
display: flex; display: flex;
width: 100%; width: 100%;

15
packages/frontend/src/components/MkPostForm.vue
View File

@ -138,7 +138,7 @@ import { prefer } from '@/preferences.js';
import { getPluginHandlers } from '@/plugin.js'; import { getPluginHandlers } from '@/plugin.js';
import { DI } from '@/di.js'; import { DI } from '@/di.js';
import { globalEvents } from '@/events.js'; import { globalEvents } from '@/events.js';
import { DATA_TRANSFER_DRIVE_FILE } from '@/consts.js'; import { DATA_TRANSFER_DRIVE_FILES } from '@/consts.js';
const $i = ensureSignin(); const $i = ensureSignin();
@ -702,8 +702,8 @@ async function onPaste(ev: ClipboardEvent) {
function onDragover(ev) { function onDragover(ev) {
if (!ev.dataTransfer.items[0]) return; if (!ev.dataTransfer.items[0]) return;
const isFile = ev.dataTransfer.items[0].kind === 'file'; const isFile = ev.dataTransfer.items[0].kind === 'file';
const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE; const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
if (isFile || isDriveFile) { if (isFile || isDriveFiles) {
ev.preventDefault(); ev.preventDefault();
draghover.value = true; draghover.value = true;
switch (ev.dataTransfer.effectAllowed) { switch (ev.dataTransfer.effectAllowed) {
@ -744,12 +744,13 @@ function onDrop(ev: DragEvent): void {
} }
//#region ドライブのファイル //#region ドライブのファイル
const driveFile = ev.dataTransfer?.getData(DATA_TRANSFER_DRIVE_FILE); {
if (driveFile != null && driveFile !== '') { const driveFiles = ev.dataTransfer?.getData(DATA_TRANSFER_DRIVE_FILES);
const file = JSON.parse(driveFile); if (driveFiles != null && driveFiles !== '') {
files.value.push(file); files.value.push(...JSON.parse(driveFiles));
ev.preventDefault(); ev.preventDefault();
} }
}
//#endregion //#endregion
} }

2
packages/frontend/src/consts.ts
View File

@ -3,8 +3,6 @@
* SPDX-License-Identifier: AGPL-3.0-only * SPDX-License-Identifier: AGPL-3.0-only
*/ */
export const DATA_TRANSFER_DRIVE_FILE = 'misskey-drive-file';
export const DATA_TRANSFER_DRIVE_FILES = 'misskey-drive-files'; export const DATA_TRANSFER_DRIVE_FILES = 'misskey-drive-files';
export const DATA_TRANSFER_DRIVE_FOLDER = 'misskey-drive-folder';
export const DATA_TRANSFER_DRIVE_FOLDERS = 'misskey-drive-folders'; export const DATA_TRANSFER_DRIVE_FOLDERS = 'misskey-drive-folders';
export const DATA_TRANSFER_DECK_COLUMN = 'misskey-deck-column'; export const DATA_TRANSFER_DECK_COLUMN = 'misskey-deck-column';

14
packages/frontend/src/pages/chat/room.form.vue
View File

@ -47,7 +47,7 @@ import { misskeyApi } from '@/utility/misskey-api.js';
import { prefer } from '@/preferences.js'; import { prefer } from '@/preferences.js';
import { Autocomplete } from '@/utility/autocomplete.js'; import { Autocomplete } from '@/utility/autocomplete.js';
import { emojiPicker } from '@/utility/emoji-picker.js'; import { emojiPicker } from '@/utility/emoji-picker.js';
import { DATA_TRANSFER_DRIVE_FILE } from '@/consts.js'; import { DATA_TRANSFER_DRIVE_FILES } from '@/consts.js';
const props = defineProps<{ const props = defineProps<{
user?: Misskey.entities.UserDetailed | null; user?: Misskey.entities.UserDetailed | null;
@ -102,8 +102,8 @@ function onDragover(ev: DragEvent) {
if (!ev.dataTransfer) return; if (!ev.dataTransfer) return;
const isFile = ev.dataTransfer.items[0].kind === 'file'; const isFile = ev.dataTransfer.items[0].kind === 'file';
const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE; const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
if (isFile || isDriveFile) { if (isFile || isDriveFiles) {
ev.preventDefault(); ev.preventDefault();
switch (ev.dataTransfer.effectAllowed) { switch (ev.dataTransfer.effectAllowed) {
case 'all': case 'all':
@ -142,11 +142,13 @@ function onDrop(ev: DragEvent): void {
} }
//#region ドライブのファイル //#region ドライブのファイル
const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE); {
if (driveFile != null && driveFile !== '') { const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
file.value = JSON.parse(driveFile); if (driveFiles != null && driveFiles !== '') {
file.value = JSON.parse(driveFiles)[0];
ev.preventDefault(); ev.preventDefault();
} }
}
//#endregion //#endregion
} }