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 { deviceKind } from '@/utility/device-kind.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();
@ -91,7 +91,7 @@ function onContextmenu(ev: MouseEvent) {
function onDragstart(ev: DragEvent) {
if (ev.dataTransfer) {
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;

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 { copyToClipboard } from '@/utility/copy-to-clipboard.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';
const props = withDefaults(defineProps<{
@ -95,12 +95,10 @@ function onDragover(ev: DragEvent) {
}
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 || isDriveFiles || isDriveFolders) {
if (isFile || isDriveFiles || isDriveFolders) {
switch (ev.dataTransfer.effectAllowed) {
case 'all':
case 'uninitialized':
@ -144,21 +142,6 @@ function onDrop(ev: DragEvent) {
}
//#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);
if (driveFiles != null && driveFiles !== '') {
@ -174,8 +157,9 @@ function onDrop(ev: DragEvent) {
//#endregion
//#region ドライブのフォルダ
// TODO
{
const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDERS);
if (driveFolder != null && 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 { misskeyApi } from '@/utility/misskey-api.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';
const props = defineProps<{
@ -44,12 +44,10 @@ function onDragover(ev: DragEvent) {
}
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 || isDriveFiles || isDriveFolders) {
if (isFile || isDriveFiles || isDriveFolders) {
switch (ev.dataTransfer.effectAllowed) {
case 'all':
case 'uninitialized':
@ -95,21 +93,6 @@ function onDrop(ev: DragEvent) {
}
//#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);
if (driveFiles != null && driveFiles !== '') {
@ -125,6 +108,7 @@ function onDrop(ev: DragEvent) {
//#endregion
//#region ドライブのフォルダ
// TODO
{
const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
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 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>
<div :class="$style.date">
<span><i class="ti ti-chevron-down"></i> {{ item.date.getFullYear() }}/{{ item.date.getMonth() + 1 }}</span>
</div>
</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
v-for="file in item.items" :key="file.id"
:class="$style.file"
@ -102,7 +110,7 @@ SPDX-License-Identifier: AGPL-3.0-only
@dragstart="onFileDragstart(file, $event)"
@dragend="isDragSource = false"
/>
</div>
</TransitionGroup>
</MkStickyContainer>
<MkButton v-show="filesPaginator.canFetchOlder.value" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
</div>
@ -126,7 +134,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</template>
<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 MkButton from './MkButton.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 { usePagination } from '@/composables/use-pagination.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<{
initialFolder?: Misskey.entities.DriveFolder['id'] | null;
@ -271,9 +279,9 @@ function onDragover(ev: DragEvent) {
}
const isFile = ev.dataTransfer.items[0].kind === 'file';
const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
const isDriveFolder = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDER;
if (isFile || isDriveFile || isDriveFolder) {
const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
const isDriveFolders = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FOLDERS;
if (isFile || isDriveFiles || isDriveFolders) {
switch (ev.dataTransfer.effectAllowed) {
case 'all':
case 'uninitialized':
@ -319,22 +327,6 @@ function onDrop(ev: DragEvent) {
}
//#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);
if (driveFiles != null && driveFiles !== '') {
@ -350,6 +342,7 @@ function onDrop(ev: DragEvent) {
//#endregion
//#region ドライブのフォルダ
// TODO
{
const driveFolder = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FOLDER);
if (driveFolder != null && driveFolder !== '') {
@ -704,6 +697,19 @@ onBeforeUnmount(() => {
</script>
<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 {
display: flex;
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 { DI } from '@/di.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();
@ -702,8 +702,8 @@ async function onPaste(ev: ClipboardEvent) {
function onDragover(ev) {
if (!ev.dataTransfer.items[0]) return;
const isFile = ev.dataTransfer.items[0].kind === 'file';
const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
if (isFile || isDriveFile) {
const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
if (isFile || isDriveFiles) {
ev.preventDefault();
draghover.value = true;
switch (ev.dataTransfer.effectAllowed) {
@ -744,12 +744,13 @@ function onDrop(ev: DragEvent): void {
}
//#region ドライブのファイル
const driveFile = ev.dataTransfer?.getData(DATA_TRANSFER_DRIVE_FILE);
if (driveFile != null && driveFile !== '') {
const file = JSON.parse(driveFile);
files.value.push(file);
{
const driveFiles = ev.dataTransfer?.getData(DATA_TRANSFER_DRIVE_FILES);
if (driveFiles != null && driveFiles !== '') {
files.value.push(...JSON.parse(driveFiles));
ev.preventDefault();
}
}
//#endregion
}

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

@ -3,8 +3,6 @@
* 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_FOLDER = 'misskey-drive-folder';
export const DATA_TRANSFER_DRIVE_FOLDERS = 'misskey-drive-folders';
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 { Autocomplete } from '@/utility/autocomplete.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<{
user?: Misskey.entities.UserDetailed | null;
@ -102,8 +102,8 @@ function onDragover(ev: DragEvent) {
if (!ev.dataTransfer) return;
const isFile = ev.dataTransfer.items[0].kind === 'file';
const isDriveFile = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILE;
if (isFile || isDriveFile) {
const isDriveFiles = ev.dataTransfer.types[0] === DATA_TRANSFER_DRIVE_FILES;
if (isFile || isDriveFiles) {
ev.preventDefault();
switch (ev.dataTransfer.effectAllowed) {
case 'all':
@ -142,11 +142,13 @@ function onDrop(ev: DragEvent): void {
}
//#region ドライブのファイル
const driveFile = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILE);
if (driveFile != null && driveFile !== '') {
file.value = JSON.parse(driveFile);
{
const driveFiles = ev.dataTransfer.getData(DATA_TRANSFER_DRIVE_FILES);
if (driveFiles != null && driveFiles !== '') {
file.value = JSON.parse(driveFiles)[0];
ev.preventDefault();
}
}
//#endregion
}