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

refactor: add border

Browse source
This commit is contained in:
Net 2024-08-20 09:39:18 +07:00
parent f8e39d21b2
commit 709c98e08c
1 changed files with 82 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

110
src/components/03_customer-management/TableEmpoloyee.vue
View file

@ -98,36 +98,52 @@ const prop = withDefaults(
<div
style="width: 50px; display: flex; margin-bottom: var(--size-2)"
>
<div class="full-width full-height">
<q-avatar size="md">
<q-img
:src="
props.row.profileImageUrl || '/images/employee-avatar.png'
"
class="text-center"
:ratio="1"
>
<template #error>
<span>
<q-img
class="text-center"
:ratio="1"
src="/images/employee-avatar.png"
/>
</span>
</template>
</q-img>
<div
style="
border-radius: 50%;
border-style: solid;
border-width: 2px;
border-color: hsl(var(--pink-6-hsl));
padding: 3px;
"
>
<div class="full-width full-height">
<q-avatar size="md">
<q-img
:src="
props.row.profileImageUrl ||
'/images/employee-avatar.png'
"
class="text-center"
:ratio="1"
>
<template #error>
<span>
<q-img
class="text-center"
:ratio="1"
src="/images/employee-avatar.png"
/>
</span>
</template>
</q-img>
<q-badge
class="absolute-bottom-right no-padding"
style="border-radius: 50%; min-width: 8px; min-height: 8px"
:style="{
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
}"
></q-badge>
</q-avatar>
<q-badge
class="absolute-bottom-right no-padding"
style="
border-radius: 50%;
min-width: 8px;
min-height: 8px;
"
:style="{
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
}"
></q-badge>
</q-avatar>
</div>
</div>
</div>
<div class="col">
<div class="col">
{{ `${props.row.firstName} ${props.row.lastName}` || '-' }}
@ -346,4 +362,42 @@ const prop = withDefaults(
</q-table>
</template>
<style scoped></style>
<style scoped>
.branch-card__icon {
background-color: hsla(var(--_branch-card-bg) / 0.15);
border-radius: 50%;
padding: var(--size-1);
position: relative;
transform: rotate(45deg);
&::after {
content: ' ';
display: block;
block-size: 0.5rem;
aspect-ratio: 1;
position: absolute;
border-radius: 50%;
right: -0.1rem;
top: calc(50% - 0.25rem);
bottom: calc(50% - 0.25rem);
background-color: hsla(var(--_branch-status-color) / 1);
}
& :deep(.q-avatar) {
transform: rotate(-45deg);
color: hsla(var(--_branch-card-bg) / 1);
}
}
& .symbol-gender {
color: hsla(var(--_fg));
&.symbol-gender__male {
--_fg: var(--gender-male);
}
&.symbol-gender__female {
--_fg: var(--gender-female);
}
}
</style>