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

refactor: handle color

Browse source
This commit is contained in:
Thanaphon Frappet 2024-10-30 14:10:59 +07:00
parent de7ebad654
commit 52cf5345a0
2 changed files with 28 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

16
src/pages/05_quotation/QuotationForm.vue
View file

@ -900,7 +900,7 @@ const view = ref<View>(View.Quotation);
</div> </div>
<header class="row q-px-md q-py-sm items-center full"> <header class="row q-px-md q-py-sm items-center full">
<div style="flex: 1" class="row items-center"> <div stylviewe="flex: 1" class="row items-center">
<q-img src="/icons/favicon-512x512.png" width="3rem" /> <q-img src="/icons/favicon-512x512.png" width="3rem" />
<span class="column text-h6 text-bold q-ml-md"> <span class="column text-h6 text-bold q-ml-md">
{{ $t('quotation.title') }} {{ $t('quotation.title') }}
@ -1002,7 +1002,6 @@ const view = ref<View>(View.Quotation);
view === View.Quotation || view === View.Quotation ||
view === View.Accepted || view === View.Accepted ||
view === View.Invoice || view === View.Invoice ||
view === View.Payment ||
view === View.Receipt view === View.Receipt
" "
> >
@ -1221,7 +1220,7 @@ const view = ref<View>(View.Quotation);
<div class="surface-1 q-pa-md full-width"> <div class="surface-1 q-pa-md full-width">
<template v-if="true"> <template v-if="true">
<QuotationFormInfo <QuotationFormInfo
:info-type="view" :view="view"
v-model:pay-type="quotationFormData.payCondition" v-model:pay-type="quotationFormData.payCondition"
v-model:pay-bank="payBank" v-model:pay-bank="payBank"
v-model:pay-split-count="quotationFormData.paySplitCount" v-model:pay-split-count="quotationFormData.paySplitCount"
@ -1292,7 +1291,10 @@ const view = ref<View>(View.Quotation);
</q-expansion-item> </q-expansion-item>
</template> </template>
<template v-else> <template v-else>
<PaymentForm :data="quotationFormState.source" /> <PaymentForm
v-if="view !== View.InvoicePre"
:data="quotationFormState.source"
/>
<q-expansion-item <q-expansion-item
for="item-up" for="item-up"
@ -1342,7 +1344,11 @@ const view = ref<View>(View.Quotation);
<template v-slot:body="props"> <template v-slot:body="props">
<q-tr :props="props"> <q-tr :props="props">
<q-td auto-width> <q-td auto-width>
<q-checkbox v-model="props.selected" /> <q-checkbox
:disable="props.row.invoice"
v-model="props.selected"
v-if="!props.row.invoice"
/>
</q-td> </q-td>
<q-td <q-td
v-for="col in props.cols" v-for="col in props.cols"

18
src/pages/05_quotation/QuotationFormInfo.vue
View file

@ -185,7 +185,15 @@ watch(
</script> </script>
<template> <template>
<AppBox no-padding bordered class="row main-color"> <AppBox
no-padding
bordered
class="row main-color"
:class="{
'invoice-color': view === View.Invoice,
'receipt-color': view === View.Receipt,
}"
>
<div class="col bordered-r"> <div class="col bordered-r">
<div class="bordered-b q-px-md q-py-sm row bg-color-light items-center"> <div class="bordered-b q-px-md q-py-sm row bg-color-light items-center">
<div class="icon-wrapper bg-color q-mr-sm"> <div class="icon-wrapper bg-color q-mr-sm">
@ -437,6 +445,14 @@ watch(
--_color: var(--yellow-7-hsl); --_color: var(--yellow-7-hsl);
} }
.invoice-color {
--_color: var(--purple-9-hsl);
}
.receipt-color {
--_color: var(--green-6-hsl);
}
.bg-color { .bg-color {
color: white; color: white;
background: hsla(var(--_color)); background: hsla(var(--_color));