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-10 17:03:17 +09:00
parent 9d6eb954b7
commit 8a072b1b4d
3 changed files with 90 additions and 63 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

@ -240,8 +240,8 @@ function onDragend() {
.name { .name {
display: block; display: block;
margin: 4px 0 0 0; margin: 8px 0 0 0;
font-size: 0.8em; font-size: 85%;
text-align: center; text-align: center;
word-break: break-all; word-break: break-all;
color: var(--MI_THEME-fg); color: var(--MI_THEME-fg);

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

@ -35,72 +35,80 @@ SPDX-License-Identifier: AGPL-3.0-only
</nav> </nav>
</template> </template>
<div <div>
ref="main" <div
:class="[$style.main, { [$style.uploading]: uploadings.length > 0, [$style.fetching]: fetching }]" ref="main"
@dragover.prevent.stop="onDragover" :class="[$style.main, { [$style.uploading]: uploadings.length > 0, [$style.fetching]: fetching }]"
@dragenter="onDragenter" @dragover.prevent.stop="onDragover"
@dragleave="onDragleave" @dragenter="onDragenter"
@drop.prevent.stop="onDrop" @dragleave="onDragleave"
@contextmenu.stop="onContextmenu" @drop.prevent.stop="onDrop"
> @contextmenu.stop="onContextmenu"
<MkInfo v-if="!store.r.readDriveTip.value" closable @close="closeTip()"><div v-html="i18n.ts.driveAboutTip"></div></MkInfo> >
<div v-show="foldersPaginator.items.value.length > 0"> <MkInfo v-if="!store.r.readDriveTip.value" closable @close="closeTip()"><div v-html="i18n.ts.driveAboutTip"></div></MkInfo>
<div :class="$style.folders"> <div v-show="foldersPaginator.items.value.length > 0">
<XFolder <div :class="$style.folders">
v-for="(f, i) in foldersPaginator.items.value" <XFolder
:key="f.id" v-for="(f, i) in foldersPaginator.items.value"
v-anim="i" :key="f.id"
:class="$style.folder" v-anim="i"
:folder="f" :class="$style.folder"
:selectMode="select === 'folder'" :folder="f"
:isSelected="selectedFolders.some(x => x.id === f.id)" :selectMode="select === 'folder'"
@chosen="chooseFolder" :isSelected="selectedFolders.some(x => x.id === f.id)"
@unchose="unchoseFolder" @chosen="chooseFolder"
@move="move" @unchose="unchoseFolder"
@upload="upload" @move="move"
@removeFile="removeFile" @upload="upload"
@removeFolder="removeFolder" @removeFile="removeFile"
@dragstart="isDragSource = true" @removeFolder="removeFolder"
@dragend="isDragSource = false"
/>
</div>
<MkButton v-if="foldersPaginator.canFetchOlder" primary rounded @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
</div>
<div v-show="filesPaginator.items.value.length > 0">
<MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()">
<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">
<XFile
v-for="file in item.items" :key="file.id"
:class="$style.file"
:file="file"
:folder="folder"
:selectMode="select === 'file'"
:isSelected="selectedFiles.some(x => x.id === file.id)"
@chosen="chooseFile"
@dragstart="isDragSource = true" @dragstart="isDragSource = true"
@dragend="isDragSource = false" @dragend="isDragSource = false"
/> />
</div> </div>
</MkStickyContainer> <MkButton v-if="foldersPaginator.canFetchOlder" primary rounded @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
<MkButton v-show="filesPaginator.canFetchOlder" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton> </div>
</div>
<div v-if="filesPaginator.items.value.length == 0 && foldersPaginator.items.value.length == 0 && !fetching" :class="$style.empty"> <div v-show="filesPaginator.items.value.length > 0">
<div v-if="draghover">{{ i18n.ts['empty-draghover'] }}</div> <MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()">
<div v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.ts['empty-drive-description'] }}</div> <template #header>
<div v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</div> <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">
<XFile
v-for="file in item.items" :key="file.id"
:class="$style.file"
:file="file"
:folder="folder"
:selectMode="select === 'file'"
:isSelected="selectedFiles.some(x => x.id === file.id)"
@chosen="chooseFile"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
/>
</div>
</MkStickyContainer>
<MkButton v-show="filesPaginator.canFetchOlder" primary rounded @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
</div>
<div v-if="filesPaginator.items.value.length == 0 && foldersPaginator.items.value.length == 0 && !fetching" :class="$style.empty">
<div v-if="draghover">{{ i18n.ts['empty-draghover'] }}</div>
<div v-if="!draghover && folder == null"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.ts['empty-drive-description'] }}</div>
<div v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</div>
</div>
</div> </div>
<MkLoading v-if="fetching"/>
<div v-if="draghover" :class="$style.dropzone"></div>
</div> </div>
<MkLoading v-if="fetching"/>
<div v-if="draghover" :class="$style.dropzone"></div> <template #footer>
<div v-if="isEditMode" :class="$style.footer">
<MkButton primary rounded @click="move()"><i class="ti ti-folder-symlink"></i> {{ i18n.ts.move }}...</MkButton>
</div>
</template>
</MkStickyContainer> </MkStickyContainer>
</template> </template>
@ -156,6 +164,8 @@ const draghover = ref(false);
// (自分自身の階層にドロップできないようにするためのフラグ) // (自分自身の階層にドロップできないようにするためのフラグ)
const isDragSource = ref(false); const isDragSource = ref(false);
const isEditMode = ref(false);
const fetching = ref(true); const fetching = ref(true);
const sortModeSelect = ref<NonNullable<Misskey.entities.DriveFilesRequest['sort']>>('+createdAt'); const sortModeSelect = ref<NonNullable<Misskey.entities.DriveFilesRequest['sort']>>('+createdAt');
@ -171,6 +181,7 @@ const filesPaginator = usePagination({
})), })),
}, },
autoInit: false, autoInit: false,
autoReInit: false,
}); });
const foldersPaginator = usePagination({ const foldersPaginator = usePagination({
@ -182,6 +193,7 @@ const foldersPaginator = usePagination({
})), })),
}, },
autoInit: false, autoInit: false,
autoReInit: false,
}); });
const filesTimeline = makeDateGroupedTimelineComputedRef(filesPaginator.items, 'month'); const filesTimeline = makeDateGroupedTimelineComputedRef(filesPaginator.items, 'month');
@ -613,6 +625,11 @@ function getMenu() {
text: i18n.ts.createFolder, text: i18n.ts.createFolder,
icon: 'ti ti-folder-plus', icon: 'ti ti-folder-plus',
action: () => { createFolder(); }, action: () => { createFolder(); },
}, { type: 'divider' }, {
type: 'switch',
text: i18n.ts.edit,
icon: 'ti ti-pointer',
ref: isEditMode,
}); });
return menu; return menu;
@ -739,6 +756,14 @@ onBeforeUnmount(() => {
background-color: color(from var(--MI_THEME-bg) srgb r g b / 0.85); background-color: color(from var(--MI_THEME-bg) srgb r g b / 0.85);
} }
.footer {
padding: 8px 16px;
font-size: 90%;
-webkit-backdrop-filter: var(--MI-blur, blur(8px));
backdrop-filter: var(--MI-blur, blur(8px));
background-color: color(from var(--MI_THEME-bg) srgb r g b / 0.85);
}
.empty { .empty {
padding: 16px; padding: 16px;
text-align: center; text-align: center;

6
packages/frontend/src/composables/use-pagination.ts
View File

@ -40,6 +40,7 @@ export type PagingCtx<E extends keyof Misskey.Endpoints = keyof Misskey.Endpoint
export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Misskey.Endpoints[Endpoint]['res'] extends (infer I)[] ? I : never>(props: { export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Misskey.Endpoints[Endpoint]['res'] extends (infer I)[] ? I : never>(props: {
ctx: PagingCtx<Endpoint>; ctx: PagingCtx<Endpoint>;
autoInit?: boolean; autoInit?: boolean;
autoReInit?: boolean;
useShallowRef?: boolean; useShallowRef?: boolean;
}) { }) {
const items = props.useShallowRef ? shallowRef<T[]>([]) : ref<T[]>([]); const items = props.useShallowRef ? shallowRef<T[]>([]) : ref<T[]>([]);
@ -50,8 +51,9 @@ export function usePagination<Endpoint extends keyof Misskey.Endpoints, T = Miss
const canFetchOlder = ref(false); const canFetchOlder = ref(false);
const error = ref(false); const error = ref(false);
// パラメータに何らかの変更があった際、再読込したい（チャンネル等のIDが変わったなど） if (props.autoReInit !== false) {
watch(() => [props.ctx.endpoint, props.ctx.params], init, { deep: true }); watch(() => [props.ctx.endpoint, props.ctx.params], init, { deep: true });
}
function getNewestId(): string | null | undefined { function getNewestId(): string | null | undefined {
// 様々な要因により並び順は保証されないのでソートが必要 // 様々な要因により並び順は保証されないのでソートが必要