[16.0][ADD] web_widget_progressbar_color

[rousseldenis]

Rendering example:

[legalsylvain]

Very Nice !
Thanks !

[jbaudoux]

Nice.

[jbaudoux]

Suggested change

	add="{{ (state.currentValue > 40 and state.currentValue <= 70) ? 'o_progress_warning' : state.currentValue > 70 ? 'o_progress_danger' : ''}}"
	add="{{ (state.currentValue > 40 * state.maxValue/100 and state.currentValue <= 70 * state.maxValue/100) ? 'o_progress_warning' : state.currentValue > 70 * state.maxValue/100 ? 'o_progress_danger' : ''}}"

[jbaudoux]

Why not making a gradient progressbar instead ? Then you don't have to configure the thresholds

[rousseldenis]

Why not making a gradient progressbar instead ? Then you don't have to configure the thresholds

Could you develop ?

[jbaudoux]

Why not making a gradient progressbar instead ? Then you don't have to configure the thresholds

Could you develop ?

Something like applying always this class:

.o_progressbar .o_progress  o_progressbar_gradient {
  background: linear-gradient(to right, green, yellow, red)
}

[rousseldenis]

Why not making a gradient progressbar instead ? Then you don't have to configure the thresholds

Could you develop ?

Something like applying always this class:

.o_progressbar .o_progress  o_progressbar_gradient {
  background: linear-gradient(to right, green, yellow, red)
}

The result:

This is not the expecting result

[rousseldenis]

@legalsylvain @pedrobaeza @jbaudoux

I will change the imlpementaiton to this (need a little bit tweaking) as this is our needs:

[rousseldenis]

I think also changing the module name to web_widget_progressbar_gradient to reflect more the final implementation.

[legalsylvain]

Hi @rousseldenis : looks nice !

A "matter of taste" remarks :

• Generally, red is "bad / problematic", yellow is not "very good", and green is "good / allowed". for traffic lights, for example.
• Generally also, 0% means an unfulfilled objective, and 100% means a successful target
  So, my proposal is to have red -> Yellow -> green. (instead of green -> yellow -> green).

However, just a suggestion. If you think it's better like that, let's move on.

[rousseldenis]

• So, my proposal is to have red -> Yellow -> green. (instead of green -> yellow -> green).

The current implementation is to reflect the "occupation" which means that the less is better, the more is worse.

I'll try to add an option to the widget to allow the inversemode (in fact, mine 😅 )

[rousseldenis]

@legalsylvain

Now:

So both options are supported. The normal rendering is red to green. Inverse mode, green to red.

[legalsylvain]

Thanks !

It looks like there is a little offset when 100 is displayed.