refactor: UI update in folder level
This commit is contained in:
parent
468c5f7770
commit
917312f9f8
1 changed files with 73 additions and 4 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue