refactor: UI update in folder level

This commit is contained in:
oat 2023-11-28 09:24:20 +07:00 committed by Methapon2001
parent 468c5f7770
commit 917312f9f8
No known key found for this signature in database
GPG key ID: 849924FEF46BD132

View file

@ -55,7 +55,9 @@ async function handleSubmit() {
<template>
<div class="q-mt-md">
<div class="q-gutter-md">
<span class="text-h6 text-weight-light" v-if="currentDept === 3"
>แฟมยอย</span>
<div class="q-gutter-md" v-if="currentDept < 3">
<div
:key="value.name"
v-for="value in currentFolder"
@ -65,10 +67,15 @@ async function handleSubmit() {
<q-card flat @click="() => getFolder(value.pathname)">
<q-card-section
class="column justify-center relative q-px-xl"
style="max-width: 220px"
style="max-width: 225px"
:title="value.name"
>
<q-icon :name="currentIcon" size="6em" color="primary" class="column justify-center relative q-px-md"/>
<q-icon
:name="currentIcon"
size="6em"
color="primary"
class="column justify-center relative q-px-lg"
/>
<div
class="absolute"
style="top: 0.5rem; right: 0.5rem"
@ -129,9 +136,65 @@ async function handleSubmit() {
</div>
</div>
</div>
<div class="q-gutter-md q-mt-sm" v-if="currentDept === 3">
<div
:key="value.name"
v-for="value in currentFolder"
class="inline-block"
>
<div class="box border-radius-inherit q-px-sm q-py-sm">
<q-card flat @click="() => getFolder(value.pathname)">
<q-td>
<q-icon :name="currentIcon" size="3em" color="primary" class="col" />
<span class="q-mx-md">{{ value.name }}</span>
<file-item-action
:editname="value.name"
:pathname="value.pathname"
@editname="
() => {
drawer = !drawer
drawerStatus = 'edit'
editPathname = value.pathname
}
"
/>
</q-td>
</q-card>
</div>
</div>
<div
class="inline-block"
v-if="props.action && currentDept < 4"
tabindex="0"
>
<div class="dashed border-radius-inherit q-px-lg q-py-sm">
<q-card
flat
@click="
() => {
drawer = !drawer
drawerStatus = 'create'
drawerFile = false
}
"
>
<q-td>
<q-icon :name="currentIcon" size="3em" color="primary" class="col" />
<q-btn round class="add-button-folder-level" color="white" size="6px">
<q-icon name="add" color="primary" size="1.2rem"></q-icon>
</q-btn>
<span class="q-mx-md">สราง{{ DEPT_NAME[currentDept] }}ใหม</span>
</q-td>
</q-card>
</div>
</div>
</div>
</div>
<div class="q-mt-md">
<div class="q-gutter-md">
<span class="text-h6 text-weight-light" v-if="currentDept > 2">เอกสาร</span>
<div class="q-gutter-md q-mt-xs">
<div
v-for="(value, index) in currentFile"
:key="value.title"
@ -314,6 +377,12 @@ async function handleSubmit() {
right: 45px;
background-color: white;
}
.add-button-folder-level {
position: absolute;
left: 30px;
top: 22px;
background-color: white;
}
.text-overflow-handle {
overflow: hidden;