mirror of
https://github.com/OCA/web.git
synced 2025-02-22 13:21:25 +02:00
[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:
@@ -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},
|
||||
14
web_widget_numeric_step/static/src/numeric_step.scss
Normal file
14
web_widget_numeric_step/static/src/numeric_step.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
@@ -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"
|
||||
Reference in New Issue
Block a user