diff --git a/setup/web_widget_progressbar_gradient/odoo/addons/web_widget_progressbar_gradient b/setup/web_widget_progressbar_gradient/odoo/addons/web_widget_progressbar_gradient new file mode 120000 index 00000000000..6aa212cb614 --- /dev/null +++ b/setup/web_widget_progressbar_gradient/odoo/addons/web_widget_progressbar_gradient @@ -0,0 +1 @@ +../../../../web_widget_progressbar_gradient \ No newline at end of file diff --git a/setup/web_widget_progressbar_gradient/setup.py b/setup/web_widget_progressbar_gradient/setup.py new file mode 100644 index 00000000000..28c57bb6403 --- /dev/null +++ b/setup/web_widget_progressbar_gradient/setup.py @@ -0,0 +1,6 @@ +import setuptools + +setuptools.setup( + setup_requires=['setuptools-odoo'], + odoo_addon=True, +) diff --git a/web_widget_progressbar_gradient/README.rst b/web_widget_progressbar_gradient/README.rst new file mode 100644 index 00000000000..fd73c1051dc --- /dev/null +++ b/web_widget_progressbar_gradient/README.rst @@ -0,0 +1,113 @@ +=============================== +Web Widget Progressbar Gradient +=============================== + +.. + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! This file is generated by oca-gen-addon-readme !! + !! changes will be overwritten. !! + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + !! source digest: sha256:52cefe47def0fe37ee1abf6e7e2e7a7d91a660212b9e1729421d1bd15449af98 + !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! + +.. |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-OCA%2Fweb-lightgray.png?logo=github + :target: https://github.com/OCA/web/tree/16.0/web_widget_progressbar_gradient + :alt: OCA/web +.. |badge4| image:: https://img.shields.io/badge/weblate-Translate%20me-F47D42.png + :target: https://translation.odoo-community.org/projects/web-16-0/web-16-0-web_widget_progressbar_gradient + :alt: Translate me on Weblate +.. |badge5| image:: https://img.shields.io/badge/runboat-Try%20me-875A7B.png + :target: https://runboat.odoo-community.org/builds?repo=OCA/web&target_branch=16.0 + :alt: Try me on Runboat + +|badge1| |badge2| |badge3| |badge4| |badge5| + +This module allows to display progress bars with colorized gradient bar. +The color will increase following value from green passing per yellow +and finishing to red. + +- Normal rendering: + +|Progressbar Gradient| + +- Reverse rendering: + +|Progressbar Inverse Gradient| + +.. |Progressbar Gradient| image:: https://raw.githubusercontent.com/OCA/web/16.0/web_widget_progressbar_gradient/static/description/progressbar_gradient.png +.. |Progressbar Inverse Gradient| image:: https://raw.githubusercontent.com/OCA/web/16.0/web_widget_progressbar_gradient/static/description/progressbar_gradient_inverse.png + +**Table of contents** + +.. contents:: + :local: + +Usage +===== + +- When declaring a progressbar field, use the 'progressbar_color' + widget. +- Add the inverse option to reverse the colors on the progress bar + field: ``options="{'inverse': true}"`` + +Known issues / Roadmap +====================== + +- Be able to configure steps values for the three colors and also in + inversed mode. + +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 to smash it by providing a detailed and welcomed +`feedback `_. + +Do not contact contributors directly about support or help with technical issues. + +Credits +======= + +Authors +------- + +* ACSONE SA/NV + +Contributors +------------ + +- Denis Roussel denis.roussel@acsone.eu +- Jacques-Etienne Baudoux je@bcim.be +- Souheil Bejaoui souheil.bejaoui@acsone.eu + +Maintainers +----------- + +This module is maintained by the OCA. + +.. 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. + +.. |maintainer-rousseldenis| image:: https://github.com/rousseldenis.png?size=40px + :target: https://github.com/rousseldenis + :alt: rousseldenis + +Current `maintainer `__: + +|maintainer-rousseldenis| + +This module is part of the `OCA/web `_ project on GitHub. + +You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute. diff --git a/web_widget_progressbar_gradient/__init__.py b/web_widget_progressbar_gradient/__init__.py new file mode 100644 index 00000000000..e69de29bb2d diff --git a/web_widget_progressbar_gradient/__manifest__.py b/web_widget_progressbar_gradient/__manifest__.py new file mode 100644 index 00000000000..03c8780377f --- /dev/null +++ b/web_widget_progressbar_gradient/__manifest__.py @@ -0,0 +1,20 @@ +# Copyright 2024 ACSONE SA/NV +# License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). + +{ + "name": "Web Widget Progressbar Gradient", + "summary": """This module allows to display progressbar with gradient""", + "version": "16.0.1.0.0", + "license": "AGPL-3", + "author": "ACSONE SA/NV,Odoo Community Association (OCA)", + "website": "https://github.com/OCA/web", + "maintainers": ["rousseldenis"], + "depends": ["web"], + "assets": { + "web.assets_backend": [ + "web_widget_progressbar_gradient/static/src/scss/progressbar.scss", + "web_widget_progressbar_gradient/static/src/xml/progressbar.xml", + "web_widget_progressbar_gradient/static/src/js/progressbar.esm.js", + ], + }, +} diff --git a/web_widget_progressbar_gradient/readme/CONTRIBUTORS.md b/web_widget_progressbar_gradient/readme/CONTRIBUTORS.md new file mode 100644 index 00000000000..2c5aaa0206f --- /dev/null +++ b/web_widget_progressbar_gradient/readme/CONTRIBUTORS.md @@ -0,0 +1,3 @@ +- Denis Roussel +- Jacques-Etienne Baudoux +- Souheil Bejaoui diff --git a/web_widget_progressbar_gradient/readme/DESCRIPTION.md b/web_widget_progressbar_gradient/readme/DESCRIPTION.md new file mode 100644 index 00000000000..02a379a11ed --- /dev/null +++ b/web_widget_progressbar_gradient/readme/DESCRIPTION.md @@ -0,0 +1,11 @@ +This module allows to display progress bars with colorized gradient bar. +The color will increase following value from green passing per yellow +and finishing to red. + +- Normal rendering: + +![Progressbar Gradient](../static/description/progressbar_gradient.png) + +- Reverse rendering: + +![Progressbar Inverse Gradient](../static/description/progressbar_gradient_inverse.png) diff --git a/web_widget_progressbar_gradient/readme/ROADMAP.md b/web_widget_progressbar_gradient/readme/ROADMAP.md new file mode 100644 index 00000000000..a0fecb913b1 --- /dev/null +++ b/web_widget_progressbar_gradient/readme/ROADMAP.md @@ -0,0 +1 @@ +- Be able to configure steps values for the three colors and also in inversed mode. diff --git a/web_widget_progressbar_gradient/readme/USAGE.md b/web_widget_progressbar_gradient/readme/USAGE.md new file mode 100644 index 00000000000..a3cd945eea1 --- /dev/null +++ b/web_widget_progressbar_gradient/readme/USAGE.md @@ -0,0 +1,3 @@ +- When declaring a progressbar field, use the 'progressbar_color' widget. +- Add the inverse option to reverse the colors on the progress bar field: + ``options="{'inverse': true}"`` diff --git a/web_widget_progressbar_gradient/static/description/icon.png b/web_widget_progressbar_gradient/static/description/icon.png new file mode 100644 index 00000000000..3a0328b516c Binary files /dev/null and b/web_widget_progressbar_gradient/static/description/icon.png differ diff --git a/web_widget_progressbar_gradient/static/description/index.html b/web_widget_progressbar_gradient/static/description/index.html new file mode 100644 index 00000000000..a855bd23c46 --- /dev/null +++ b/web_widget_progressbar_gradient/static/description/index.html @@ -0,0 +1,455 @@ + + + + + +Web Widget Progressbar Gradient + + + +
+

Web Widget Progressbar Gradient

+ + +

Beta License: AGPL-3 OCA/web Translate me on Weblate Try me on Runboat

+

This module allows to display progress bars with colorized gradient bar. +The color will increase following value from green passing per yellow +and finishing to red.

+
    +
  • Normal rendering:
    • +
+

Progressbar Gradient

+
    +
  • Reverse rendering:
    • +
+

Progressbar Inverse Gradient

+

Table of contents

+ +
+

Usage

+
    +
  • When declaring a progressbar field, use the ‘progressbar_color’ +widget.
    • +
  • Add the inverse option to reverse the colors on the progress bar +field: options="{'inverse': true}"
    • +
+
+
+

Known issues / Roadmap

+
    +
  • Be able to configure steps values for the three colors and also in +inversed mode.
    • +
+
+
+

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 to smash it by providing a detailed and welcomed +feedback.

+

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

+
+
+

Credits

+
+

Authors

+
    +
  • ACSONE SA/NV
    • +
+
+
+

Contributors

+ +
+
+

Maintainers

+

This module is maintained by the OCA.

+ +Odoo Community Association + +

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.

+

Current maintainer:

+

rousseldenis

+

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

+

You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

+
+
+
+ + diff --git a/web_widget_progressbar_gradient/static/description/progressbar_gradient.png b/web_widget_progressbar_gradient/static/description/progressbar_gradient.png new file mode 100644 index 00000000000..3ef7bbbb584 Binary files /dev/null and b/web_widget_progressbar_gradient/static/description/progressbar_gradient.png differ diff --git a/web_widget_progressbar_gradient/static/description/progressbar_gradient_inverse.png b/web_widget_progressbar_gradient/static/description/progressbar_gradient_inverse.png new file mode 100644 index 00000000000..8df8e74d6aa Binary files /dev/null and b/web_widget_progressbar_gradient/static/description/progressbar_gradient_inverse.png differ diff --git a/web_widget_progressbar_gradient/static/src/js/progressbar.esm.js b/web_widget_progressbar_gradient/static/src/js/progressbar.esm.js new file mode 100644 index 00000000000..f75a80794ef --- /dev/null +++ b/web_widget_progressbar_gradient/static/src/js/progressbar.esm.js @@ -0,0 +1,39 @@ +/** @odoo-module + * Copyright 2024 ACSONE SA/NV + * License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl). + * **/ +import {ProgressBarField} from "@web/views/fields/progress_bar/progress_bar_field"; +import {registry} from "@web/core/registry"; + +const {onMounted} = owl; +export class ProgressBarFieldGradient extends ProgressBarField { + setup() { + super.setup(); + onMounted(() => this._mounted()); + } + + _mounted() { + // Set the gradient css and inverse if set + for (const child of this.__owl__.bdom.el.children) { + if (child.classList.contains("o_progress")) { + child.children[0].classList.add("o_progressbar_gradient"); + if (this.props.inverse) { + child.children[0].classList.add("o_inverse"); + } + } + } + } +} +ProgressBarFieldGradient.extractProps = ({attrs}) => { + return { + inverse: attrs.options.inverse, + }; +}; +ProgressBarFieldGradient.template = + "web_widget_progressbar_color.ProgressBarFieldGradient"; +ProgressBarFieldGradient.props = { + ...ProgressBarField.props, + inverse: {type: Boolean, optional: true}, +}; + +registry.category("fields").add("progressbar_gradient", ProgressBarFieldGradient); diff --git a/web_widget_progressbar_gradient/static/src/scss/progressbar.scss b/web_widget_progressbar_gradient/static/src/scss/progressbar.scss new file mode 100644 index 00000000000..b3795b14e5c --- /dev/null +++ b/web_widget_progressbar_gradient/static/src/scss/progressbar.scss @@ -0,0 +1,30 @@ +div:has(div.o_progressbar_gradient) .o_progressbar .o_progress { + position: relative; +} + +.o_progressbar .o_progress .o_progressbar_gradient { + height: 100%; + /* this will do the magic for masking the gradient */ + -webkit-mask: linear-gradient(#fff 0 0); + mask: linear-gradient(#fff 0 0); +} + +.o_progressbar .o_progress .o_progressbar_gradient.o_inverse::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: linear-gradient(to right, #198754, #ffc107, #dc3545); +} + +.o_progressbar .o_progress .o_progressbar_gradient::before { + content: ""; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-image: linear-gradient(to right, #dc3545, #ffc107, #198754); +} diff --git a/web_widget_progressbar_gradient/static/src/xml/progressbar.xml b/web_widget_progressbar_gradient/static/src/xml/progressbar.xml new file mode 100644 index 00000000000..eed36cc6fdb --- /dev/null +++ b/web_widget_progressbar_gradient/static/src/xml/progressbar.xml @@ -0,0 +1,13 @@ + + + + + + +