diff --git a/web_widget_numeric_step/README.rst b/web_widget_numeric_step/README.rst new file mode 100644 index 000000000..4e45fa408 --- /dev/null +++ b/web_widget_numeric_step/README.rst @@ -0,0 +1,90 @@ +======================= +Web Widget Numeric Step +======================= + +.. !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! This file is generated by oca-gen-addon-readme !! + !! changes will be overwritten. !! + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + +.. |badge1| image:: https://img.shields.io/badge/maturity-Beta-yellow.png + :target: https://odoo-community.org/page/development-status + :alt: Beta +.. |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 + +|badge1| |badge2| |badge3| + +This widget changes input number field and make it easier to incremente the number thanks to 2 buttons (+ and -). +Use JS native logic for input number, so you can use the options ``min``, ``max``, ``step``, ``placeholder``. + +**Table of contents** + +.. contents:: + :local: + +Usage +===== + +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 + + +**Optional** + +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 : + +`` days`` + +**Examples** + +Iteration with 0.25 step, min to -1 and max to 10. + +Start to incremente 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 + +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 + +Bug Tracker +=========== + +Bugs are tracked on `GitHub 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 `_. + +Do not contact contributors directly about support or help with technical issues. + +Credits +======= + +Authors +~~~~~~~ + +* GRAP + +Contributors +~~~~~~~~~~~~ + +* `GRAP `_: + + * Quentin DUPONT + +Maintainers +~~~~~~~~~~~ + +This module is part of the `quentinDupont/web `_ project on GitHub. + +You are welcome to contribute. diff --git a/web_widget_numeric_step/__init__.py b/web_widget_numeric_step/__init__.py new file mode 100644 index 000000000..e69de29bb diff --git a/web_widget_numeric_step/__manifest__.py b/web_widget_numeric_step/__manifest__.py new file mode 100644 index 000000000..7830c8688 --- /dev/null +++ b/web_widget_numeric_step/__manifest__.py @@ -0,0 +1,21 @@ +# Odoo, Open Source Web Widget Numeric Step +# +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).# +{ + 'name': "Web Widget Numeric Step", + 'category': "web", + 'version': "12.0.1.0.0", + 'author': "GRAP, " + "Odoo Community Association (OCA)", + 'license': 'AGPL-3', + 'website': 'https://github.com/OCA/web', + 'depends': ['web'], + 'data': [ + 'view/web_widget_numeric_step.xml' + ], + 'qweb': [ + 'static/src/xml/numeric_step.xml', + ], + 'auto_install': False, + 'installable': True, +} diff --git a/web_widget_numeric_step/i18n/fr.po b/web_widget_numeric_step/i18n/fr.po new file mode 100644 index 000000000..3be7542a9 --- /dev/null +++ b/web_widget_numeric_step/i18n/fr.po @@ -0,0 +1,31 @@ +# Translation of Odoo Server. +# This file contains the translation of the following modules: +# * web_widget_number_ux_choice +# +msgid "" +msgstr "" +"Project-Id-Version: Odoo Server 12.0\n" +"Report-Msgid-Bugs-To: \n" +"POT-Creation-Date: 2019-08-30 12:07+0000\n" +"PO-Revision-Date: 2019-08-30 12:07+0000\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_number_ux_choice +#. openerp-web +#: code:addons/web_widget_number_ux_choice/static/src/xml/number_ux_choice.xml:12 +#, python-format +msgid "Minus" +msgstr "Moins" + +#. module: web_widget_number_ux_choice +#. openerp-web +#: code:addons/web_widget_number_ux_choice/static/src/xml/number_ux_choice.xml:12 +#, python-format +msgid "Plus" +msgstr "Plus" + diff --git a/web_widget_numeric_step/readme/CONTRIBUTORS.rst b/web_widget_numeric_step/readme/CONTRIBUTORS.rst new file mode 100644 index 000000000..65f8f81d1 --- /dev/null +++ b/web_widget_numeric_step/readme/CONTRIBUTORS.rst @@ -0,0 +1,3 @@ +* `GRAP `_: + + * Quentin DUPONT diff --git a/web_widget_numeric_step/readme/DESCRIPTION.rst b/web_widget_numeric_step/readme/DESCRIPTION.rst new file mode 100644 index 000000000..f4906b4ab --- /dev/null +++ b/web_widget_numeric_step/readme/DESCRIPTION.rst @@ -0,0 +1,2 @@ +This widget changes input number field and make it easier to incremente the number thanks to 2 buttons (+ and -). +Use JS native logic for input number, so you can use the options ``min``, ``max``, ``step``, ``placeholder``. \ No newline at end of file diff --git a/web_widget_numeric_step/readme/USAGE.rst b/web_widget_numeric_step/readme/USAGE.rst new file mode 100644 index 000000000..47aaf790c --- /dev/null +++ b/web_widget_numeric_step/readme/USAGE.rst @@ -0,0 +1,26 @@ +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:: ../static/description/add_two_buttons.png + + +**Optional** + +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 : + +`` days`` + +**Examples** + +Iteration with 0.25 step, min to -1 and max to 10. + +Start to incremente with button, continue incrementing with scrolling mouse. + +.. figure:: ../static/description/step0,25andlimits.gif + +Iteration with 10 step, max limit 15, placeholder with onchange + +.. figure:: ../static/description/step10_limit15_placeholder117_with_onchange.gif diff --git a/web_widget_numeric_step/static/description/add_two_buttons.png b/web_widget_numeric_step/static/description/add_two_buttons.png new file mode 100644 index 000000000..2670f06ec Binary files /dev/null and b/web_widget_numeric_step/static/description/add_two_buttons.png differ diff --git a/web_widget_numeric_step/static/description/icon.png b/web_widget_numeric_step/static/description/icon.png new file mode 100644 index 000000000..3a662b992 Binary files /dev/null and b/web_widget_numeric_step/static/description/icon.png differ diff --git a/web_widget_numeric_step/static/description/index.html b/web_widget_numeric_step/static/description/index.html new file mode 100644 index 000000000..c838ff91f --- /dev/null +++ b/web_widget_numeric_step/static/description/index.html @@ -0,0 +1,442 @@ + + + + + + +Web Widget Numeric Step + + + +
+

Web Widget Numeric Step

+ + +

Beta License: AGPL-3 quentinDupont/web

+

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

+

Table of contents

+ +
+

Usage

+

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.

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

Optional

+

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

+

Examples

+

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

+

Start to incremente with button, continue incrementing with scrolling mouse.

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

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

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

Bug Tracker

+

Bugs are tracked on GitHub 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.

+

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

+
+
+

Credits

+
+

Authors

+
    +
  • GRAP
    • +
+
+
+

Contributors

+ +
+
+

Maintainers

+

This module is part of the quentinDupont/web project on GitHub.

+

You are welcome to contribute.

+
+
+
+ + diff --git a/web_widget_numeric_step/static/description/step0,25andlimits.gif b/web_widget_numeric_step/static/description/step0,25andlimits.gif new file mode 100644 index 000000000..1e5827236 Binary files /dev/null and b/web_widget_numeric_step/static/description/step0,25andlimits.gif differ diff --git a/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif b/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif new file mode 100644 index 000000000..eb0b6e815 Binary files /dev/null and b/web_widget_numeric_step/static/description/step10_limit15_placeholder117_with_onchange.gif differ diff --git a/web_widget_numeric_step/static/src/js/numeric_step.js b/web_widget_numeric_step/static/src/js/numeric_step.js new file mode 100644 index 000000000..ca54e891b --- /dev/null +++ b/web_widget_numeric_step/static/src/js/numeric_step.js @@ -0,0 +1,95 @@ +/** +* Copyright (C) 2019 - Today: GRAP (http://www.grap.coop) +* @author: Quentin DUPONT +* License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl.html) **/ + +odoo.define('web.web_widget_numeric_step', 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; + } + + + NumericStep.include({ + template: 'web_widget_numeric_step', + + _render: function () { + var self = this; + // Use native options for input number + this.nodeOptions['type'] = "number"; + this._super(); + + // 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]; + } + } + + 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") + + }; + }); + }, + }); + + Registry.add('numeric_step', NumericStep); + +}); diff --git a/web_widget_numeric_step/static/src/scss/numeric_step.scss b/web_widget_numeric_step/static/src/scss/numeric_step.scss new file mode 100644 index 000000000..df61457fc --- /dev/null +++ b/web_widget_numeric_step/static/src/scss/numeric_step.scss @@ -0,0 +1,29 @@ + +.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; + } +} diff --git a/web_widget_numeric_step/static/src/xml/numeric_step.xml b/web_widget_numeric_step/static/src/xml/numeric_step.xml new file mode 100644 index 000000000..904e4c14c --- /dev/null +++ b/web_widget_numeric_step/static/src/xml/numeric_step.xml @@ -0,0 +1,19 @@ + + + + + + +
+
+ + + + + + diff --git a/web_widget_numeric_step/view/web_widget_numeric_step.xml b/web_widget_numeric_step/view/web_widget_numeric_step.xml new file mode 100644 index 000000000..bfeb67b5a --- /dev/null +++ b/web_widget_numeric_step/view/web_widget_numeric_step.xml @@ -0,0 +1,9 @@ + + + +