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

Update MkDrive.vue

This commit is contained in:
syuilo 2025-05-10 15:35:41 +09:00
parent c98d72e6e1
commit 796b0c3706
1 changed files with 63 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,64 +44,62 @@ SPDX-License-Identifier: AGPL-3.0-only
@drop.prevent.stop="onDrop" @drop.prevent.stop="onDrop"
@contextmenu.stop="onContextmenu" @contextmenu.stop="onContextmenu"
> >
<div ref="contents"> <MkInfo v-if="!store.r.readDriveTip.value" closable @close="closeTip()"><div v-html="i18n.ts.driveAboutTip"></div></MkInfo>
<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" ref="foldersContainer" :class="$style.folders">
<div v-show="foldersPaginator.items.value.length > 0" ref="foldersContainer" :class="$style.folders"> <XFolder
<XFolder v-for="(f, i) in foldersPaginator.items.value"
v-for="(f, i) in foldersPaginator.items.value" :key="f.id"
:key="f.id" v-anim="i"
v-anim="i" :class="$style.folder"
:class="$style.folder" :folder="f"
:folder="f" :selectMode="select === 'folder'"
:selectMode="select === 'folder'" :isSelected="selectedFolders.some(x => x.id === f.id)"
:isSelected="selectedFolders.some(x => x.id === f.id)" @chosen="chooseFolder"
@chosen="chooseFolder" @unchose="unchoseFolder"
@unchose="unchoseFolder" @move="move"
@move="move" @upload="upload"
@upload="upload" @removeFile="removeFile"
@removeFile="removeFile" @removeFolder="removeFolder"
@removeFolder="removeFolder" @dragstart="isDragSource = true"
@dragstart="isDragSource = true" @dragend="isDragSource = false"
@dragend="isDragSource = false" />
/> <!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid -->
<!-- SEE: https://stackoverflow.com/questions/18744164/flex-box-align-last-row-to-grid --> <div v-for="(n, i) in 16" :key="i" :class="$style.padding"></div>
<div v-for="(n, i) in 16" :key="i" :class="$style.padding"></div> <MkButton v-if="foldersPaginator.canFetchOlder" ref="moreFolders" @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
<MkButton v-if="foldersPaginator.canFetchOlder" ref="moreFolders" @click="foldersPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton> </div>
</div>
<div v-show="filesPaginator.items.value.length > 0" ref="filesContainer">
<div v-show="filesPaginator.items.value.length > 0" ref="filesContainer"> <MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()">
<MkStickyContainer v-for="(item, i) in filesTimeline" :key="item.date.toISOString()"> <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 }}/{{ item.date.getDate() }}</span> </div>
</div> </template>
</template>
<div :class="$style.files">
<div :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" :file="file"
:file="file" :folder="folder"
:folder="folder" :selectMode="select === 'file'"
:selectMode="select === 'file'" :isSelected="selectedFiles.some(x => x.id === file.id)"
:isSelected="selectedFiles.some(x => x.id === file.id)" @chosen="chooseFile"
@chosen="chooseFile" @dragstart="isDragSource = true"
@dragstart="isDragSource = true" @dragend="isDragSource = false"
@dragend="isDragSource = false" />
/> </div>
</div> </MkStickyContainer>
</MkStickyContainer> <MkButton v-show="filesPaginator.canFetchOlder" ref="loadMoreFiles" @click="filesPaginator.fetchOlder()">{{ i18n.ts.loadMore }}</MkButton>
<MkButton v-show="filesPaginator.canFetchOlder" ref="loadMoreFiles" @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-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">{{ 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"><strong>{{ i18n.ts.emptyDrive }}</strong><br/>{{ i18n.ts['empty-drive-description'] }}</div> <div v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</div>
<div v-if="!draghover && folder != null">{{ i18n.ts.emptyFolder }}</div>
</div>
</div> </div>
<MkLoading v-if="fetching"/>
</div> </div>
<MkLoading v-if="fetching"/>
<div v-if="draghover" :class="$style.dropzone"></div> <div v-if="draghover" :class="$style.dropzone"></div>
</MkStickyContainer> </MkStickyContainer>
</template> </template>
@ -712,9 +710,6 @@ onBeforeUnmount(() => {
} }
.main { .main {
flex: 1;
overflow: auto;
padding: var(--MI-margin);
user-select: none; user-select: none;
&.fetching { &.fetching {
@ -733,6 +728,15 @@ onBeforeUnmount(() => {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
grid-gap: 12px; grid-gap: 12px;
padding: var(--MI-margin);
}
.date {
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 {