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

13
src/components/BadgeComponent.vue
View file

@ -5,13 +5,24 @@ defineProps<{
title?: string; title?: string;
titleI18n?: string; titleI18n?: string;
hslaColor?: string; hslaColor?: string;
hslaBackground?: string;
hslaBorder?: string;
border?: boolean;
solid?: boolean;
transparency?: number;
}>(); }>();
</script> </script>
<template> <template>
<div <div
class="rounded q-px-sm flex-center" 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" /> <Icon :icon="icon || 'mdi-circle-medium'" style="margin-right: 0.25rem" />
{{ title || (!!titleI18n ? $t(titleI18n) : '-') }} {{ title || (!!titleI18n ? $t(titleI18n) : '-') }}