[IMP] web_widget_progressbar_color: Rename to web_widget_progressbar_gradient

setup/web_widget_progressbar_color/odoo/addons/web_widget_progressbar_color

@@ -1 +0,0 @@
-../../../../web_widget_progressbar_color

setup/web_widget_progressbar_gradient/odoo/addons/web_widget_progressbar_gradient

@@ -0,0 +1 @@
+../../../../web_widget_progressbar_gradient

web_widget_progressbar_color/readme/DESCRIPTION.md

@@ -1,5 +0,0 @@
-This module allows to display progress bars with colorized bar.
-The color will be green for values between 0% and 40%, yellow for values
-between 40% and 70% and red between 70% and 100%.
-
-![Progressbar Color](../static/description/progressbar_color.png)

web_widget_progressbar_color/static/src/js/progressbar.esm.js

@@ -1,11 +0,0 @@
-/** @odoo-module **/
-import {ProgressBarField} from "@web/views/fields/progress_bar/progress_bar_field";
-import {registry} from "@web/core/registry";
-
-export class ProgressBarFieldColor extends ProgressBarField {
-    setup() {
-        super.setup();
-    }
-}
-ProgressBarFieldColor.template = "web_widget_progressbar_color.ProgressBarFieldColor";
-registry.category("fields").add("progressbar_color", ProgressBarFieldColor);

web_widget_progressbar_color/static/src/scss/progressbar.scss

@@ -1,12 +0,0 @@
-.o_progressbar .o_progress .o_progress_danger {
-    background-color: #dc3545;
-    height: 100%;
-}
-.o_progressbar .o_progress .o_progress_warning {
-    background-color: #ffc107;
-    height: 100%;
-}
-.o_progressbar .o_progress .o_progress_success {
-    background-color: #198754;
-    height: 100%;
-}

web_widget_progressbar_gradient/README.rst

@@ -1,6 +1,6 @@
-============================
+===============================
-Web Widget Progressbar Color
+Web Widget Progressbar Gradient
-============================
+===============================
 
 .. 
    !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
@@ -17,10 +17,10 @@ Web Widget Progressbar Color
     :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_color
+    :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_color
+    :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
@@ -28,13 +28,13 @@ Web Widget Progressbar Color
 
 |badge1| |badge2| |badge3| |badge4| |badge5|
 
-This module allows to display progress bars with colorized bar. The
+This module allows to display progress bars with colorized gradient bar.
-color will be green for values between 0% and 40%, yellow for values
+The color will increase following value from green passing per yellow
-between 40% and 70% and red between 70% and 100%.
+and finishing to red.
 
-|Progressbar Color|
+|Progressbar Gradient|
 
-.. |Progressbar Color| image:: https://raw.githubusercontent.com/OCA/web/16.0/web_widget_progressbar_color/static/description/progressbar_color.png
+.. |Progressbar Gradient| image:: https://raw.githubusercontent.com/OCA/web/16.0/web_widget_progressbar_gradient/static/description/progressbar_gradient.png
 
 **Table of contents**
 
@@ -59,7 +59,7 @@ Bug Tracker
 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 to smash it by providing a detailed and welcomed
-`feedback <https://github.com/OCA/web/issues/new?body=module:%20web_widget_progressbar_color%0Aversion:%2016.0%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_progressbar_gradient%0Aversion:%2016.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.
 
@@ -75,6 +75,7 @@ Contributors
 ------------
 
 - Denis Roussel denis.roussel@acsone.eu
+- Jacques-Etienne Baudoux je@bcim.be
 
 Maintainers
 -----------
@@ -97,6 +98,6 @@ Current `maintainer <https://odoo-community.org/page/maintainer-role>`__:
 
 |maintainer-rousseldenis| 
 
-This module is part of the `OCA/web <https://github.com/OCA/web/tree/16.0/web_widget_progressbar_color>`_ project on GitHub.
+This module is part of the `OCA/web <https://github.com/OCA/web/tree/16.0/web_widget_progressbar_gradient>`_ project on GitHub.
 
 You are welcome to contribute. To learn how please visit https://odoo-community.org/page/Contribute.

web_widget_progressbar_gradient/__manifest__.py

@@ -2,8 +2,8 @@
 # License AGPL-3.0 or later (https://www.gnu.org/licenses/agpl).
 
 {
-    "name": "Web Widget Progressbar Color",
+    "name": "Web Widget Progressbar Gradient",
-    "summary": """This module allows to customize progressbar color""",
+    "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)",
@@ -12,9 +12,9 @@
     "depends": ["web"],
     "assets": {
         "web.assets_backend": [
-            "web_widget_progressbar_color/static/src/scss/progressbar.scss",
+            "web_widget_progressbar_gradient/static/src/scss/progressbar.scss",
-            "web_widget_progressbar_color/static/src/xml/progressbar.xml",
+            "web_widget_progressbar_gradient/static/src/xml/progressbar.xml",
-            "web_widget_progressbar_color/static/src/js/progressbar.esm.js",
+            "web_widget_progressbar_gradient/static/src/js/progressbar.esm.js",
         ],
     },
 }

web_widget_progressbar_gradient/readme/CONTRIBUTORS.md

@@ -1 +1,2 @@
 - Denis Roussel <denis.roussel@acsone.eu>
+- Jacques-Etienne Baudoux <je@bcim.be>

web_widget_progressbar_gradient/readme/DESCRIPTION.md

@@ -0,0 +1,5 @@
+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.
+
+![Progressbar Gradient](../static/description/progressbar_gradient.png)

web_widget_progressbar_gradient/static/description/index.html

@@ -3,7 +3,7 @@
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta name="generator" content="Docutils: https://docutils.sourceforge.io/" />
-<title>Web Widget Progressbar Color</title>
+<title>Web Widget Progressbar Gradient</title>
 <style type="text/css">
 
 /*
@@ -360,8 +360,8 @@ ul.auto-toc {
 </style>
 </head>
 <body>
-<div class="document" id="web-widget-progressbar-color">
+<div class="document" id="web-widget-progressbar-gradient">
-<h1 class="title">Web Widget Progressbar Color</h1>
+<h1 class="title">Web Widget Progressbar Gradient</h1>
 
 <!-- !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 !! This file is generated by oca-gen-addon-readme !!
@@ -369,11 +369,11 @@ ul.auto-toc {
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
 !! source digest: sha256:52cefe47def0fe37ee1abf6e7e2e7a7d91a660212b9e1729421d1bd15449af98
 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! -->
-<p><a class="reference external image-reference" 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 image-reference" 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 image-reference" href="https://github.com/OCA/web/tree/16.0/web_widget_progressbar_color"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/web-16-0/web-16-0-web_widget_progressbar_color"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/web&amp;target_branch=16.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
+<p><a class="reference external image-reference" 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 image-reference" 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 image-reference" href="https://github.com/OCA/web/tree/16.0/web_widget_progressbar_gradient"><img alt="OCA/web" src="https://img.shields.io/badge/github-OCA%2Fweb-lightgray.png?logo=github" /></a> <a class="reference external image-reference" href="https://translation.odoo-community.org/projects/web-16-0/web-16-0-web_widget_progressbar_gradient"><img alt="Translate me on Weblate" src="https://img.shields.io/badge/weblate-Translate%20me-F47D42.png" /></a> <a class="reference external image-reference" href="https://runboat.odoo-community.org/builds?repo=OCA/web&amp;target_branch=16.0"><img alt="Try me on Runboat" src="https://img.shields.io/badge/runboat-Try%20me-875A7B.png" /></a></p>
-<p>This module allows to display progress bars with colorized bar. The
+<p>This module allows to display progress bars with colorized gradient bar.
-color will be green for values between 0% and 40%, yellow for values
+The color will increase following value from green passing per yellow
-between 40% and 70% and red between 70% and 100%.</p>
+and finishing to red.</p>
-<p><img alt="Progressbar Color" src="https://raw.githubusercontent.com/OCA/web/16.0/web_widget_progressbar_color/static/description/progressbar_color.png" /></p>
+<p><img alt="Progressbar Gradient" src="https://raw.githubusercontent.com/OCA/web/16.0/web_widget_progressbar_gradient/static/description/progressbar_gradient.png" /></p>
 <p><strong>Table of contents</strong></p>
 <div class="contents local topic" id="contents">
 <ul class="simple">
@@ -407,7 +407,7 @@ inversed mode.</li>
 <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 to smash it by providing a detailed and welcomed
-<a class="reference external" href="https://github.com/OCA/web/issues/new?body=module:%20web_widget_progressbar_color%0Aversion:%2016.0%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_progressbar_gradient%0Aversion:%2016.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">
@@ -422,6 +422,7 @@ If you spotted it first, help us to smash it by providing a detailed and welcome
 <h2><a class="toc-backref" href="#toc-entry-6">Contributors</a></h2>
 <ul class="simple">
 <li>Denis Roussel <a class="reference external" href="mailto:denis.roussel&#64;acsone.eu">denis.roussel&#64;acsone.eu</a></li>
+<li>Jacques-Etienne Baudoux <a class="reference external" href="mailto:je&#64;bcim.be">je&#64;bcim.be</a></li>
 </ul>
 </div>
 <div class="section" id="maintainers">
@@ -435,7 +436,7 @@ mission is to support the collaborative development of Odoo features and
 promote its widespread use.</p>
 <p>Current <a class="reference external" href="https://odoo-community.org/page/maintainer-role">maintainer</a>:</p>
 <p><a class="reference external image-reference" href="https://github.com/rousseldenis"><img alt="rousseldenis" src="https://github.com/rousseldenis.png?size=40px" /></a></p>
-<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/16.0/web_widget_progressbar_color">OCA/web</a> project on GitHub.</p>
+<p>This module is part of the <a class="reference external" href="https://github.com/OCA/web/tree/16.0/web_widget_progressbar_gradient">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>

web_widget_progressbar_gradient/static/src/js/progressbar.esm.js

@@ -0,0 +1,15 @@
+/** @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";
+
+export class ProgressBarFieldGradient extends ProgressBarField {
+    setup() {
+        super.setup();
+    }
+}
+ProgressBarFieldGradient.template =
+    "web_widget_progressbar_color.ProgressBarFieldGradient";
+registry.category("fields").add("progressbar_gradient", ProgressBarFieldGradient);

web_widget_progressbar_gradient/static/src/scss/progressbar.scss

@@ -0,0 +1,19 @@
+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::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: linear-gradient(to right, #198754, #ffc107, #dc3545);
+}

web_widget_progressbar_gradient/static/src/xml/progressbar.xml

@@ -4,7 +4,7 @@
 <templates xml:space="preserve">
 
     <t
-        t-name="web_widget_progressbar_color.ProgressBarFieldColor"
+        t-name="web_widget_progressbar_color.ProgressBarFieldGradient"
         t-inherit="web.ProgressBarField"
         t-inherit-mode="primary"
         owl="1"
@@ -12,7 +12,7 @@
         <xpath expr="//div[@t-attf-class]" position="attributes">
             <attribute
                 name="t-attf-class"
-                add="{{ (state.currentValue > 40 and state.currentValue &lt;= 70) ? 'o_progress_warning' : state.currentValue > 70 ?  'o_progress_danger' : ''}}"
+                add="{{'o_progressbar_gradient'}}"
                 separator=" "
             />
         </xpath>