verdnatura/salix-front
verdnatura
/
salix-front
2
3
Fork 1
Code Issues Pull Requests 96 Releases Wiki Activity

#7404 - fixSomeStyleIssues #783

Closed
jsegarra wants to merge 20 commits from 7404-fixSomeStyleIssues into dev
pull from: 7404-fixSomeStyleIssues
merge into: verdnatura:dev
Conversation 4 Commits 20 Files Changed 7 +172 -130
7 changed files with 172 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/common/VnInput.vue
View File

@ -127,27 +127,31 @@ const mixinRules = [
inputMax: Debe ser menor a {value} inputMax: Debe ser menor a {value}
</i18n> </i18n>
<style lang="scss"> <style lang="scss">
.q-field__append { .q-field {
padding-inline: 0; &__append {
} padding-inline: 0;
.q-field__append.q-field__marginal.row.no-wrap.items-center.row { &.q-field__marginal.row.no-wrap.items-center.row {
height: 20px; height: 35px;
} }
.q-field--outlined .q-field__append.q-field__marginal.row.no-wrap.items-center.row { }
height: auto;
}
.q-field__control {
height: unset;
}
.q-field--labeled { &--rounded > .q-field__inner > .q-field__control,
.q-field__native, &--labeled:not(&--outlined) > .q-field__inner > .q-field__control {
.q-field__prefix, height: 43px;
.q-field__suffix, align-items: baseline;
.q-field__input { }
padding-bottom: 0;
min-height: 15px; &--labeled {
.q-field__native,
.q-field__prefix,
.q-field__suffix,
.q-field__input {
padding-bottom: 0;
line-height: 20px;
min-height: fit-content;
align-items: flex-start;
}
} }
} }
</style> </style>

47
src/components/common/VnInputDate.vue
View File

@ -105,28 +105,31 @@ const styleAttrs = computed(() => {
hide-bottom-space hide-bottom-space
> >
<template #append> <template #append>
<QIcon <div style="align-items: flex-end; display: flex">
name="close" <QIcon
size="xs" name="close"
v-if=" size="xs"
($attrs.clearable == undefined || $attrs.clearable) && v-if="
hover && ($attrs.clearable == undefined || $attrs.clearable) &&
model && hover &&
!$attrs.disable model &&
" !$attrs.disable
@click=" "
vnInputDateRef.focus(); @click="
model = null; vnInputDateRef.focus();
isPopupOpen = false; model = null;
" isPopupOpen = false;
/> "
<QIcon />
v-if="showEvent"
name="event" <QIcon
class="cursor-pointer" v-if="showEvent"
@click="isPopupOpen = !isPopupOpen" name="event"
:title="t('Open date')" class="cursor-pointer"
/> @click="isPopupOpen = !isPopupOpen"
:title="t('Open date')"
/>
</div>
</template> </template>
<QMenu <QMenu
transition-show="scale" transition-show="scale"

44
src/components/common/VnInputTime.vue
View File

@ -84,27 +84,29 @@ function dateToTime(newDate) {
hide-bottom-space hide-bottom-space
> >
<template #append> <template #append>
<QIcon <div style="align-items: flex-end; display: flex">
name="close" <QIcon
size="xs" name="close"
v-if=" size="xs"
($attrs.clearable == undefined || $attrs.clearable) && v-if="
hover && ($attrs.clearable == undefined || $attrs.clearable) &&
model && hover &&
!$attrs.disable model &&
" !$attrs.disable
@click=" "
vnInputTimeRef.focus(); @click="
model = null; vnInputTimeRef.focus();
isPopupOpen = false; model = null;
" isPopupOpen = false;
/> "
<QIcon />
name="Schedule" <QIcon
class="cursor-pointer" name="Schedule"
@click="isPopupOpen = !isPopupOpen" class="cursor-pointer"
:title="t('Open time')" @click="isPopupOpen = !isPopupOpen"
/> :title="t('Open time')"
/>
</div>
</template> </template>
<QMenu <QMenu
transition-show="scale" transition-show="scale"

5
src/components/ui/VnSearchbar.vue
View File

@ -170,7 +170,12 @@ async function search() {
cursor: help; cursor: help;
} }
#searchbar { #searchbar {
.q-field__append.q-field__marginal.row.no-wrap.items-center.row {
height: inherit;
}
.q-field--standout.q-field--highlighted .q-field__control { .q-field--standout.q-field--highlighted .q-field__control {
align-items: center;
background-color: white; background-color: white;
color: black; color: black;
.q-field__native, .q-field__native,

6
src/css/app.scss
View File

@ -288,14 +288,18 @@ input::-webkit-inner-spin-button {
color: $info; color: $info;
} }
} }
.q-field__inner { .q-field__inner {
.q-field__control { .q-field__control {
min-height: auto !important; min-height: auto !important;
display: flex; display: flex;
align-items: flex-end; align-items: self-start;
padding-bottom: 2px; padding-bottom: 2px;
.q-field__native.row { .q-field__native.row {
min-height: auto !important; min-height: auto !important;
} }
} }
} }
.q-textarea.q-field--labeled .q-field__control-container {
padding-top: 23px;
}

156
src/pages/Item/ItemFixedPrice.vue
View File

@ -102,17 +102,12 @@ const columns = computed(() => [
label: t('item.fixedPrice.started'), label: t('item.fixedPrice.started'),
field: 'started', field: 'started',
name: 'started', name: 'started',
format: ({ started }) => toDate(started),
cardVisible: true, cardVisible: true,
...defaultColumnAttrs,
columnField: {
component: 'date',
class: 'shrink',
},
columnFilter: { columnFilter: {
component: 'date', component: 'date',
}, },
columnClass: 'expand', style: ' max-width: 90px',
format: ({ started }) => toDate(started),
}, },
{ {
label: t('item.fixedPrice.ended'), label: t('item.fixedPrice.ended'),
@ -120,14 +115,11 @@ const columns = computed(() => [
name: 'ended', name: 'ended',
...defaultColumnAttrs, ...defaultColumnAttrs,
cardVisible: true, cardVisible: true,
columnField: {
component: 'date',
class: 'shrink',
},
columnFilter: { columnFilter: {
component: 'date', component: 'date',
}, },
columnClass: 'expand', style: ' max-width: 100px',
format: (row) => toDate(row.ended), format: (row) => toDate(row.ended),
}, },
@ -469,6 +461,7 @@ function handleOnDataSave({ CrudModelRef }) {
option-value="id" option-value="id"
v-model="props.row.itemFk" v-model="props.row.itemFk"
v-on="getRowUpdateInputEvents(props, true, 'select')" v-on="getRowUpdateInputEvents(props, true, 'select')"
:is-clearable="true"
> >
<template #option="scope"> <template #option="scope">
<QItem v-bind="scope.itemProps"> <QItem v-bind="scope.itemProps">
@ -489,28 +482,24 @@ function handleOnDataSave({ CrudModelRef }) {
<FetchedTags :item="row" /> <FetchedTags :item="row" />
</template> </template>
<template #column-rate2="props"> <template #column-rate2="props">
<QTd class="col"> <VnInput
<VnInput type="currency"
type="currency" style="width: 75px"
style="width: 75px" v-model.number="props.row.rate2"
v-model.number="props.row.rate2" v-on="getRowUpdateInputEvents(props)"
v-on="getRowUpdateInputEvents(props)" >
> <template #append> € </template>
<template #append>€</template> </VnInput>
</VnInput>
</QTd>
</template> </template>
<template #column-rate3="props"> <template #column-rate3="props">
<QTd class="col"> <VnInput
<VnInput style="width: 75px"
style="width: 75px" type="currency"
type="currency" v-model.number="props.row.rate3"
v-model.number="props.row.rate3" v-on="getRowUpdateInputEvents(props)"
v-on="getRowUpdateInputEvents(props)" >
> <template #append> € </template>
<template #append>€</template> </VnInput>
</VnInput>
</QTd>
</template> </template>
<template #column-minPrice="props"> <template #column-minPrice="props">
<QTd class="col"> <QTd class="col">
@ -529,7 +518,7 @@ function handleOnDataSave({ CrudModelRef }) {
v-model.number="props.row.minPrice" v-model.number="props.row.minPrice"
v-on="getRowUpdateInputEvents(props)" v-on="getRowUpdateInputEvents(props)"
> >
<template #append>€</template> <template #append> € </template>
</VnInput> </VnInput>
</div> </div>
</QTd> </QTd>
@ -537,7 +526,7 @@ function handleOnDataSave({ CrudModelRef }) {
<template #column-started="props"> <template #column-started="props">
<VnInputDate <VnInputDate
class="vnInputDate" class="vnInputDate"
:show-event="true" :show-event="false"
v-model="props.row.started" v-model="props.row.started"
v-on="getRowUpdateInputEvents(props, false, 'date')" v-on="getRowUpdateInputEvents(props, false, 'date')"
v-bind="dateStyle(isBigger(props.row.started))" v-bind="dateStyle(isBigger(props.row.started))"
@ -546,24 +535,22 @@ function handleOnDataSave({ CrudModelRef }) {
<template #column-ended="props"> <template #column-ended="props">
<VnInputDate <VnInputDate
class="vnInputDate" class="vnInputDate"
:show-event="true" :show-event="false"
v-model="props.row.ended" v-model="props.row.ended"
v-on="getRowUpdateInputEvents(props, false, 'date')" v-on="getRowUpdateInputEvents(props, false, 'date')"
v-bind="dateStyle(isLower(props.row.ended))" v-bind="dateStyle(isLower(props.row.ended))"
/> />
</template> </template>
<template #column-warehouseFk="props"> <template #column-warehouseFk="props">
<QTd class="col"> <VnSelect
<VnSelect style="max-width: 150px"
style="max-width: 150px" :options="warehousesOptions"
:options="warehousesOptions" hide-selected
hide-selected option-label="name"
option-label="name" option-value="id"
option-value="id" v-model="props.row.warehouseFk"
v-model="props.row.warehouseFk" v-on="getRowUpdateInputEvents(props, false, 'select')"
v-on="getRowUpdateInputEvents(props, false, 'select')" />
/>
</QTd>
</template> </template>
<template #column-deleteAction="{ row, rowIndex }"> <template #column-deleteAction="{ row, rowIndex }">
<QIcon <QIcon
@ -597,33 +584,41 @@ function handleOnDataSave({ CrudModelRef }) {
</QPage> </QPage>
</template> </template>
<style lang="scss"> <style lang="scss">
.q-table th, .q-table {
.q-table td { th,
padding-inline: 5px !important; td {
} padding-inline: 5px !important;
.q-table tr td { }
font-size: 10pt;
border-top: none; tr td {
border-collapse: collapse; font-size: 10pt;
} border-top: none;
.q-table tbody td { border-collapse: collapse;
max-width: none; }
.q-td.col {
& .vnInputDate { tbody td {
min-width: 90px; max-width: none;
}
& div.row { .q-td.col {
& .q-checkbox { .vnInputDate {
& .q-checkbox__inner { min-width: 90px;
position: relative !important; }
&.q-checkbox__inner--truthy {
color: var(--q-primary); div.row {
.q-checkbox {
.q-checkbox__inner {
position: relative !important;
&--truthy {
color: var(--q-primary);
}
} }
} }
} }
} }
} }
} }
.q-field__after, .q-field__after,
.q-field__append { .q-field__append {
padding: 0; padding: 0;
@ -632,6 +627,7 @@ function handleOnDataSave({ CrudModelRef }) {
tbody tr.highlight .q-td { tbody tr.highlight .q-td {
animation: highlight-animation 4s ease-in-out; animation: highlight-animation 4s ease-in-out;
} }
@keyframes highlight-animation { @keyframes highlight-animation {
0% { 0% {
background-color: $primary-light; background-color: $primary-light;
@ -640,12 +636,38 @@ tbody tr.highlight .q-td {
background-color: transparent; background-color: transparent;
} }
} }
.subName { .subName {
margin-left: 5%; margin-left: 5%;
font-size: 0.75rem; font-size: 0.75rem;
text-transform: uppercase; text-transform: uppercase;
color: var(--vn-label-color); color: var(--vn-label-color);
} }
.q-td .q-field__control.relative-position.row.no-wrap {
height: 25px;
display: flex;
align-items: center;
.q-icon:not(.q-select__dropdown-icon) {
padding-bottom: 7px;
}
.q-icon.q-select__dropdown-icon {
padding-bottom: 5px;
}
.q-field__native,
.q-field__prefix,
.q-field__suffix,
.q-field__input {
padding-bottom: 0;
}
.q-field__append.q-field__marginal.row.no-wrap.items-center {
align-items: flex-end;
}
}
</style> </style>
<i18n> <i18n>
es: es:

2
src/pages/Item/ItemListFilter.vue
View File

@ -365,6 +365,7 @@ onMounted(async () => {
> >
<QItemSection class="col"> <QItemSection class="col">
<VnSelect <VnSelect
style="max-width: 50%"
:label="t('params.tag')" :label="t('params.tag')"
:model-value="fieldFilter.selectedField" :model-value="fieldFilter.selectedField"
:options="moreFields" :options="moreFields"
@ -392,6 +393,7 @@ onMounted(async () => {
@update:model-value="applyFieldFilters(params, searchFn)" @update:model-value="applyFieldFilters(params, searchFn)"
/> />
<VnInput <VnInput
style="max-width: 50%"
v-else v-else
v-model="fieldFilter.value" v-model="fieldFilter.value"
:label="t('params.value')" :label="t('params.value')"