fix: เเก้ tooltip เป็น componet
This commit is contained in:
Net
parent
c7f9817028
commit
4dcb1589e7
2 changed files with 145 additions and 128 deletions
136
src/components/TooltipComponet.vue
Normal file
136
src/components/TooltipComponet.vue
Normal file
|
|
@ -0,0 +1,136 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
defineProps<{
|
||||||
|
imgSrc: string;
|
||||||
|
}>();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="tooltip" :class="{ 'dark-tooltip': $q.dark.isActive }">
|
||||||
|
<q-btn
|
||||||
|
unelevated
|
||||||
|
class="color-btn-icon"
|
||||||
|
size="10px"
|
||||||
|
round
|
||||||
|
icon="mdi-exclamation"
|
||||||
|
:class="{ 'dark-btn-icon': $q.dark.isActive }"
|
||||||
|
></q-btn>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="tooltip-text"
|
||||||
|
:class="{ 'dark-tooltip-text': $q.dark.isActive }"
|
||||||
|
>
|
||||||
|
<q-img
|
||||||
|
class="q-mt-md"
|
||||||
|
:src="`/${imgSrc}${$q.dark.isActive ? 'dark' : 'light'}.png`"
|
||||||
|
width="60%"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="box-content"
|
||||||
|
:class="{ 'dack-box-content': $q.dark.isActive }"
|
||||||
|
>
|
||||||
|
<div class="column justify-center" style="height: 100%">
|
||||||
|
<div class="col-4">{{ $t('branchNoMainOfficeYet') }}</div>
|
||||||
|
<div class="col-4 q-mb-md q-px-md">
|
||||||
|
<div
|
||||||
|
class="content-text q-pa-sm"
|
||||||
|
:class="{ 'dack-content-text': $q.dark.isActive }"
|
||||||
|
>
|
||||||
|
{{ $t('branchClickToCreateMainOffice') }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.box-content {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 45%;
|
||||||
|
background: var(--_bg-box-content);
|
||||||
|
bottom: 0;
|
||||||
|
border-bottom-left-radius: 10px;
|
||||||
|
border-bottom-right-radius: 10px;
|
||||||
|
|
||||||
|
.content-text {
|
||||||
|
color: var(--_color-box-content-text);
|
||||||
|
background: var(--_bg-box-content-text);
|
||||||
|
border-radius: 6px;
|
||||||
|
|
||||||
|
&.dack-content-text {
|
||||||
|
border: 1px solid var(--brand-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.dack-box-content {
|
||||||
|
border: 1px solid var(--gray-7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
&.dark-tooltip {
|
||||||
|
--_bg-box-content: var(--gray-9);
|
||||||
|
--_bg-tooltip-branch: var(--gray-11);
|
||||||
|
--_bg-tooltip-branch-arrow: var(--_bg-box-content);
|
||||||
|
--_bg-box-content-text: var(--gray-11);
|
||||||
|
--_color-box-content-text: var(--gray-0);
|
||||||
|
--_main-page-branch-tooltip: 100.5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip-text {
|
||||||
|
&.dark-tooltip-text {
|
||||||
|
border: 1px solid var(--gray-7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltip-text {
|
||||||
|
visibility: hidden;
|
||||||
|
width: 250px;
|
||||||
|
height: 200px;
|
||||||
|
background-color: var(--_bg-tooltip-branch);
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 5px 0;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
bottom: -165px;
|
||||||
|
left: -265px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip .tooltip-text::after {
|
||||||
|
content: '';
|
||||||
|
z-index: -99;
|
||||||
|
position: absolute;
|
||||||
|
top: 7%;
|
||||||
|
left: var(--_main-page-branch-tooltip);
|
||||||
|
border-width: 8px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: var(--_bg-tooltip-branch-arrow) transparent transparent
|
||||||
|
transparent;
|
||||||
|
transform: rotate(270deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip:hover .tooltip-text {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-btn-icon {
|
||||||
|
--_bg-color-btn-icon: var(--blue-5-hsl);
|
||||||
|
transform: rotate(180deg);
|
||||||
|
color: var(--gray-0);
|
||||||
|
background: hsl(var(--_bg-color-btn-icon));
|
||||||
|
|
||||||
|
&.dark-btn-icon {
|
||||||
|
--_bg-color-btn-icon: var(--surface-0);
|
||||||
|
border: 2px solid;
|
||||||
|
border-color: var(--brand-1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
|
|
||||||
import AppBox from 'components/app/AppBox.vue';
|
import AppBox from 'components/app/AppBox.vue';
|
||||||
|
import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
|
||||||
|
import StatCardComponet from 'components/01_branch-management/StatCardComponet.vue';
|
||||||
|
import TooltipComponet from 'src/components/TooltipComponet.vue';
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
|
|
@ -8,47 +10,15 @@ import AppBox from 'components/app/AppBox.vue';
|
||||||
{{ $t('branchManagement') }}
|
{{ $t('branchManagement') }}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<app-box>
|
||||||
|
<stat-card-componet amount="10" label="สาขาใหญ่" />
|
||||||
|
</app-box>
|
||||||
|
|
||||||
<app-box bordered style="width: 100%; height: 500px">
|
<app-box bordered style="width: 100%; height: 500px">
|
||||||
<div class="column" style="height: 100%">
|
<div class="column" style="height: 100%">
|
||||||
<div class="col-1 self-end">
|
<div class="col-1 self-end">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="tooltip" :class="{ 'dark-tooltip': $q.dark.isActive }">
|
<tooltip-componet imgSrc="img-table-" />
|
||||||
<q-btn
|
|
||||||
unelevated
|
|
||||||
class="color-btn-icon"
|
|
||||||
size="10px"
|
|
||||||
round
|
|
||||||
icon="mdi-exclamation"
|
|
||||||
:class="{ 'dark-btn-icon': $q.dark.isActive }"
|
|
||||||
></q-btn>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="tooltip-text"
|
|
||||||
:class="{ 'dark-tooltip-text': $q.dark.isActive }"
|
|
||||||
>
|
|
||||||
<q-img
|
|
||||||
class="q-mt-md"
|
|
||||||
:src="`/img-table-${$q.dark.isActive ? 'dark' : 'light'}.png`"
|
|
||||||
width="60%"
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
class="box-content"
|
|
||||||
:class="{ 'dack-box-content': $q.dark.isActive }"
|
|
||||||
>
|
|
||||||
<div class="column justify-center" style="height: 100%">
|
|
||||||
<div class="col-4">{{ $t('branchNoMainOfficeYet') }}</div>
|
|
||||||
<div class="col-4 q-mb-md q-px-md">
|
|
||||||
<div
|
|
||||||
class="content-text q-pa-sm"
|
|
||||||
:class="{ 'dack-content-text': $q.dark.isActive }"
|
|
||||||
>
|
|
||||||
{{ $t('branchClickToCreateMainOffice') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -70,93 +40,4 @@ import AppBox from 'components/app/AppBox.vue';
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped></style>
|
||||||
.box-content {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 45%;
|
|
||||||
background: var(--_bg-box-content);
|
|
||||||
bottom: 0;
|
|
||||||
border-bottom-left-radius: 10px;
|
|
||||||
border-bottom-right-radius: 10px;
|
|
||||||
|
|
||||||
.content-text {
|
|
||||||
color: var(--_color-box-content-text);
|
|
||||||
background: var(--_bg-box-content-text);
|
|
||||||
border-radius: 6px;
|
|
||||||
|
|
||||||
&.dack-content-text {
|
|
||||||
border: 1px solid var(--brand-1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dack-box-content {
|
|
||||||
border: 1px solid var(--gray-7);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
|
|
||||||
&.dark-tooltip {
|
|
||||||
--_bg-box-content: var(--gray-9);
|
|
||||||
--_bg-tooltip-branch: var(--gray-11);
|
|
||||||
--_bg-tooltip-branch-arrow: var(--_bg-box-content);
|
|
||||||
--_bg-box-content-text: var(--gray-11);
|
|
||||||
--_color-box-content-text: var(--gray-0);
|
|
||||||
--_main-page-branch-tooltip: 100.5%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip-text {
|
|
||||||
&.dark-tooltip-text {
|
|
||||||
border: 1px solid var(--gray-7);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip .tooltip-text {
|
|
||||||
visibility: hidden;
|
|
||||||
width: 250px;
|
|
||||||
height: 200px;
|
|
||||||
background-color: var(--_bg-tooltip-branch);
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 10px;
|
|
||||||
padding: 5px 0;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
bottom: -165px;
|
|
||||||
left: -265px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip .tooltip-text::after {
|
|
||||||
content: '';
|
|
||||||
z-index: -99;
|
|
||||||
position: absolute;
|
|
||||||
top: 7%;
|
|
||||||
left: var(--_main-page-branch-tooltip);
|
|
||||||
border-width: 8px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: var(--_bg-tooltip-branch-arrow) transparent transparent
|
|
||||||
transparent;
|
|
||||||
transform: rotate(270deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip:hover .tooltip-text {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-btn-icon {
|
|
||||||
--_bg-color-btn-icon: var(--blue-5-hsl);
|
|
||||||
transform: rotate(180deg);
|
|
||||||
color: var(--gray-0);
|
|
||||||
background: hsl(var(--_bg-color-btn-icon));
|
|
||||||
|
|
||||||
&.dark-btn-icon {
|
|
||||||
--_bg-color-btn-icon: var(--surface-0);
|
|
||||||
border: 2px solid;
|
|
||||||
border-color: var(--brand-1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue