feat: Personnel => card status, locale
This commit is contained in:
puriphatt
parent
d9c3e8a53a
commit
0585eb1f6b
3 changed files with 109 additions and 67 deletions
BIN
public/profile.png
Normal file
BIN
public/profile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
|
|
@ -12,6 +12,7 @@ defineProps<{
|
|||
male?: boolean;
|
||||
female?: boolean;
|
||||
disabled?: boolean;
|
||||
img?: string;
|
||||
}[];
|
||||
}>();
|
||||
|
||||
|
|
@ -19,7 +20,12 @@ const status = ref(false);
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<div class="person-container">
|
||||
<div
|
||||
class="person-container"
|
||||
:style="`grid-template-columns: repeat( ${
|
||||
$q.screen.gt.sm ? '4, 1fr' : $q.screen.gt.xs ? '2, 1fr' : '1, 1fr'
|
||||
})`"
|
||||
>
|
||||
<AppBox
|
||||
bordered
|
||||
class="column person-box"
|
||||
|
|
@ -75,12 +81,26 @@ const status = ref(false);
|
|||
</q-btn>
|
||||
</div>
|
||||
|
||||
<AppCircle class="surface-2 avatar q-mb-md" bordered>Avatar</AppCircle>
|
||||
<div style="position: relative">
|
||||
<AppCircle
|
||||
bordered
|
||||
class="avatar"
|
||||
style="border: 2px solid var(--border-color)"
|
||||
>
|
||||
<q-img :src="`/${v.img}`" width="100%" />
|
||||
<div class="status-circle">
|
||||
<q-icon
|
||||
:name="`mdi-${v.disabled ? 'close' : 'check'}`"
|
||||
:style="`color:${v.disabled ? 'var(--border-color)' : 'white'}`"
|
||||
/>
|
||||
</div>
|
||||
</AppCircle>
|
||||
</div>
|
||||
|
||||
<span class="items-start row">
|
||||
<span class="items-center row q-my-sm">
|
||||
{{ v.name }}
|
||||
<iconify-icon
|
||||
class="q-pl-sm"
|
||||
class="q-px-sm"
|
||||
:class="{
|
||||
'symbol-gender': v.male || v.female,
|
||||
'symbol-gender__male': !v.disabled && v.male,
|
||||
|
|
@ -90,9 +110,10 @@ const status = ref(false);
|
|||
:icon="`material-symbols:${v.male ? 'male' : 'female'}`"
|
||||
width="20px"
|
||||
/>
|
||||
<iconify-icon class="locale" icon="circle-flags:th" />
|
||||
</span>
|
||||
<span
|
||||
class="badge"
|
||||
class="badge q-px-sm"
|
||||
:class="{
|
||||
'bg-gender': v.male || v.female,
|
||||
'bg-gender__male': !v.disabled && v.male,
|
||||
|
|
@ -133,21 +154,98 @@ const status = ref(false);
|
|||
<style scoped>
|
||||
.person-box {
|
||||
background-color: var(--surface-2);
|
||||
box-shadow: var(--shadow-0);
|
||||
border-radius: var(--radius-2) !important;
|
||||
|
||||
&.person-box__disble {
|
||||
opacity: 0.4;
|
||||
|
||||
.status-circle {
|
||||
background-color: var(--surface-2);
|
||||
}
|
||||
|
||||
.locale {
|
||||
filter: grayscale();
|
||||
}
|
||||
}
|
||||
|
||||
& .bg-gender {
|
||||
color: hsla(var(--_fg));
|
||||
background-color: hsl(var(--_bg));
|
||||
|
||||
&.bg-gender__disable {
|
||||
--_bg: var(--stone-6-hsl);
|
||||
background-color: hsla(var(--_bg) / 0.3);
|
||||
}
|
||||
|
||||
&.bg-gender__light {
|
||||
color: unset;
|
||||
background-color: hsla(var(--_bg) / 0.1);
|
||||
}
|
||||
|
||||
&.bg-gender__male {
|
||||
--_fg: 0 100 100%;
|
||||
--_bg: var(--gender-male);
|
||||
}
|
||||
|
||||
&.bg-gender__female {
|
||||
--_fg: 0 100 100%;
|
||||
--_bg: var(--gender-female);
|
||||
}
|
||||
}
|
||||
|
||||
& .symbol-gender {
|
||||
color: hsla(var(--_fg));
|
||||
|
||||
&.symbol-gender__disable {
|
||||
--_fg: var(--stone-6-hsl);
|
||||
}
|
||||
|
||||
&.symbol-gender__male {
|
||||
--_fg: var(--gender-male);
|
||||
}
|
||||
|
||||
&.symbol-gender__female {
|
||||
--_fg: var(--gender-female);
|
||||
}
|
||||
}
|
||||
|
||||
& .person-detail {
|
||||
box-shadow: inset 0em -5px transparent;
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--size-2);
|
||||
|
||||
& > * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > :first-child {
|
||||
font-size: var(--font-size-0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .status-circle {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
background-color: var(--teal-6);
|
||||
border: 2px solid var(--border-color);
|
||||
bottom: 0.6rem;
|
||||
right: 0.6rem;
|
||||
position: absolute;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
--_hover: hsl(var(--gender-male));
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-2);
|
||||
|
||||
& .person-detail {
|
||||
--_hover: hsl(var(--_bg));
|
||||
box-shadow: inset 0em -5px hsl(var(--_bg));
|
||||
}
|
||||
}
|
||||
|
|
@ -155,7 +253,6 @@ const status = ref(false);
|
|||
|
||||
.person-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: var(--size-6);
|
||||
}
|
||||
|
||||
|
|
@ -167,63 +264,6 @@ const status = ref(false);
|
|||
display: inline-block;
|
||||
border-radius: var(--radius-6);
|
||||
background-color: var(--surface-2);
|
||||
padding: 0 var(--size-6);
|
||||
}
|
||||
|
||||
.person-detail {
|
||||
display: grid;
|
||||
flex-grow: 1;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: var(--size-2);
|
||||
|
||||
& > * {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > :first-child {
|
||||
font-size: var(--font-size-0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-gender {
|
||||
color: hsla(var(--_fg));
|
||||
background-color: hsl(var(--_bg));
|
||||
|
||||
&.bg-gender__disable {
|
||||
--_bg: var(--stone-6-hsl);
|
||||
background-color: hsla(var(--_bg) / 0.3);
|
||||
}
|
||||
|
||||
&.bg-gender__light {
|
||||
color: unset;
|
||||
background-color: hsla(var(--_bg) / 0.1);
|
||||
}
|
||||
|
||||
&.bg-gender__male {
|
||||
--_fg: 0 100 100%;
|
||||
--_bg: var(--blue-5-hsl);
|
||||
}
|
||||
|
||||
&.bg-gender__female {
|
||||
--_fg: 0 100 100%;
|
||||
--_bg: var(--pink-7-hsl);
|
||||
}
|
||||
}
|
||||
|
||||
.symbol-gender {
|
||||
color: hsla(var(--_fg));
|
||||
|
||||
&.symbol-gender__disable {
|
||||
--_fg: var(--stone-6-hsl);
|
||||
}
|
||||
|
||||
&.symbol-gender__male {
|
||||
--_fg: var(--blue-5-hsl);
|
||||
}
|
||||
|
||||
&.symbol-gender__female {
|
||||
--_fg: var(--pink-7-hsl);
|
||||
}
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ const person = [
|
|||
{ label: 'ตำแหน่ง', value: '32 ปี' },
|
||||
],
|
||||
male: true,
|
||||
img: 'profile.png',
|
||||
},
|
||||
{
|
||||
name: 'นางสาวสุขใจ แสนดี',
|
||||
|
|
@ -44,6 +45,7 @@ const person = [
|
|||
],
|
||||
male: true,
|
||||
disabled: true,
|
||||
img: 'profile.png',
|
||||
},
|
||||
{
|
||||
name: 'นางสาวสุขใจ แสนดี',
|
||||
|
|
@ -145,7 +147,7 @@ const selectorList = [
|
|||
|
||||
<!-- main -->
|
||||
<AppBox bordered style="width: 100%; height: 580px; overflow-y: auto">
|
||||
<!-- <PersonCard :list="person" class="q-mb-md" /> -->
|
||||
<PersonCard :list="person" class="q-mb-md" />
|
||||
<div class="column" style="height: 100%">
|
||||
<div class="col-1 self-end">
|
||||
<div class="row">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue