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

refactor: urgent quotation ui (#61)

Browse source
This commit is contained in:
Methapon Metanipat 2024-11-07 11:45:24 +07:00 • committed by GitHub
parent 4bfa5e8906
commit 3c743913db
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 50 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

64
src/components/05_quotation/QuotationCard.vue
View file

@ -32,27 +32,29 @@ defineEmits<{
</script>
<template>
<div
class="surface-1 rounded q-pa-xs quo-card bordered"
class="surface-1 rounded q-pa-sm quo-card bordered"
:class="{ 'urgent-card': urgent }"
>
<!-- SEC: header -->
<header class="row items-center no-wrap">
<q-img src="/images/quotation-avatar-border.png" width="2rem" />
<div class="column q-ml-sm relative-position" style="font-size: 12px">
<span>
{{ $t('general.itemNo', { msg: $t('quotation.title') }) }}
</span>
<span
class="text-caption row items-center"
:class="urgent ? 'code' : 'app-text-muted'"
>
{{ code }}
</span>
<div v-if="urgent" class="q-mr-sm" style="font-size: 90%">
<BadgeComponent
icon="mdi-fire"
:title="$t('general.urgent2')"
hsla-color="--gray-1-hsl"
hsla-background="--red-8-hsl"
solid
/>
</div>
<div v-if="urgent" class="tag q-px-xs q-ml-sm">
<q-icon name="mdi-fire" size="12px" />
<span>{{ $t('general.urgent2') }}</span>
<div class="q-mr-sm" style="font-size: 90%">
<BadgeComponent
:title="status"
hsla-color="--blue-6-hsl"
hsla-background="--blue-0-hsl"
hsla-border="--blue-1-hsl"
:border="urgent"
solid
/>
</div>
<nav class="col text-right">
@ -88,20 +90,30 @@ defineEmits<{
</nav>
</header>
<div class="ellipsis q-px-sm q-py-sm">
{{ title || '-' }}
<div class="ellipsis q-px-xs">
<b>{{ title || '-' }}</b>
<q-tooltip anchor="bottom start" self="top left">
{{ title || '-' }}
</q-tooltip>
</div>
<div
class="ellipsis q-px-xs q-mb-sm"
style="color: hsla(var(--gray-8-hsl) / 0.7); font-size: 80%"
>
{{ code || '-' }}
<q-tooltip anchor="bottom start" self="top left">
{{ title || '-' }}
</q-tooltip>
</div>
<!-- SEC: body -->
<section class="surface-1 rounded q-px-sm">
<article class="row no-wrap q-py-sm items-center" style="font-size: 90%">
<span class="app-text-muted q-pr-sm">{{ $t('general.status') }} :</span>
<BadgeComponent :title="status" hsla-color="--blue-6-hsl" />
</article>
<q-separator />
<section
class="rounded q-px-sm"
:class="{
'surface-1': urgent,
'surface-2': !urgent,
}"
>
<article class="row q-py-sm">
<div class="col-4 app-text-muted q-pr-sm">
{{ $t('quotation.customerName') }}
@ -178,8 +190,8 @@ span {
}
.urgent-card {
background-color: hsla(var(--red-3-hsl) / 0.2) !important;
border: 1px solid var(--red-6) !important;
background-color: hsla(var(--red-7-hsl) / 0.07) !important;
border: 0.5px solid var(--red-6) !important;
.code {
color: var(--red-6);

13
src/components/BadgeComponent.vue
View file

@ -5,13 +5,24 @@ defineProps<{
title?: string;
titleI18n?: string;
hslaColor?: string;
hslaBackground?: string;
hslaBorder?: string;
border?: boolean;
solid?: boolean;
transparency?: number;
}>();
</script>
<template>
<div
class="rounded q-px-sm flex-center"
:style="`color: hsla(var(${!!hslaColor ? hslaColor : '--green-6-hsl'}) / 0.8); background: hsla(var(${!!hslaColor ? hslaColor : '--green-6-hsl'}) / 0.1); `"
:style="{
color: `hsla(var(${hslaColor || '--green-6-hsl'}) / 1)`,
background: `hsla(var(${hslaBackground || hslaColor || '--green-6-hsl'}) / ${solid ? 1 : 0.15})`,
border: border
? `0.5px solid hsla(var(${hslaBorder || hslaBackground || hslaColor || '--green-6-hsl'}) / ${solid ? 1 : 0.15})`
: undefined,
}"
>
<Icon :icon="icon || 'mdi-circle-medium'" style="margin-right: 0.25rem" />
{{ title || (!!titleI18n ? $t(titleI18n) : '-') }}