[FIX] web_widget_numeric_step: always display on touch screens; avoid layout jumping otherwise

Before this patch:
- On a tablet, buttons wouldn't display (big screen; can't hover).
- On a PC, fields would make layout jumps while hovering.

@moduon MT-4472
This commit is contained in:
Jairo Llopis
2023-12-14 12:45:45 +00:00
parent e39a1201cc
commit b6ca76d338
6 changed files with 35 additions and 20 deletions

View File

@@ -9,14 +9,6 @@ export class NumericStep extends FloatField {
setup() {
super.setup();
}
_onFocusInput(ev) {
const $el = $(ev.target).parent().find(".widget_numeric_step_btn");
$el.removeClass("d-lg-none");
}
_onFocusOutInput(ev) {
const $el = $(ev.target).find(".widget_numeric_step_btn");
$el.addClass("d-lg-none");
}
_onStepClick(ev) {
const $el = $(ev.target).parent().parent().find("input");
$el.focus();
@@ -65,7 +57,6 @@ export class NumericStep extends FloatField {
NumericStep.template = "web_widget_numeric_step";
NumericStep.props = {
...standardFieldProps,
name: {type: String, optional: true},
inputType: {type: String, optional: true},
step: {type: Number, optional: true},
min: {type: Number, optional: true},

View File

@@ -0,0 +1,14 @@
// Copyright 2023 Moduon Team S.L.
// License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html)
.widget_numeric_step {
// Hide the buttons until the user hovers if possible
@media (hover: hover) {
.btn_numeric_step {
visibility: hidden;
}
}
&:hover .btn_numeric_step {
visibility: visible;
}
}

View File

@@ -6,12 +6,8 @@ License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
-->
<template>
<t t-name="web_widget_numeric_step" owl="1">
<div
class="d-flex widget_numeric_step"
t-on-mouseleave="_onFocusOutInput"
t-on-mouseenter="_onFocusInput"
>
<div class="input-group-prepend d-lg-none widget_numeric_step_btn">
<div class="d-flex widget_numeric_step">
<div class="input-group-prepend widget_numeric_step_btn">
<button
class="fa fa-minus btn btn-default btn_numeric_step"
aria-label="Minus"
@@ -33,7 +29,7 @@ License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
t-on-keydown="_onKeyDown"
t-on-wheel="_onWheel"
/>
<div class="input-group-append d-lg-none widget_numeric_step_btn">
<div class="input-group-append widget_numeric_step_btn">
<button
class="fa fa-plus btn btn-default btn_numeric_step"
aria-label="Plus"