diff --git a/web_widget_progressbar_gradient/README.rst b/web_widget_progressbar_gradient/README.rst index a16c1ed17b11..fd73c1051dc8 100644 --- a/web_widget_progressbar_gradient/README.rst +++ b/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 ----------- diff --git a/web_widget_progressbar_gradient/readme/CONTRIBUTORS.md b/web_widget_progressbar_gradient/readme/CONTRIBUTORS.md index 48218ea22679..2c5aaa0206f7 100644 --- a/web_widget_progressbar_gradient/readme/CONTRIBUTORS.md +++ b/web_widget_progressbar_gradient/readme/CONTRIBUTORS.md @@ -1,2 +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 index 874a82bf24bc..02a379a11ed2 100644 --- a/web_widget_progressbar_gradient/readme/DESCRIPTION.md +++ b/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) diff --git a/web_widget_progressbar_gradient/readme/USAGE.md b/web_widget_progressbar_gradient/readme/USAGE.md index e81aa072c86d..a3cd945eea10 100644 --- a/web_widget_progressbar_gradient/readme/USAGE.md +++ b/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}"`` diff --git a/web_widget_progressbar_gradient/static/description/index.html b/web_widget_progressbar_gradient/static/description/index.html index 0291c107651b..a855bd23c460 100644 --- a/web_widget_progressbar_gradient/static/description/index.html +++ b/web_widget_progressbar_gradient/static/description/index.html @@ -373,7 +373,14 @@

Web Widget Progressbar Gradient

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

    @@ -393,6 +400,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}"
@@ -423,6 +432,7 @@

Contributors

diff --git a/web_widget_progressbar_gradient/static/description/progressbar_gradient.png b/web_widget_progressbar_gradient/static/description/progressbar_gradient.png index 8df8e74d6aaf..3ef7bbbb584a 100644 Binary files a/web_widget_progressbar_gradient/static/description/progressbar_gradient.png 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 000000000000..8df8e74d6aaf 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 index 19eedd0852ff..f75a80794efd 100644 --- a/web_widget_progressbar_gradient/static/src/js/progressbar.esm.js +++ b/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); diff --git a/web_widget_progressbar_gradient/static/src/scss/progressbar.scss b/web_widget_progressbar_gradient/static/src/scss/progressbar.scss index fc865523a29a..b3795b14e5ce 100644 --- a/web_widget_progressbar_gradient/static/src/scss/progressbar.scss +++ b/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); +} diff --git a/web_widget_progressbar_gradient/static/src/xml/progressbar.xml b/web_widget_progressbar_gradient/static/src/xml/progressbar.xml index d762571cc4e2..eed36cc6fdbe 100644 --- a/web_widget_progressbar_gradient/static/src/xml/progressbar.xml +++ b/web_widget_progressbar_gradient/static/src/xml/progressbar.xml @@ -9,12 +9,5 @@ t-inherit-mode="primary" owl="1" > - - -