johan/FoundKey
1
0
Fork 0
forked from FoundKeyGang/FoundKey
Code Issues Pull requests Packages Projects Releases Wiki Activity

client: center drive loading ui

Browse source
This commit is contained in:
Johann150 2023-03-26 10:10:11 +02:00
parent 7401a0b400
commit aac6a93bae
Signed by untrusted user: Johann150
GPG key ID: 9EE6577A2A06F8F1
1 changed files with 32 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

63
packages/client/src/components/drive.vue
View file

@ -38,7 +38,6 @@
<MkPagination
ref="paginationElem"
:pagination="pagination"
class="contents"
>
<template #empty>
<p v-if="folder == null" class="empty"><strong>{{ i18n.ts.emptyDrive }}</strong></p>
@ -46,34 +45,36 @@
</template>
<template #default="{ items }">
<template v-for="(f, i) in items">
<XFile
v-if="'size' in f"
:key="f.id"
v-anim="i"
:file="f"
:select-mode="select !== 'folder'"
:is-selected="selected.some(x => x.id === f.id)"
@chosen="choose"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
/>
<XFolder
v-else
:key="f.id"
v-anim="i"
:folder="f"
:select-mode="select !== 'file'"
:is-selected="selected.some(x => x.id === f.id)"
@chosen="choose"
@move="move"
@upload="upload"
@removeFile="removeFile"
@removeFolder="removeFolder"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
/>
</template>
<div class="contents">
<template v-for="(f, i) in items">
<XFile
v-if="'size' in f"
:key="f.id"
v-anim="i"
:file="f"
:select-mode="select !== 'folder'"
:is-selected="selected.some(x => x.id === f.id)"
@chosen="choose"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
/>
<XFolder
v-else
:key="f.id"
v-anim="i"
:folder="f"
:select-mode="select !== 'file'"
:is-selected="selected.some(x => x.id === f.id)"
@chosen="choose"
@move="move"
@upload="upload"
@removeFile="removeFile"
@removeFolder="removeFolder"
@dragstart="isDragSource = true"
@dragend="isDragSource = false"
/>
</template>
</div>
</template>
</MkPagination>
</div>
@ -631,13 +632,13 @@ onBeforeUnmount(() => {
height: calc(100% - 38px - 100px);
}
> .contents {
.contents {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: .5em;
}
> .empty {
.empty {
padding: 16px;
text-align: center;
pointer-events: none;