chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: 01 tree (active, color, layout)

Browse source
This commit is contained in:
puriphatt 2024-07-18 11:01:19 +00:00
parent aa5ad5ca70
commit ad8697d181
1 changed files with 34 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

47
src/pages/01_branch-management/MainPage.vue
View file

@ -561,7 +561,6 @@ watch(
<q-splitter <q-splitter
v-model="splitterModel" v-model="splitterModel"
:limits="[0, 100]" :limits="[0, 100]"
style="width: 100%"
class="col" class="col"
before-class="overflow-hidden" before-class="overflow-hidden"
after-class="overflow-hidden" after-class="overflow-hidden"
@ -610,13 +609,12 @@ watch(
label-key="name" label-key="name"
children-key="branch" children-key="branch"
v-model:expanded="expandedTree" v-model:expanded="expandedTree"
color="info" color="transparent"
selected-color="primary"
style="color: var(--foreground)" style="color: var(--foreground)"
> >
<template #default-header="{ node }"> <template #default-header="{ node }">
<div <div
class="column full-width" class="column full-width q-py-sm"
@click.stop=" @click.stop="
() => { () => {
if ( if (
@ -660,7 +658,18 @@ watch(
<div <div
class="row col items-center justify-between full-width no-wrap" class="row col items-center justify-between full-width no-wrap"
> >
<span>{{ node.name }}</span> <span
:class="{
'text-weight-bold': expandedTree[0] === node.id,
'app-text-info': expandedTree[0] === node.id,
}"
>
{{ node.name }}
<div class="app-text-muted text-caption">
{{ node.code }}
</div>
</span>
<div <div
class="row q-gutter-xs items-center no-wrap" class="row q-gutter-xs items-center no-wrap"
@click.stop @click.stop
@ -671,7 +680,8 @@ watch(
@click.stop=" @click.stop="
triggerCreate('subBranch', node.id, node.code) triggerCreate('subBranch', node.id, node.code)
" "
icon="mdi-file-plus-outline" icon="mdi-file-plus"
class="app-text-muted-2"
size="sm" size="sm"
dense dense
round round
@ -681,6 +691,7 @@ watch(
<q-btn <q-btn
:id="`view-detail-btn-${node.name}`" :id="`view-detail-btn-${node.name}`"
icon="mdi-dots-vertical" icon="mdi-dots-vertical"
class="app-text-muted-2"
size="sm" size="sm"
dense dense
round round
@ -832,10 +843,6 @@ watch(
</q-btn> </q-btn>
</div> </div>
</div> </div>
<div class="row col items-center app-text-muted">
{{ node.code }}
</div>
</div> </div>
</template> </template>
</q-tree> </q-tree>
@ -1745,14 +1752,28 @@ watch(
} }
:deep(i.q-icon.mdi.mdi-play.q-tree__arrow) { :deep(i.q-icon.mdi.mdi-play.q-tree__arrow) {
color: var(--foreground); color: hsl(var(--text-mute));
} }
:deep(.q-tree__node-header:before) { :deep(.q-tree__node-header:before) {
color: var(--foreground); color: hsl(var(--text-mute));
} }
:deep(.q-tree__node-header.relative-position.row.no-wrap.items-center) { :deep(.q-tree__node-header.relative-position.row.no-wrap.items-center) {
padding-block: 8px; padding-block: 0px;
}
:deep(.q-tree__node-header.relative-position.row.no-wrap.items-center):has(
i.q-icon.mdi.mdi-play.q-tree__arrow
):hover {
background-color: hsla(var(--info-bg) / 0.1);
}
:deep(
.q-tree__node-header.relative-position.row.no-wrap.items-center.q-tree__node--link.q-hoverable.q-focusable:has(
i.q-icon.mdi.mdi-play.q-tree__arrow.q-tree__arrow--rotate
)
) {
background-color: hsla(var(--info-bg) / 0.1);
} }
</style> </style>