[IMP] web_widget_progressbar_gradient: Add inverse option

Allows to reverse the gradient rendering

web_widget_progressbar_gradient/README.rst

@@ -32,9 +32,16 @@ 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**
 
@@ -46,6 +53,8 @@ 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
 ======================
@@ -76,6 +85,7 @@ Contributors
 
 - Denis Roussel denis.roussel@acsone.eu
 - Jacques-Etienne Baudoux je@bcim.be
+- Souheil Bejaoui souheil.bejaoui@acsone.eu
 
 Maintainers
 -----------

web_widget_progressbar_gradient/readme/CONTRIBUTORS.md

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

web_widget_progressbar_gradient/readme/DESCRIPTION.md

@@ -2,4 +2,10 @@ 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)

web_widget_progressbar_gradient/readme/USAGE.md

@@ -1 +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}"``

web_widget_progressbar_gradient/static/description/index.html

@@ -373,7 +373,14 @@ ul.auto-toc {
 <p>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.</p>
+<ul class="simple">
+<li>Normal rendering:</li>
+</ul>
 <p><img alt="Progressbar Gradient" src="https://raw.githubusercontent.com/OCA/web/16.0/web_widget_progressbar_gradient/static/description/progressbar_gradient.png" /></p>
+<ul class="simple">
+<li>Reverse rendering:</li>
+</ul>
+<p><img alt="Progressbar Inverse Gradient" src="https://raw.githubusercontent.com/OCA/web/16.0/web_widget_progressbar_gradient/static/description/progressbar_gradient_inverse.png" /></p>
 <p><strong>Table of contents</strong></p>
 <div class="contents local topic" id="contents">
 <ul class="simple">
@@ -393,6 +400,8 @@ and finishing to red.</p>
 <ul class="simple">
 <li>When declaring a progressbar field, use the ‘progressbar_color’
 widget.</li>
+<li>Add the inverse option to reverse the colors on the progress bar
+field: <tt class="docutils literal"><span class="pre">options=&quot;{'inverse':</span> true}&quot;</tt></li>
 </ul>
 </div>
 <div class="section" id="known-issues-roadmap">
@@ -423,6 +432,7 @@ If you spotted it first, help us to smash it by providing a detailed and welcome
 <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>
+<li>Souheil Bejaoui <a class="reference external" href="mailto:souheil.bejaoui&#64;acsone.eu">souheil.bejaoui&#64;acsone.eu</a></li>
 </ul>
 </div>
 <div class="section" id="maintainers">

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

@@ -5,11 +5,35 @@
 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);

web_widget_progressbar_gradient/static/src/scss/progressbar.scss

@@ -8,7 +8,8 @@ div:has(div.o_progressbar_gradient) .o_progressbar .o_progress {
     -webkit-mask: linear-gradient(#fff 0 0);
     mask: linear-gradient(#fff 0 0);
 }
-.o_progressbar .o_progress .o_progressbar_gradient::before {
+
+.o_progressbar .o_progress .o_progressbar_gradient.o_inverse::before {
     content: "";
     position: absolute;
     top: 0;
@@ -17,3 +18,13 @@ div:has(div.o_progressbar_gradient) .o_progressbar .o_progress {
     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);
+}

web_widget_progressbar_gradient/static/src/xml/progressbar.xml

@@ -9,12 +9,5 @@
         t-inherit-mode="primary"
         owl="1"
     >
-        <xpath expr="//div[@t-attf-class]" position="attributes">
-            <attribute
-                name="t-attf-class"
-                add="{{'o_progressbar_gradient'}}"
-                separator=" "
-            />
-        </xpath>
     </t>
 </templates>