Techsystech
/
web
mirror of https://github.com/OCA/web.git
3
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

[IMP] web_widget_numeric_step: Better CSS and supports mobile layouts

pull/1790/head
Alexandre Díaz 2020-02-07 02:43:49 +01:00 committed by Carlos Roca
parent 966f9e674d
commit 5fee858a45
14 changed files with 384 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
web_widget_numeric_step/README.rst
View File

@ -13,15 +13,23 @@ Web Widget Numeric Step
.. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png .. |badge2| image:: https://img.shields.io/badge/licence-AGPL--3-blue.png
:target: http://www.gnu.org/licenses/agpl-3.0-standalone.html :target: http://www.gnu.org/licenses/agpl-3.0-standalone.html
:alt: License: AGPL-3 :alt: License: AGPL-3
.. |badge3| image:: https://img.shields.io/badge/github-quentinDupont%2Fweb-lightgray.png?logo=github .. |badge3| image:: https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github
:target: https://github.com/quentinDupont/web/tree/12.0_ADD_web_widget_ux_choice/web_widget_numeric_step :target: https://github.com/OCA/web/tree/12.0/web_widget_numeric_step
:alt: quentinDupont/web :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``. 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** **Table of contents**
.. 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. This will add the 2 buttons "+" and "-" just next to the input field in edit mode.
Iteration step by default is 1. 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** **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 : 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** **Examples**
Iteration with 0.25 step, min to -1 and max to 10. 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 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 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. 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 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. Do not contact contributors directly about support or help with technical issues.
@ -74,6 +84,7 @@ Authors
~~~~~~~ ~~~~~~~
* GRAP * GRAP
* Tecnativa
Contributors Contributors
~~~~~~~~~~~~ ~~~~~~~~~~~~
@ -82,9 +93,23 @@ Contributors
* Quentin DUPONT <quentin.dupont@grap.coop> * Quentin DUPONT <quentin.dupont@grap.coop>
* `Tecnativa <https://www.tecnativa.com/>`_:
* Alexandre Díaz
Maintainers 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.

14
web_widget_numeric_step/__manifest__.py
View File

@ -1,21 +1,25 @@
# Odoo, Open Source Web Widget Numeric Step # Copyright 2019 GRAP - Quentin DUPONT
# # Copyright 2020 Tecnativa - Alexandre Díaz
# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).# # License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html)
{ {
'name': "Web Widget Numeric Step", 'name': "Web Widget Numeric Step",
'category': "web", 'category': "web",
'version': "12.0.1.0.0", 'version': "12.0.1.0.0",
'author': "GRAP, " 'author': "GRAP, Tecnativa, "
"Odoo Community Association (OCA)", "Odoo Community Association (OCA)",
'license': 'AGPL-3', 'license': 'AGPL-3',
'website': 'https://github.com/OCA/web', 'website': 'https://github.com/OCA/web',
'depends': ['web'], 'depends': ['web'],
'data': [ 'data': [
'view/web_widget_numeric_step.xml' 'view/assets.xml'
], ],
'qweb': [ 'qweb': [
'static/src/xml/numeric_step.xml', 'static/src/xml/numeric_step.xml',
], ],
'demo': [
'demo/res_users_view.xml'
],
'auto_install': False, 'auto_install': False,
'installable': True, 'installable': True,
} }

17
web_widget_numeric_step/demo/res_users_view.xml 100644
View File

@ -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>

10
web_widget_numeric_step/i18n/fr.po
View File

@ -10,22 +10,22 @@ msgstr ""
"PO-Revision-Date: 2019-08-30 12:07+0000\n" "PO-Revision-Date: 2019-08-30 12:07+0000\n"
"Last-Translator: <>\n" "Last-Translator: <>\n"
"Language-Team: \n" "Language-Team: \n"
"Language: \n"
"MIME-Version: 1.0\n" "MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n" "Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: \n" "Content-Transfer-Encoding: \n"
"Plural-Forms: \n" "Plural-Forms: \n"
#. module: web_widget_number_ux_choice #. module: web_widget_numeric_step
#. openerp-web #. 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 #, python-format
msgid "Minus" msgid "Minus"
msgstr "Moins" msgstr "Moins"
#. module: web_widget_number_ux_choice #. module: web_widget_numeric_step
#. openerp-web #. 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 #, python-format
msgid "Plus" msgid "Plus"
msgstr "Plus" msgstr "Plus"

29
web_widget_numeric_step/i18n/web_widget_numeric_step.pot 100644
View File

@ -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 ""

4
web_widget_numeric_step/readme/CONTRIBUTORS.rst
View File

@ -1,3 +1,7 @@
* `GRAP <http://www.grap.coop>`_: * `GRAP <http://www.grap.coop>`_:
* Quentin DUPONT <quentin.dupont@grap.coop> * Quentin DUPONT <quentin.dupont@grap.coop>
* `Tecnativa <https://www.tecnativa.com/>`_:
* Alexandre Díaz

4
web_widget_numeric_step/readme/DESCRIPTION.rst
View File

@ -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``. 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`

6
web_widget_numeric_step/readme/USAGE.rst
View File

@ -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 : 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** **Examples**
Iteration with 0.25 step, min to -1 and max to 10. 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 .. figure:: ../static/description/step0,25andlimits.gif

37
web_widget_numeric_step/static/description/index.html
View File

@ -3,7 +3,7 @@
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <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> <title>Web Widget Numeric Step</title>
<style type="text/css"> <style type="text/css">
@ -367,9 +367,10 @@ ul.auto-toc {
!! This file is generated by oca-gen-addon-readme !! !! This file is generated by oca-gen-addon-readme !!
!! changes will be overwritten. !! !! 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><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 incremente the number thanks to 2 buttons (+ and -). <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> 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> <p><strong>Table of contents</strong></p>
<div class="contents local topic" id="contents"> <div class="contents local topic" id="contents">
<ul class="simple"> <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. This will add the 2 buttons “+” and “-” just next to the input field in edit mode.
Iteration step by default is 1.</p> Iteration step by default is 1.</p>
<div class="figure"> <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> </div>
<p><strong>Optional</strong></p> <p><strong>Optional</strong></p>
<p>Add an option to choose the step iteration and limits (min and max values).</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>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><strong>Examples</strong></p>
<p>Iteration with 0.25 step, min to -1 and max to 10.</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"> <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> </div>
<p>Iteration with 10 step, max limit 15, placeholder with onchange</p> <p>Iteration with 10 step, max limit 15, placeholder with onchange</p>
<div class="figure"> <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> </div>
<div class="section" id="bug-tracker"> <div class="section" id="bug-tracker">
<h1><a class="toc-backref" href="#id2">Bug Tracker</a></h1> <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. 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 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> <p>Do not contact contributors directly about support or help with technical issues.</p>
</div> </div>
<div class="section" id="credits"> <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> <h2><a class="toc-backref" href="#id4">Authors</a></h2>
<ul class="simple"> <ul class="simple">
<li>GRAP</li> <li>GRAP</li>
<li>Tecnativa</li>
</ul> </ul>
</div> </div>
<div class="section" id="contributors"> <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> <li>Quentin DUPONT &lt;<a class="reference external" href="mailto:quentin.dupont&#64;grap.coop">quentin.dupont&#64;grap.coop</a>&gt;</li>
</ul> </ul>
</li> </li>
<li><a class="reference external" href="https://www.tecnativa.com/">Tecnativa</a>:<ul>
<li>Alexandre Díaz</li>
</ul>
</li>
</ul> </ul>
</div> </div>
<div class="section" id="maintainers"> <div class="section" id="maintainers">
<h2><a class="toc-backref" href="#id6">Maintainers</a></h2> <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>This module is maintained by the OCA.</p>
<p>You are welcome to contribute.</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> </div>
</div> </div>

3
web_widget_numeric_step/static/src/css/numeric_step.scss 100644
View File

@ -0,0 +1,3 @@
.widget_numeric_step {
display: inline-flex;
}

302
web_widget_numeric_step/static/src/js/numeric_step.js
View File

@ -1,95 +1,245 @@
/** /* Copyright 2019 GRAP - Quentin DUPONT
* Copyright (C) 2019 - Today: GRAP (http://www.grap.coop) * Copyright 2020 Tecnativa - Alexandre Díaz
* @author: Quentin DUPONT <quentin.dupont@grap.coop> * License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html) */
* 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"; "use strict";
var Registry = require('web.field_registry'); var Registry = require('web.field_registry');
var NumericStep = require('web.basic_fields').FieldFloat; var FieldFloat = 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;
}
NumericStep.include({ var NumericStep = FieldFloat.extend({
template: 'web_widget_numeric_step', 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 () { // Values in milliseconds used for mouse down smooth speed feature
var self = this; DEF_CLICK_DELAY: 400,
// Use native options for input number MIN_DELAY: 50,
this.nodeOptions['type'] = "number"; SUBSTRACT_DELAY_STEP: 25,
this._super();
// Add native options for input number init: function () {
var input_number_options = ['max', 'min', 'placeholder', 'step']; this._super.apply(this, arguments);
for (var options of input_number_options) {
if (typeof this.nodeOptions[options] !== 'undefined') { // Widget config
this.$el[0][options] = this.nodeOptions[options]; 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._config = {
this.$("button").click(function() { 'step': Number(this.nodeOptions.step) || 1,
var node = $(this).parent()[0]; 'min': Number(min_val),
'max': Number(max_val),
// 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")
}; };
},
/**
* 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); Registry.add('numeric_step', NumericStep);
return NumericStep;
}); });

29
web_widget_numeric_step/static/src/scss/numeric_step.scss
View File

@ -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;
}
}

21
web_widget_numeric_step/static/src/xml/numeric_step.xml
View File

@ -1,19 +1,28 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<!-- <!--
Copyright (C) 2019 - Today: GRAP (http://www.grap.coop) Copyright 2019 GRAP - Quentin DUPONT
@author: Quentin DUPONT <quentin.dupont@grap.coop> Copyright 2020 Tecnativa - Alexandre Díaz
License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html). License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html).
--> -->
<templates> <templates>
<t t-name="web_widget_numeric_step"> <t t-name="web_widget_numeric_step">
<t t-if="widget.mode != 'readonly'"> <t t-if="widget.mode != 'readonly'">
<input type="number" class="input_numeric_step"/> <div class="input-group widget_numeric_step">
<div class="btns_numeric_step"> <div class="input-group-prepend">
<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"/> <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> </div>
</t> </t>
<t t-if="widget.mode == 'readonly'"> <t t-else="">
<field/> <field/>
</t> </t>
</t> </t>
</templates> </templates>

4
web_widget_numeric_step/view/web_widget_numeric_step.xml → web_widget_numeric_step/view/assets.xml
View File

@ -1,9 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<odoo> <odoo>
<template id="assets_backend" inherit_id="web.assets_backend"> <template id="assets_backend" inherit_id="web.assets_backend">
<xpath expr="." position="inside"> <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> <script type="text/javascript" src="/web_widget_numeric_step/static/src/js/numeric_step.js"></script>
</xpath> </xpath>
</template> </template>
</odoo> </odoo>