chamomind/jws-frontend
chamomind/jws-frontend
7
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
v-model="splitterModel"
:limits="[0, 100]"
style="width: 100%"
class="col"
before-class="overflow-hidden"
after-class="overflow-hidden"
@ -610,13 +609,12 @@ watch(
label-key="name"
children-key="branch"
v-model:expanded="expandedTree"
color="info"
selected-color="primary"
color="transparent"
style="color: var(--foreground)"
>
<template #default-header="{ node }">
<div
class="column full-width"
class="column full-width q-py-sm"
@click.stop="
() => {
if (
@ -660,7 +658,18 @@ watch(
<div
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
class="row q-gutter-xs items-center no-wrap"
@click.stop
@ -671,7 +680,8 @@ watch(
@click.stop="
triggerCreate('subBranch', node.id, node.code)
"
icon="mdi-file-plus-outline"
icon="mdi-file-plus"
class="app-text-muted-2"
size="sm"
dense
round
@ -681,6 +691,7 @@ watch(
<q-btn
:id="`view-detail-btn-${node.name}`"
icon="mdi-dots-vertical"
class="app-text-muted-2"
size="sm"
dense
round
@ -832,10 +843,6 @@ watch(
</q-btn>
</div>
</div>
<div class="row col items-center app-text-muted">
{{ node.code }}
</div>
</div>
</template>
</q-tree>
@ -1745,14 +1752,28 @@ watch(
}
:deep(i.q-icon.mdi.mdi-play.q-tree__arrow) {
color: var(--foreground);
color: hsl(var(--text-mute));
}
: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) {
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>