chamomind/jws-frontend
chamomind/jws-frontend
6
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 <div
style="width: 50px; display: flex; margin-bottom: var(--size-2)" style="width: 50px; display: flex; margin-bottom: var(--size-2)"
> >
<div class="full-width full-height"> <div
<q-avatar size="md"> style="
<q-img border-radius: 50%;
:src=" border-style: solid;
props.row.profileImageUrl || '/images/employee-avatar.png' border-width: 2px;
" border-color: hsl(var(--pink-6-hsl));
class="text-center" padding: 3px;
:ratio="1" "
> >
<template #error> <div class="full-width full-height">
<span> <q-avatar size="md">
<q-img <q-img
class="text-center" :src="
:ratio="1" props.row.profileImageUrl ||
src="/images/employee-avatar.png" '/images/employee-avatar.png'
/> "
</span> class="text-center"
</template> :ratio="1"
</q-img> >
<template #error>
<span>
<q-img
class="text-center"
:ratio="1"
src="/images/employee-avatar.png"
/>
</span>
</template>
</q-img>
<q-badge <q-badge
class="absolute-bottom-right no-padding" class="absolute-bottom-right no-padding"
style="border-radius: 50%; min-width: 8px; min-height: 8px" style="
:style="{ border-radius: 50%;
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`, min-width: 8px;
}" min-height: 8px;
></q-badge> "
</q-avatar> :style="{
background: `var(--${props.row.status === 'INACTIVE' ? 'stone-5' : 'green-6'})`,
}"
></q-badge>
</q-avatar>
</div>
</div> </div>
</div> </div>
<div class="col"> <div class="col">
<div class="col"> <div class="col">
{{ `${props.row.firstName} ${props.row.lastName}` || '-' }} {{ `${props.row.firstName} ${props.row.lastName}` || '-' }}
@ -346,4 +362,42 @@ const prop = withDefaults(
</q-table> </q-table>
</template> </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>