[IMP] web_widget_numeric_step: Better CSS and supports mobile layouts

2020-02-07 02:43:49 +01:00 · 2020-02-07 02:43:49 +01:00 · 5fee858a45
parent 966f9e674d
commit 5fee858a45
14 changed files with 384 additions and 153 deletions
--- a/web_widget_numeric_step/README.rst
+++ b/web_widget_numeric_step/README.rst
@ -13,15 +13,23 @@ Web Widget Numeric Step
 .. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png
    :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
    :alt: License: AGPL-3
-.. |badge3| image:: https://img.shields.io/badge/github-quentinDupont%2Fweb-lightgray.png?logo=github
-    :target: https://github.com/quentinDupont/web/tree/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step
-    :alt: quentinDupont/web
+.. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github
+    :target: https://github.com/OCA/web/tree/12.0/web_widget_numeric_step
+    :alt: OCA/web
+.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png
+    :target: https://translation.odoo-community.org/projects/web-12-0/web-12-0-web_widget_numeric_step
+    :alt: Translate me on Weblate
+.. |badge5| image:: https://img.shields.io/badge/runbot-Try%20me-875A7B.png
+    :target: https://runbot.odoo-community.org/runbot/162/12.0
+    :alt: Try me on Runbot

-|badge1| |badge2| |badge3| 
+|badge1| |badge2| |badge3| |badge4| |badge5| 

-This widget changes input number field and make it easier to incremente the number thanks to 2 buttons (+ and -).
+This widget changes input number field and make it easier to increment the number thanks to 2 buttons (+ and -).
 Use JS native logic for input number, so you can use the options ``min``, ``max``, ``step``, ``placeholder``.

+Demo available at `Settings > Users & Companies > Users > *Select One* > See 'Credit Limit' field`
+
 **Table of contents**

 .. contents::
@ -34,7 +42,7 @@ In your xml view, add ``widget="numeric_step"``
 This will add the 2 buttons "+" and "-" just next to the input field in edit mode.
 Iteration step by default is 1.

-.. figure:: https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/add_two_buttons.png
+.. figure:: https://raw.githubusercontent.com/OCA/web/12.0/web_widget_numeric_step/static/description/add_two_buttons.png


 **Optional**
@ -43,27 +51,29 @@ Add an option to choose the step iteration and limits (min and max values).

 Example for an 0.25 step, min to -1 and max to 10 :

-``<field name="sale_delay" widget="numeric_step" options="{'step': 0.25, 'min': -1, 'max': 10}" /> days``
+.. code:: xml
+
+  <field name="sale_delay" widget="numeric_step" options="{'step': 0.25, 'min': -1, 'max': 10}" /> days

 **Examples**

 Iteration with 0.25 step, min to -1 and max to 10.

-Start to incremente with button, continue incrementing with scrolling mouse.
+Start to increment with button, continue incrementing with scrolling mouse.

-.. figure:: https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/step0,25andlimits.gif
+.. figure:: https://raw.githubusercontent.com/OCA/web/12.0/web_widget_numeric_step/static/description/step0,25andlimits.gif

 Iteration with 10 step, max limit 15, placeholder with onchange

-.. figure:: https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif
+.. figure:: https://raw.githubusercontent.com/OCA/web/12.0/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif

 Bug Tracker
 ===========

-Bugs are tracked on `GitHub Issues <https://github.com/quentinDupont/web/issues>`_.
+Bugs are tracked on `GitHub Issues <https://github.com/OCA/web/issues>`_.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us smashing it by providing a detailed and welcomed
-`feedback <https://github.com/quentinDupont/web/issues/new?body=module:%20web_widget_numeric_step%0Aversion:%2012.0_ADD_web_widget_ux_choice%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.
+`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_widget_numeric_step%0Aversion:%2012.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**>`_.

 Do not contact contributors directly about support or help with technical issues.

@ -74,6 +84,7 @@ Authors
 ~~~~~~~

 * GRAP
+* Tecnativa

 Contributors
 ~~~~~~~~~~~~
@ -82,9 +93,23 @@ Contributors

  * Quentin DUPONT <quentin.dupont@grap.coop>

+* `Tecnativa <https://www.tecnativa.com/>`_:
+
+  * Alexandre Díaz
+
 Maintainers
 ~~~~~~~~~~~

-This module is part of the `quentinDupont/web <https://github.com/quentinDupont/web/tree/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step>`_ project on GitHub.
+This module is maintained by the OCA.

-You are welcome to contribute.
+.. image:: https://odoo-community.org/logo.png
+   :alt: Odoo Community Association
+   :target: https://odoo-community.org
+
+OCA, or the Odoo Community Association, is a nonprofit organization whose
+mission is to support the collaborative development of Odoo features and
+promote its widespread use.
+
+This module is part of the `OCA/web <https://github.com/OCA/web/tree/12.0/web_widget_numeric_step>`_ project on GitHub.
+
+You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.
--- a/web_widget_numeric_step/manifest.py
+++ b/web_widget_numeric_step/manifest.py
@ -1,21 +1,25 @@
-# Odoo, Open Source Web Widget Numeric Step
-#
-# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).#
+# Copyright 2019 GRAP - Quentin DUPONT
+# Copyright 2020 Tecnativa - Alexandre Díaz
+# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html)
+
 {
    'name': "Web Widget Numeric Step",
    'category': "web",
    'version': "12.0.1.0.0",
-    'author': "GRAP, "
+    'author': "GRAP, Tecnativa, "
              "Odoo Community Association (OCA)",
    'license': 'AGPL-3',
    'website': 'https://github.com/OCA/web',
    'depends': ['web'],
    'data': [
-        'view/web_widget_numeric_step.xml'
+        'view/assets.xml'
    ],
    'qweb': [
        'static/src/xml/numeric_step.xml',
    ],
+    'demo': [
+        'demo/res_users_view.xml'
+    ],
    'auto_install': False,
    'installable': True,
 }
--- a/web_widget_numeric_step/demo/res_users_view.xml
+++ b/web_widget_numeric_step/demo/res_users_view.xml
@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!-- Copyright 2020 Tecnativa - Alexandre Díaz
+     License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). -->
+
+<odoo>
+    <record id="view_users_form" model="ir.ui.view">
+        <field name="model">res.users</field>
+        <field name="inherit_id" ref="base.view_users_form"/>
+        <field name="arch" type="xml">
+            <xpath expr="//div[hasclass('oe_title')]" position="after">
+                <group>
+                    <field name="credit_limit" widget="numeric_step" options="{'step': 3, 'min': -10, 'max': 130}"/>
+                </group>
+            </xpath>
+        </field>
+    </record>
+</odoo>
--- a/web_widget_numeric_step/i18n/fr.po
+++ b/web_widget_numeric_step/i18n/fr.po
@ -10,22 +10,22 @@ msgstr ""
 "PO-Revision-Date: 2019-08-30 12:07+0000\n"
 "Last-Translator: <>\n"
 "Language-Team: \n"
+"Language: \n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: \n"
 "Plural-Forms: \n"

-#. module: web_widget_number_ux_choice
+#. module: web_widget_numeric_step
 #. openerp-web
-#: code:addons/web_widget_number_ux_choice/static/src/xml/number_ux_choice.xml:12
+#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:14
 #, python-format
 msgid "Minus"
 msgstr "Moins"

-#. module: web_widget_number_ux_choice
+#. module: web_widget_numeric_step
 #. openerp-web
-#: code:addons/web_widget_number_ux_choice/static/src/xml/number_ux_choice.xml:12
+#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:19
 #, python-format
 msgid "Plus"
 msgstr "Plus"
-
--- a/web_widget_numeric_step/i18n/web_widget_numeric_step.pot
+++ b/web_widget_numeric_step/i18n/web_widget_numeric_step.pot
@ -0,0 +1,29 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+#	* web_widget_numeric_step
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 12.0\n"
+"Report-Msgid-Bugs-To: \n"
+"Last-Translator: <>\n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#. module: web_widget_numeric_step
+#. openerp-web
+#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:14
+#, python-format
+msgid "Minus"
+msgstr ""
+
+#. module: web_widget_numeric_step
+#. openerp-web
+#: code:addons/web_widget_numeric_step/static/src/xml/numeric_step.xml:19
+#, python-format
+msgid "Plus"
+msgstr ""
+
--- a/web_widget_numeric_step/readme/CONTRIBUTORS.rst
+++ b/web_widget_numeric_step/readme/CONTRIBUTORS.rst
@ -1,3 +1,7 @@
 * `GRAP <http://www.grap.coop>`_:

  * Quentin DUPONT <quentin.dupont@grap.coop>
+
+* `Tecnativa <https://www.tecnativa.com/>`_:
+
+  * Alexandre Díaz
--- a/web_widget_numeric_step/readme/DESCRIPTION.rst
+++ b/web_widget_numeric_step/readme/DESCRIPTION.rst
@ -1,2 +1,4 @@
-This widget changes input number field and make it easier to incremente the number thanks to 2 buttons (+ and -).
+This widget changes input number field and make it easier to increment the number thanks to 2 buttons (+ and -).
 Use JS native logic for input number, so you can use the options ``min``, ``max``, ``step``, ``placeholder``.
+
+Demo available at `Settings > Users & Companies > Users > *Select One* > See 'Credit Limit' field`
--- a/web_widget_numeric_step/readme/USAGE.rst
+++ b/web_widget_numeric_step/readme/USAGE.rst
@ -11,13 +11,15 @@ Add an option to choose the step iteration and limits (min and max values).

 Example for an 0.25 step, min to -1 and max to 10 :

-``<field name="sale_delay" widget="numeric_step" options="{'step': 0.25, 'min': -1, 'max': 10}" /> days``
+.. code:: xml
+
+  <field name="sale_delay" widget="numeric_step" options="{'step': 0.25, 'min': -1, 'max': 10}" /> days

 **Examples**

 Iteration with 0.25 step, min to -1 and max to 10.

-Start to incremente with button, continue incrementing with scrolling mouse.
+Start to increment with button, continue incrementing with scrolling mouse.

 .. figure:: ../static/description/step0,25andlimits.gif

--- a/web_widget_numeric_step/static/description/index.html
+++ b/web_widget_numeric_step/static/description/index.html
@ -3,7 +3,7 @@
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<meta name="generator" content="Docutils 0.14: http://docutils.sourceforge.net/" />
+<meta name="generator" content="Docutils 0.15.1: http://docutils.sourceforge.net/" />
 <title>Web Widget Numeric Step</title>
 <style type="text/css">

@ -367,9 +367,10 @@ ul.auto-toc {
 !! This file is generated by oca-gen-addon-readme !!
 !! changes will be overwritten.                   !!
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
-<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/quentinDupont/web/tree/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step"><img alt="quentinDupont/web" src="https://img.shields.io/badge/github-quentinDupont%2Fweb-lightgray.png?logo=github" /></a></p>
-<p>This widget changes input number field and make it easier to incremente the number thanks to 2 buttons (+ and -).
+<p><a class="reference external" href="https://odoo-community.org/page/development-status"><img alt="Beta" src="https://img.shields.io/badge/maturity-Beta-yellow.png" /></a> <a class="reference external" href="http://www.gnu.org/licenses/agpl-3.0-standalone.html"><img alt="License: AGPL-3" src="https://img.shields.io/badge/licence-AGPL--3-blue.png" /></a> <a class="reference external" href="https://github.com/OCA/web/tree/12.0/web_widget_numeric_step"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external" href="https://translation.odoo-community.org/projects/web-12-0/web-12-0-web_widget_numeric_step"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external" href="https://runbot.odoo-community.org/runbot/162/12.0"><img alt="Try me on Runbot" src="https://img.shields.io/badge/runbot-Try%20me-875A7B.png" /></a></p>
+<p>This widget changes input number field and make it easier to increment the number thanks to 2 buttons (+ and -).
 Use JS native logic for input number, so you can use the options <tt class="docutils literal">min</tt>, <tt class="docutils literal">max</tt>, <tt class="docutils literal">step</tt>, <tt class="docutils literal">placeholder</tt>.</p>
+<p>Demo available at <cite>Settings &gt; Users &amp; Companies &gt; Users &gt; *Select One* &gt; See ‘Credit Limit’ field</cite></p>
 <p><strong>Table of contents</strong></p>
 <div class="contents local topic" id="contents">
 <ul class="simple">
@ -389,29 +390,31 @@ Use JS native logic for input number, so you can use the options <tt class="docu
 This will add the 2 buttons “+” and “-” just next to the input field in edit mode.
 Iteration step by default is 1.</p>
 <div class="figure">
-<img alt="https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/add_two_buttons.png" src="https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/add_two_buttons.png" />
+<img alt="https://raw.githubusercontent.com/OCA/web/12.0/web_widget_numeric_step/static/description/add_two_buttons.png" src="https://raw.githubusercontent.com/OCA/web/12.0/web_widget_numeric_step/static/description/add_two_buttons.png" />
 </div>
 <p><strong>Optional</strong></p>
 <p>Add an option to choose the step iteration and limits (min and max values).</p>
 <p>Example for an 0.25 step, min to -1 and max to 10 :</p>
-<p><tt class="docutils literal">&lt;field <span class="pre">name=&quot;sale_delay&quot;</span> <span class="pre">widget=&quot;numeric_step&quot;</span> <span class="pre">options=&quot;{'step':</span> 0.25, 'min': <span class="pre">-1,</span> 'max': 10}&quot; /&gt; days</tt></p>
+<pre class="code xml literal-block">
+<span class="nt">&lt;field</span> <span class="na">name=</span><span class="s">&quot;sale_delay&quot;</span> <span class="na">widget=</span><span class="s">&quot;numeric_step&quot;</span> <span class="na">options=</span><span class="s">&quot;{'step': 0.25, 'min': -1, 'max': 10}&quot;</span> <span class="nt">/&gt;</span> days
+</pre>
 <p><strong>Examples</strong></p>
 <p>Iteration with 0.25 step, min to -1 and max to 10.</p>
-<p>Start to incremente with button, continue incrementing with scrolling mouse.</p>
+<p>Start to increment with button, continue incrementing with scrolling mouse.</p>
 <div class="figure">
-<img alt="https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/step0,25andlimits.gif" src="https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/step0,25andlimits.gif" />
+<img alt="https://raw.githubusercontent.com/OCA/web/12.0/web_widget_numeric_step/static/description/step0,25andlimits.gif" src="https://raw.githubusercontent.com/OCA/web/12.0/web_widget_numeric_step/static/description/step0,25andlimits.gif" />
 </div>
 <p>Iteration with 10 step, max limit 15, placeholder with onchange</p>
 <div class="figure">
-<img alt="https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif" src="https://raw.githubusercontent.com/quentinDupont/web/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif" />
+<img alt="https://raw.githubusercontent.com/OCA/web/12.0/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif" src="https://raw.githubusercontent.com/OCA/web/12.0/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif" />
 </div>
 </div>
 <div class="section" id="bug-tracker">
 <h1><a class="toc-backref" href="#id2">Bug Tracker</a></h1>
-<p>Bugs are tracked on <a class="reference external" href="https://github.com/quentinDupont/web/issues">GitHub Issues</a>.
+<p>Bugs are tracked on <a class="reference external" href="https://github.com/OCA/web/issues">GitHub Issues</a>.
 In case of trouble, please check there if your issue has already been reported.
 If you spotted it first, help us smashing it by providing a detailed and welcomed
-<a class="reference external" href="https://github.com/quentinDupont/web/issues/new?body=module:%20web_widget_numeric_step%0Aversion:%2012.0_ADD_web_widget_ux_choice%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
+<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_widget_numeric_step%0Aversion:%2012.0%0A%0A**Steps%20to%20reproduce**%0A-%20...%0A%0A**Current%20behavior**%0A%0A**Expected%20behavior**">feedback</a>.</p>
 <p>Do not contact contributors directly about support or help with technical issues.</p>
 </div>
 <div class="section" id="credits">
@ -420,6 +423,7 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
 <h2><a class="toc-backref" href="#id4">Authors</a></h2>
 <ul class="simple">
 <li>GRAP</li>
+<li>Tecnativa</li>
 </ul>
 </div>
 <div class="section" id="contributors">
@ -429,12 +433,21 @@ If you spotted it first, help us smashing it by providing a detailed and welcome
 <li>Quentin DUPONT &lt;<a class="reference external" href="mailto:quentin.dupont&#64;grap.coop">quentin.dupont&#64;grap.coop</a>&gt;</li>
 </ul>
 </li>
+<li><a class="reference external" href="https://www.tecnativa.com/">Tecnativa</a>:<ul>
+<li>Alexandre Díaz</li>
+</ul>
+</li>
 </ul>
 </div>
 <div class="section" id="maintainers">
 <h2><a class="toc-backref" href="#id6">Maintainers</a></h2>
-<p>This module is part of the <a class="reference external" href="https://github.com/quentinDupont/web/tree/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step">quentinDupont/web</a> project on GitHub.</p>
-<p>You are welcome to contribute.</p>
+<p>This module is maintained by the OCA.</p>
+<a class="reference external image-reference" href="https://odoo-community.org"><img alt="Odoo Community Association" src="https://odoo-community.org/logo.png" /></a>
+<p>OCA, or the Odoo Community Association, is a nonprofit organization whose
+mission is to support the collaborative development of Odoo features and
+promote its widespread use.</p>
+<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/12.0/web_widget_numeric_step">OCA/web</a> project on GitHub.</p>
+<p>You are welcome to contribute. To learn how please visit <a class="reference external" href="https://odoo-community.org/page/Contribute">https://odoo-community.org/page/Contribute</a>.</p>
 </div>
 </div>
 </div>
--- a/web_widget_numeric_step/static/src/css/numeric_step.scss
+++ b/web_widget_numeric_step/static/src/css/numeric_step.scss
@ -0,0 +1,3 @@
+.widget_numeric_step {
+    display: inline-flex;
+}
--- a/web_widget_numeric_step/static/src/js/numeric_step.js
+++ b/web_widget_numeric_step/static/src/js/numeric_step.js
@ -1,95 +1,245 @@
-/**
-* Copyright (C) 2019 - Today: GRAP (http://www.grap.coop)
-* @author: Quentin DUPONT <quentin.dupont@grap.coop>
-* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html) **/
+/* Copyright 2019 GRAP - Quentin DUPONT
+ * Copyright 2020 Tecnativa - Alexandre Díaz
+ * License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html) */

-odoo.define('web.web_widget_numeric_step', function(require) {
+odoo.define('web_widget_numeric_step.field', function (require) {
    "use strict";

    var Registry = require('web.field_registry');
-    var NumericStep = require('web.basic_fields').FieldFloat;
-
-    /**
-    * Get decimal precision for the input field
-    *
-    * @param {object} input Input field
-    * @return {int} Precision
-    */
-    function getPrecision(input) {
-      if (!isFinite(input)) return 0;
-      var ten_multiple = 1, precision = 0;
-      while (Math.round(input * ten_multiple) / ten_multiple !== input) {
-        ten_multiple *= 10;
-        precision++;
-       }
-      return precision;
-    }
-
-    /**
-    * Increase input number with chosen step iteration
-    *
-    * @param {object} self Input field
-    * @param {Float} step Step iteration
-    * @param {String} minusOrPlus Choose "minus" to decrease. Default is "plus"
-    */
-    function addStep(self, step, minusOrPlus) {
-        var oldVal= parseFloat(self._getValue());
-        var precision = Math.max(getPrecision(oldVal), getPrecision(step))
-        if (minusOrPlus == "minus") {
-            step = -step
-        }
-        var newVal = oldVal + step;
-        // Check input limits
-        if (newVal > self.attrs.options.max) {
-            newVal = self.attrs.options.max;
-        } else if (newVal < self.attrs.options.min) {
-            newVal = self.attrs.options.min;
-        }
-        var newVal_s = newVal.toFixed(precision).toString();
-        self._setValue(newVal_s); 
-        self.$input[0].value = newVal_s;
-    }
+    var FieldFloat = require('web.basic_fields').FieldFloat;


-    NumericStep.include({
+    var NumericStep = FieldFloat.extend({
        template: 'web_widget_numeric_step',
+        className: 'o_field_numeric_step o_field_number',
+        events: _.extend({}, FieldFloat.prototype.events, {
+            'mousedown .btn_numeric_step': '_onStepMouseDown',
+            'touchstart .btn_numeric_step': '_onStepMouseDown',
+            'click .btn_numeric_step': '_onStepClick',
+            'wheel .input_numeric_step': '_onWheel',
+            'keydown .input_numeric_step': '_onKeyDown',
+            'change .input_numeric_step': '_onChange',
+        }),
+        supportedFieldTypes: ['float', 'integer'],

-        _render: function () {
-            var self = this;
-            // Use native options for input number
-            this.nodeOptions['type'] = "number";
-            this._super();
+        // Values in milliseconds used for mouse down smooth speed feature
+        DEF_CLICK_DELAY: 400,
+        MIN_DELAY: 50,
+        SUBSTRACT_DELAY_STEP: 25,

-            // Add native options for input number
-            var input_number_options = ['max', 'min', 'placeholder', 'step'];
-            for (var options of input_number_options) {
-                if (typeof this.nodeOptions[options] !== 'undefined') {
-                    this.$el[0][options] = this.nodeOptions[options];
-                } 
+        init: function () {
+            this._super.apply(this, arguments);
+
+            // Widget config
+            var max_val = this.nodeOptions.max;
+            var min_val = this.nodeOptions.min;
+            if (!_.isUndefined(min_val) && !_.isUndefined(max_val) && min_val > max_val) {
+                min_val = this.nodeOptions.max;
+                max_val = this.nodeOptions.min;
            }

-            this.$("button").parents().removeClass("o_field_integer o_field_number o_input o_required_modifier");
-            this.$("button").click(function() {
-                var node = $(this).parent()[0];
-
-                // Get step option or default is 1
-                if (typeof node.attributes['step'] !== 'undefined') {
-                    var step = parseFloat(node.attributes['step'].value);
-                } else {
-                    var step = 1;
-                }
-                // PLUS button
-                if ($(this).hasClass("btn_numeric_step_plus")) {
-                    addStep(self, step, "plus")
-                // MINUS button
-                } else if ($(this).hasClass("btn_numeric_step_minus")){
-                    addStep(self, step, "minus")
-
+            this._config = {
+                'step': Number(this.nodeOptions.step) || 1,
+                'min': Number(min_val),
+                'max': Number(max_val),
            };
+        },
+
+        /**
+         * Add global events listeners
+         *
+         * @override
+         */
+        start: function () {
+            var self = this;
+            this._click_delay = this.DEF_CLICK_DELAY;
+            this._autoStep = false;
+            return this._super.apply(this, arguments).then(function () {
+                document.addEventListener(
+                    'mouseup', $.proxy(self, "_onMouseUp"), false);
+                document.addEventListener(
+                    'touchend', $.proxy(self, "_onMouseUp"), false);
            });
        },
+
+        /**
+         * Transform database value to usable widget value
+         *
+         * @override
+         */
+        _formatValue: function (value) {
+            if (this.mode === 'edit') {
+                return this._sanitizeNumberValue(value);
+            }
+            return this._super.apply(this, arguments);
+        },
+
+        /**
+         * Transform widget value to usable database value
+         *
+         * @override
+         */
+        _parseValue: function () {
+            var parsedVal = this._super.apply(this, arguments);
+            if (this.mode === 'edit') {
+                return Number(parsedVal) || 0;
+            }
+            return parsedVal;
+        },
+
+        /**
+         * Adds HTML attributes to the input
+         *
+         * @override
+         */
+        _prepareInput: function () {
+            var result = this._super.apply(this, arguments);
+            this.$input.attr(_.pick(this.nodeOptions, ['placeholder']));
+            // InputField hard set the input type to 'text' or 'password',
+            // we force it again to be 'tel'.
+            // The widget uses 'tel' type because offers a good layout on
+            // mobiles and can accept alphanumeric characters.
+            // The bad news is that require implement all good 'number' type
+            // features like the minus and plus buttons, steps, min and max...
+            // Perhaps in a near future this can be improved to have the best of
+            // two types without hacky developments.
+            this.$input.attr('type', 'tel');
+            return result;
+        },
+
+        /**
+         * Select the proper widget input
+         *
+         * @override
+         */
+        _renderEdit: function () {
+            this._prepareInput(this.$el.find('input.input_numeric_step'));
+        },
+
+        /**
+         * Increase/Decrease widget input value
+         *
+         * @param {String} mode can be "plus" or "minus"
+         */
+        _doStep: function (mode) {
+            var cval = Number(this.$input.val());
+            if (_.isNaN(cval)) {
+                return;
+            }
+            if (mode === 'plus') {
+                cval += this._config.step;
+            } else if (mode === 'minus') {
+                cval -= this._config.step;
+            }
+            this.$input.val(this._sanitizeNumberValue(cval));
+            this.isDirty = true;
+            this._doDebouncedAction();
+        },
+
+        // Handle Events
+        _onStepClick: function (ev) {
+            if (!this._autoStep) {
+                var mode = ev.target.dataset.mode;
+                this._doStep(mode);
+            }
+            this._autoStep = false;
+        },
+
+        _onStepMouseDown: function (ev) {
+            this._interval = setTimeout(
+                $.proxy(this, "_whileMouseDown", ev), this._click_delay);
+        },
+
+        _onMouseUp: function () {
+            clearTimeout(this._interval);
+            this._interval = false;
+            this._click_delay = this.DEF_CLICK_DELAY;
+        },
+
+        _whileMouseDown: function (ev) {
+            this._autoStep = true;
+            var mode = ev.target.dataset.mode;
+            this._doStep(mode);
+            if (this._click_delay > this.MIN_DELAY) {
+                this._click_delay -= this.SUBSTRACT_DELAY_STEP;
+            }
+
+            this._onStepMouseDown(ev);
+        },
+
+        /**
+         * Enable mouse wheel support
+         *
+         * @param {WheelEvent} ev
+         */
+        _onWheel: function (ev) {
+            ev.preventDefault();
+            if (ev.originalEvent.deltaY > 0) {
+                this._doStep('minus');
+            } else {
+                this._doStep('plus');
+            }
+        },
+
+        /**
+         * Enable keyboard arrows support
+         *
+         * @param {KeyEvent} ev
+         */
+        _onKeyDown: function (ev) {
+            if (ev.keyCode === $.ui.keyCode.UP) {
+                this._doStep('plus');
+            } else if (ev.keyCode === $.ui.keyCode.DOWN) {
+                this._doStep('minus');
+            }
+        },
+
+        /**
+         * Sanitize user input value
+         *
+         * @param {ChangeEvent} ev
+         */
+        _onChange: function (ev) {
+            ev.target.value = this._sanitizeNumberValue(ev.target.value);
+        },
+
+        // Helper Functions
+        /*
+         * Get field precision (really used by floats)
+         */
+        _getPrecision: function () {
+            var field = this.record.fields[this.name];
+            if (field && 'digits' in field && field.digits.length === 2) {
+                return field.digits[1];
+            }
+
+            return 0;
+        },
+
+        /**
+         * Check limits and precision of the value.
+         * If the value 'is not a number', the function does nothing to
+         * be good with other possible modules.
+         *
+         * @param {Number} value
+         * @returns {Number}
+         */
+        _sanitizeNumberValue: function (value) {
+            var cval = Number(value);
+            if (_.isNaN(cval)) {
+                return value;
+            }
+            if (!_.isNaN(this._config.min) && cval < this._config.min) {
+                cval = this._config.min;
+            } else if (!_.isNaN(this._config.max) && cval > this._config.max) {
+                cval = this._config.max;
+            }
+            return cval.toFixed(this._getPrecision());
+        },
    });

    Registry.add('numeric_step', NumericStep);

+    return NumericStep;
+
 });
--- a/web_widget_numeric_step/static/src/scss/numeric_step.scss
+++ b/web_widget_numeric_step/static/src/scss/numeric_step.scss
@ -1,29 +0,0 @@
-
-.input_numeric_step {
-    width: 71% !important;
-}
-
-.btns_numeric_step {
-    width: 27% !important;
-    button {
-        height: 25px;
-    }
-}
-
-/* Turn Off Number Input Spinners */
-input{
-    /* Firefox */
-    -moz-appearance: textfield;
-
-    /* Chrome */
-    &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin:0;
-    }
-
-    /* Opéra*/
-    &::-o-inner-spin-button {
-        -o-appearance: none;
-        margin: 0; 
-    }
-}
--- a/web_widget_numeric_step/static/src/xml/numeric_step.xml
+++ b/web_widget_numeric_step/static/src/xml/numeric_step.xml
@ -1,19 +1,28 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
-Copyright (C) 2019 - Today: GRAP (http://www.grap.coop)
-@author: Quentin DUPONT <quentin.dupont@grap.coop>
+Copyright 2019 GRAP - Quentin DUPONT
+Copyright 2020 Tecnativa - Alexandre Díaz
 License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
 -->
 <templates>
+
    <t t-name="web_widget_numeric_step">
        <t t-if="widget.mode != 'readonly'">
-            <input type="number" class="input_numeric_step"/>
-            <div class="btns_numeric_step">
-                <button class="fa fa-plus btn btn-secondary btn_numeric_step_plus" aria-label="Plus" title="Plus"/><button class="fa fa-minus btn btn-secondary btn_numeric_step_minus" aria-label="Minus" title="Minus"/>
+            <div class="input-group widget_numeric_step">
+                <div class="input-group-prepend">
+                    <button class="fa fa-minus btn btn-default btn_numeric_step"
+                            aria-label="Minus" title="Minus" type="button" data-mode="minus"/>
+                </div>
+                <input type="tel" class="form-control input_numeric_step" aria-label="Value" />
+                <div class="input-group-append">
+                    <button class="fa fa-plus btn btn-default btn_numeric_step"
+                            aria-label="Plus" title="Plus" type="button" data-mode="plus"/>
+                </div>
            </div>
        </t>
-        <t t-if="widget.mode == 'readonly'">
+        <t t-else="">
            <field/>
        </t>
    </t>
+
 </templates>
--- a/web_widget_numeric_step/view/web_widget_numeric_step.xml
+++ b/web_widget_numeric_step/view/web_widget_numeric_step.xml
@ -1,9 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <odoo>
+
    <template id="assets_backend" inherit_id="web.assets_backend">
        <xpath expr="." position="inside">
-            <link rel="stylesheet" href="/web_widget_numeric_step/static/src/scss/numeric_step.scss"/>
+            <link rel="stylesheet" href="/web_widget_numeric_step/static/src/css/numeric_step.scss"/>
            <script type="text/javascript" src="/web_widget_numeric_step/static/src/js/numeric_step.js"></script>
        </xpath>
    </template>
+
 </odoo>