fix: refs #7353 horizontal scroll #735

Merged
jorgep merged 7 commits from 7353-hotfix-fixUI into master 2024-09-20 13:49:04 +00:00
5 changed files with 58 additions and 64 deletions

View File

@ -415,7 +415,7 @@ function handleOnDataSaved(_, res) {
<QBtn
v-if="$props.rightSearch"
icon="filter_alt"
class="bg-vn-section-color q-ml-md"
class="bg-vn-section-color q-ml-sm"
Review

Había un espacio demasiado grande

Había un espacio demasiado grande
dense
@click="stateStore.toggleRightDrawer()"
/>
@ -502,8 +502,9 @@ function handleOnDataSaved(_, res) {
:key="index"
:title="btn.title"
:icon="btn.icon"
class="q-px-sm"
class="q-pa-xs"
Review

Lo mismo que arriba.

Lo mismo que arriba.
flat
dense
:class="
btn.isPrimary ? 'text-primary-light' : 'color-vn-text '
"
@ -745,10 +746,16 @@ es:
}
}
.q-table th {
padding: 0;
}
.q-table {
th {
padding: 0;
}
&__top {
padding: 12px 0px;
Review

Demasiado espacio.

Demasiado espacio.
top: 0;
}
}
.vnTable {
thead tr th {
position: sticky;
@ -757,9 +764,6 @@ es:
thead tr:first-child th {
top: 0;
}
.q-table__top {
top: 0;
}
tbody {
.q-checkbox {
display: flex;

View File

@ -135,7 +135,7 @@ onMounted(async () => {
});
</script>
<template>
<QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-md q-px-sm" dense>
<QBtn icon="vn:visible_columns" class="bg-vn-section-color q-mr-sm q-px-sm" dense>
Review

Demasiado espacio.

Demasiado espacio.
Review

y porque no xs? habría menos espacio o demasiado agobiante?

y porque no xs? habría menos espacio o demasiado agobiante?
<QPopupProxy ref="popupProxyRef">
<QCard class="column q-pa-md">
<QIcon name="info" size="sm" class="info-icon">

View File

@ -139,7 +139,11 @@ const columns = computed(() => [
</VnTable>
</template>
<style lang="scss" scoped>
.full-width .vn-row > * {
flex: 0.4;
.full-width .vn-row {
margin-bottom: 0;
flex-direction: row;
> * {
max-width: 125px;
}
}
</style>

View File

@ -132,7 +132,6 @@ const openTab = (id) =>
:table="{
'row-key': 'id',
selection: 'multiple',
'hide-bottom': true,
}"
default-mode="table"
:row-click="({ id }) => openTab(id)"

View File

@ -54,7 +54,6 @@ const columns = computed(() => [
label: t('salesTicketsTable.problems'),
name: 'totalProblems',
align: 'left',
columnFilter: false,
attrs: {
dense: true,
@ -65,7 +64,6 @@ const columns = computed(() => [
name: 'id',
field: 'id',
align: 'left',
columnFilter: {
component: 'number',
name: 'id',
@ -108,9 +106,7 @@ const columns = computed(() => [
{
label: t('salesTicketsTable.date'),
name: 'shippedDate',
style: { 'max-width': '100px' },
align: 'left',
columnFilter: {
component: 'date',
name: 'shippedDate',
@ -164,7 +160,6 @@ const columns = computed(() => [
label: t('salesTicketsTable.state'),
name: 'state',
align: 'left',
style: { 'max-width': '100px' },
columnFilter: {
component: 'select',
name: 'stateFk',
@ -193,7 +188,6 @@ const columns = computed(() => [
label: t('salesTicketsTable.zone'),
name: 'zoneFk',
align: 'left',
columnFilter: {
component: 'select',
name: 'zoneFk',
@ -210,8 +204,6 @@ const columns = computed(() => [
name: 'totalWithVat',
field: 'totalWithVat',
align: 'left',
style: { 'max-width': '75px' },
columnFilter: {
component: 'number',
name: 'totalWithVat',
@ -370,7 +362,7 @@ const openTab = (id) =>
</QCheckbox>
</template>
<template #column-totalProblems="{ row }">
<QTd class="no-padding" style="max-width: 60px">
<span>
<QIcon
v-if="row.isTaxDataChecked === 0"
name="vn:no036"
@ -424,46 +416,40 @@ const openTab = (id) =>
>
<QTooltip>{{ $t('salesTicketsTable.tooLittle') }}</QTooltip>
</QIcon>
</QTd>
</span>
</template>
<template #column-id="{ row }">
<QTd class="no-padding">
<span class="link" @click.stop.prevent>
{{ row.id }}
<TicketDescriptorProxy :id="row.id" />
</span>
</QTd>
<span class="link" @click.stop.prevent>
{{ row.id }}
<TicketDescriptorProxy :id="row.id" />
</span>
</template>
<template #column-clientFk="{ row }">
<QTd class="no-padding" @click.stop :title="row.nickname">
<span class="link">{{ row.nickname }}</span>
<div @click.stop :title="row.nickname">
<span class="link" v-text="row.nickname" />
<CustomerDescriptorProxy :id="row.clientFk" />
</QTd>
</div>
</template>
<template #column-salesPersonFk="{ row }">
<QTd class="no-padding" @click.stop :title="row.userName">
<div @click.stop :title="row.userName">
<span class="link" v-text="dashIfEmpty(row.userName)" />
<WorkerDescriptorProxy :id="row.salesPersonFk" />
</QTd>
</div>
</template>
<template #column-shippedDate="{ row }">
<QTd class="no-padding">
<QBadge
v-bind="getBadgeAttrs(row.shippedDate)"
class="q-pa-sm"
style="font-size: 14px"
>
{{ formatShippedDate(row.shippedDate) }}
</QBadge>
</QTd>
<QBadge
v-bind="getBadgeAttrs(row.shippedDate)"
class="q-pa-sm"
style="font-size: 14px"
>
{{ formatShippedDate(row.shippedDate) }}
</QBadge>
</template>
<template #column-provinceFk="{ row }">
<QTd class="no-padding">
<span :title="row.province" v-text="row.province" />
</QTd>
<span :title="row.province" v-text="row.province" />
</template>
<template #column-state="{ row }">
<QTd class="no-padding" @click.stop.prevent>
<div @click.stop.prevent>
<div v-if="row.refFk">
<span class="link">{{ row.refFk }}</span>
<InvoiceOutDescriptorProxy :id="row.invoiceOutId" />
@ -477,32 +463,33 @@ const openTab = (id) =>
>
{{ row.state }}
</QBadge>
</QTd>
</div>
</template>
<template #column-isFragile="{ row }">
<QTd class="no-padding">
<QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
<QTooltip>{{ $t('salesTicketsTable.isFragile') }}</QTooltip>
</QIcon>
</QTd>
<QIcon v-if="row.isFragile" name="local_bar" color="primary" size="sm">
<QTooltip>{{ $t('salesTicketsTable.isFragile') }}</QTooltip>
</QIcon>
</template>
<template #column-zoneFk="{ row }">
<QTd class="no-padding" @click.stop.prevent :title="row.zoneName">
<div @click.stop.prevent :title="row.zoneName">
<span class="link">{{ row.zoneName }}</span>
<ZoneDescriptorProxy :id="row.zoneFk" />
</QTd>
</div>
</template>
<template #column-totalWithVat="{ row }">
<QTd class="no-padding">
<QBadge
:color="totalPriceColor(row) || 'transparent'"
:text-color="totalPriceColor(row) ? 'black' : 'white'"
class="q-pa-sm"
style="font-size: 14px"
>
{{ toCurrency(row.totalWithVat) }}
</QBadge>
</QTd>
<QBadge
:color="totalPriceColor(row) || 'transparent'"
:text-color="totalPriceColor(row) ? 'black' : 'white'"
class="q-pa-sm"
style="font-size: 14px"
>
{{ toCurrency(row.totalWithVat) }}
</QBadge>
</template>
</VnTable>
</template>
<style lang="scss" scoped>
td .q-icon {
margin: 0 2px;
}
Review

damos un ligero espacio entre iconos.

damos un ligero espacio entre iconos.
</style>