revert: refs #7404 #7404 VnSelect hover

fix: refs #7404 #7404 VnSelect resolve conflicts
style: refs #7404 give more space
2024-10-07 20:05:04 +02:00 · 2024-10-07 13:59:32 +02:00 · 2024-10-07 13:59:16 +02:00 · 2024-10-07 13:58:58 +02:00 · 2024-10-07 13:24:11 +02:00 · 2024-10-07 13:19:17 +02:00
7 changed files with 172 additions and 130 deletions
--- a/src/components/common/VnInput.vue
+++ b/src/components/common/VnInput.vue
@ -127,27 +127,31 @@ const mixinRules = [
        inputMax: Debe ser menor a {value}
 </i18n>
 <style lang="scss">
-.q-field__append {
-    padding-inline: 0;
-}
+.q-field {
+    &__append {
+        padding-inline: 0;

-.q-field__append.q-field__marginal.row.no-wrap.items-center.row {
-    height: 20px;
-}
-.q-field--outlined .q-field__append.q-field__marginal.row.no-wrap.items-center.row {
-    height: auto;
-}
-.q-field__control {
-    height: unset;
-}
+        &.q-field__marginal.row.no-wrap.items-center.row {
+            height: 35px;
+        }
+    }

-.q-field--labeled {
-    .q-field__native,
-    .q-field__prefix,
-    .q-field__suffix,
-    .q-field__input {
-        padding-bottom: 0;
-        min-height: 15px;
+    &--rounded > .q-field__inner > .q-field__control,
+    &--labeled:not(&--outlined) > .q-field__inner > .q-field__control {
+        height: 43px;
+        align-items: baseline;
+    }
+
+    &--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>
--- a/src/components/common/VnInputDate.vue
+++ b/src/components/common/VnInputDate.vue
@ -105,28 +105,31 @@ const styleAttrs = computed(() => {
            hide-bottom-space
        >
            <template #append>
-                <QIcon
-                    name="close"
-                    size="xs"
-                    v-if="
-                        ($attrs.clearable == undefined || $attrs.clearable) &&
-                        hover &&
-                        model &&
-                        !$attrs.disable
-                    "
-                    @click="
-                        vnInputDateRef.focus();
-                        model = null;
-                        isPopupOpen = false;
-                    "
-                />
-                <QIcon
-                    v-if="showEvent"
-                    name="event"
-                    class="cursor-pointer"
-                    @click="isPopupOpen = !isPopupOpen"
-                    :title="t('Open date')"
-                />
+                <div style="align-items: flex-end; display: flex">
+                    <QIcon
+                        name="close"
+                        size="xs"
+                        v-if="
+                            ($attrs.clearable == undefined || $attrs.clearable) &&
+                            hover &&
+                            model &&
+                            !$attrs.disable
+                        "
+                        @click="
+                            vnInputDateRef.focus();
+                            model = null;
+                            isPopupOpen = false;
+                        "
+                    />
+
+                    <QIcon
+                        v-if="showEvent"
+                        name="event"
+                        class="cursor-pointer"
+                        @click="isPopupOpen = !isPopupOpen"
+                        :title="t('Open date')"
+                    />
+                </div>
            </template>
            <QMenu
                transition-show="scale"
--- a/src/components/common/VnInputTime.vue
+++ b/src/components/common/VnInputTime.vue
@ -84,27 +84,29 @@ function dateToTime(newDate) {
            hide-bottom-space
        >
            <template #append>
-                <QIcon
-                    name="close"
-                    size="xs"
-                    v-if="
-                        ($attrs.clearable == undefined || $attrs.clearable) &&
-                        hover &&
-                        model &&
-                        !$attrs.disable
-                    "
-                    @click="
-                        vnInputTimeRef.focus();
-                        model = null;
-                        isPopupOpen = false;
-                    "
-                />
-                <QIcon
-                    name="Schedule"
-                    class="cursor-pointer"
-                    @click="isPopupOpen = !isPopupOpen"
-                    :title="t('Open time')"
-                />
+                <div style="align-items: flex-end; display: flex">
+                    <QIcon
+                        name="close"
+                        size="xs"
+                        v-if="
+                            ($attrs.clearable == undefined || $attrs.clearable) &&
+                            hover &&
+                            model &&
+                            !$attrs.disable
+                        "
+                        @click="
+                            vnInputTimeRef.focus();
+                            model = null;
+                            isPopupOpen = false;
+                        "
+                    />
+                    <QIcon
+                        name="Schedule"
+                        class="cursor-pointer"
+                        @click="isPopupOpen = !isPopupOpen"
+                        :title="t('Open time')"
+                    />
+                </div>
            </template>
            <QMenu
                transition-show="scale"
--- a/src/components/ui/VnSearchbar.vue
+++ b/src/components/ui/VnSearchbar.vue
@ -170,7 +170,12 @@ async function search() {
    cursor: help;
 }
 #searchbar {
+    .q-field__append.q-field__marginal.row.no-wrap.items-center.row {
+        height: inherit;
+    }
+
    .q-field--standout.q-field--highlighted .q-field__control {
+        align-items: center;
        background-color: white;
        color: black;
        .q-field__native,
--- a/src/css/app.scss
+++ b/src/css/app.scss
@ -288,14 +288,18 @@ input::-webkit-inner-spin-button {
        color: $info;
    }
 }
+
 .q-field__inner {
    .q-field__control {
        min-height: auto !important;
        display: flex;
-        align-items: flex-end;
+        align-items: self-start;
        padding-bottom: 2px;
        .q-field__native.row {
            min-height: auto !important;
        }
    }
 }
+.q-textarea.q-field--labeled .q-field__control-container {
+    padding-top: 23px;
+}
--- a/src/pages/Item/ItemFixedPrice.vue
+++ b/src/pages/Item/ItemFixedPrice.vue
@ -102,17 +102,12 @@ const columns = computed(() => [
        label: t('item.fixedPrice.started'),
        field: 'started',
        name: 'started',
-        format: ({ started }) => toDate(started),
        cardVisible: true,
-        ...defaultColumnAttrs,
-        columnField: {
-            component: 'date',
-            class: 'shrink',
-        },
        columnFilter: {
            component: 'date',
        },
-        columnClass: 'expand',
+        style: ' max-width: 90px',
+        format: ({ started }) => toDate(started),
    },
    {
        label: t('item.fixedPrice.ended'),
@ -120,14 +115,11 @@ const columns = computed(() => [
        name: 'ended',
        ...defaultColumnAttrs,
        cardVisible: true,
-        columnField: {
-            component: 'date',
-            class: 'shrink',
-        },
+
        columnFilter: {
            component: 'date',
        },
-        columnClass: 'expand',
+        style: ' max-width: 100px',
        format: (row) => toDate(row.ended),
    },

@ -469,6 +461,7 @@ function handleOnDataSave({ CrudModelRef }) {
                    option-value="id"
                    v-model="props.row.itemFk"
                    v-on="getRowUpdateInputEvents(props, true, 'select')"
+                    :is-clearable="true"
                >
                    <template #option="scope">
                        <QItem v-bind="scope.itemProps">
@ -489,28 +482,24 @@ function handleOnDataSave({ CrudModelRef }) {
                <FetchedTags :item="row" />
            </template>
            <template #column-rate2="props">
-                <QTd class="col">
-                    <VnInput
-                        type="currency"
-                        style="width: 75px"
-                        v-model.number="props.row.rate2"
-                        v-on="getRowUpdateInputEvents(props)"
-                    >
-                        <template #append>€</template>
-                    </VnInput>
-                </QTd>
+                <VnInput
+                    type="currency"
+                    style="width: 75px"
+                    v-model.number="props.row.rate2"
+                    v-on="getRowUpdateInputEvents(props)"
+                >
+                    <template #append> € </template>
+                </VnInput>
            </template>
            <template #column-rate3="props">
-                <QTd class="col">
-                    <VnInput
-                        style="width: 75px"
-                        type="currency"
-                        v-model.number="props.row.rate3"
-                        v-on="getRowUpdateInputEvents(props)"
-                    >
-                        <template #append>€</template>
-                    </VnInput>
-                </QTd>
+                <VnInput
+                    style="width: 75px"
+                    type="currency"
+                    v-model.number="props.row.rate3"
+                    v-on="getRowUpdateInputEvents(props)"
+                >
+                    <template #append> € </template>
+                </VnInput>
            </template>
            <template #column-minPrice="props">
                <QTd class="col">
@ -529,7 +518,7 @@ function handleOnDataSave({ CrudModelRef }) {
                            v-model.number="props.row.minPrice"
                            v-on="getRowUpdateInputEvents(props)"
                        >
-                            <template #append>€</template>
+                            <template #append> € </template>
                        </VnInput>
                    </div>
                </QTd>
@ -537,7 +526,7 @@ function handleOnDataSave({ CrudModelRef }) {
            <template #column-started="props">
                <VnInputDate
                    class="vnInputDate"
-                    :show-event="true"
+                    :show-event="false"
                    v-model="props.row.started"
                    v-on="getRowUpdateInputEvents(props, false, 'date')"
                    v-bind="dateStyle(isBigger(props.row.started))"
@ -546,24 +535,22 @@ function handleOnDataSave({ CrudModelRef }) {
            <template #column-ended="props">
                <VnInputDate
                    class="vnInputDate"
-                    :show-event="true"
+                    :show-event="false"
                    v-model="props.row.ended"
                    v-on="getRowUpdateInputEvents(props, false, 'date')"
                    v-bind="dateStyle(isLower(props.row.ended))"
                />
            </template>
            <template #column-warehouseFk="props">
-                <QTd class="col">
-                    <VnSelect
-                        style="max-width: 150px"
-                        :options="warehousesOptions"
-                        hide-selected
-                        option-label="name"
-                        option-value="id"
-                        v-model="props.row.warehouseFk"
-                        v-on="getRowUpdateInputEvents(props, false, 'select')"
-                    />
-                </QTd>
+                <VnSelect
+                    style="max-width: 150px"
+                    :options="warehousesOptions"
+                    hide-selected
+                    option-label="name"
+                    option-value="id"
+                    v-model="props.row.warehouseFk"
+                    v-on="getRowUpdateInputEvents(props, false, 'select')"
+                />
            </template>
            <template #column-deleteAction="{ row, rowIndex }">
                <QIcon
@ -597,33 +584,41 @@ function handleOnDataSave({ CrudModelRef }) {
    </QPage>
 </template>
 <style lang="scss">
-.q-table th,
-.q-table td {
-    padding-inline: 5px !important;
-}
-.q-table tr td {
-    font-size: 10pt;
-    border-top: none;
-    border-collapse: collapse;
-}
-.q-table tbody td {
-    max-width: none;
-    .q-td.col {
-        & .vnInputDate {
-            min-width: 90px;
-        }
-        & div.row {
-            & .q-checkbox {
-                & .q-checkbox__inner {
-                    position: relative !important;
-                    &.q-checkbox__inner--truthy {
-                        color: var(--q-primary);
+.q-table {
+    th,
+    td {
+        padding-inline: 5px !important;
+    }
+
+    tr td {
+        font-size: 10pt;
+        border-top: none;
+        border-collapse: collapse;
+    }
+
+    tbody td {
+        max-width: none;
+
+        .q-td.col {
+            .vnInputDate {
+                min-width: 90px;
+            }
+
+            div.row {
+                .q-checkbox {
+                    .q-checkbox__inner {
+                        position: relative !important;
+
+                        &--truthy {
+                            color: var(--q-primary);
+                        }
                    }
                }
            }
        }
    }
 }
+
 .q-field__after,
 .q-field__append {
    padding: 0;
@ -632,6 +627,7 @@ function handleOnDataSave({ CrudModelRef }) {
 tbody tr.highlight .q-td {
    animation: highlight-animation 4s ease-in-out;
 }
+
@keyframes highlight-animation {
    0% {
        background-color: $primary-light;
@ -640,12 +636,38 @@ tbody tr.highlight .q-td {
        background-color: transparent;
    }
 }
+
 .subName {
    margin-left: 5%;
    font-size: 0.75rem;
    text-transform: uppercase;
    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>
 <i18n>
 es:
--- a/src/pages/Item/ItemListFilter.vue
+++ b/src/pages/Item/ItemListFilter.vue
@ -365,6 +365,7 @@ onMounted(async () => {
            >
                <QItemSection class="col">
                    <VnSelect
+                        style="max-width: 50%"
                        :label="t('params.tag')"
                        :model-value="fieldFilter.selectedField"
                        :options="moreFields"
@ -392,6 +393,7 @@ onMounted(async () => {
                        @update:model-value="applyFieldFilters(params, searchFn)"
                    />
                    <VnInput
+                        style="max-width: 50%"
                        v-else
                        v-model="fieldFilter.value"
                        :label="t('params.value')"
Author	SHA1	Message	Date
Javier Segarra	5e75bb29fb	revert: refs #7404 #7404 VnSelect hover gitea/salix-front/pipeline/pr-dev This commit looks good Details	2024-10-07 20:05:04 +02:00
Javier Segarra	68f8037db4	fix: refs #7404 #7404 VnSelect resolve conflicts gitea/salix-front/pipeline/pr-dev This commit looks good Details	2024-10-07 13:59:32 +02:00
Javier Segarra	14d0599d60	style: refs #7404 give more space	2024-10-07 13:59:16 +02:00
Javier Segarra	3e125805c6	style: refs #7404 fix icons hover effect	2024-10-07 13:58:58 +02:00
Javier Segarra	36ce685d6e	fix: refs #7404 #7404 VnSelect resolve conflcits gitea/salix-front/pipeline/pr-dev This commit looks good Details	2024-10-07 13:24:11 +02:00
Javier Segarra	f8f41c8cac	Merge branch 'dev' into 7404-fixSomeStyleIssues	2024-10-07 13:19:17 +02:00
Javier Segarra	47ea8d1e5b	perf: refs #7404 #7404 clean style rules gitea/salix-front/pipeline/pr-dev This commit looks good Details	2024-10-05 00:27:15 +02:00
Javier Segarra	937a1f3ddb	Merge branch 'dev' into 7404-fixSomeStyleIssues	2024-10-05 00:23:40 +02:00
Javier Segarra	83ee3b5bde	fix: refs #7404 #7404 style Filters	2024-10-05 00:21:04 +02:00
Javier Segarra	18227411f0	fix: refs #7404 #7404 style VnSearchbar	2024-10-05 00:02:25 +02:00
Javier Segarra	6e16febe8b	style: refs #7404 #7404 remove comments gitea/salix-front/pipeline/pr-dev This commit looks good Details	2024-10-03 00:13:18 +02:00
Javier Segarra	22ec143ee0	Merge branch 'dev' into 7404-fixSomeStyleIssues gitea/salix-front/pipeline/pr-dev This commit looks good Details	2024-10-02 22:08:51 +00:00
Javier Segarra	6c3c7a3913	style: refs #7404 #7404 fix ItemListFilter gitea/salix-front/pipeline/pr-dev This commit looks good Details	2024-10-02 14:56:43 +02:00
Javier Segarra	64bb27ca7f	style: refs #7404 fix RouteExtendedList gitea/salix-front/pipeline/pr-dev This commit looks good Details	2024-10-01 21:49:29 +02:00
Javier Segarra	cd8ad046d4	style: refs #7404 fix ItemFixedPrice	2024-10-01 21:47:32 +02:00
Javier Segarra	86ab73eeb2	fix: refs #7404 ItemFixedPrice gitea/salix-front/pipeline/pr-dev This commit looks good Details	2024-10-01 14:10:33 +02:00
Javier Segarra	16179a0e88	fix: refs #7404 inputs	2024-10-01 13:32:39 +02:00
Javier Segarra	75d81a2110	fix: refs #7404 inputs	2024-10-01 13:25:34 +02:00
Javier Segarra	f85cd77864	fix: refs #7404 filters	2024-10-01 13:23:18 +02:00
Javier Segarra	9af08a4b28	fix: refs #7404 VnSearchbar	2024-10-01 13:20:55 +02:00