[IMP] sales_team, web: add and improve color widget to improve UX on crm.tag

The color picker help the user to choose a color instead of picking it
by id.

The title and arial-label "no-color" default value are removed from the
picker_preview because they are not accurate. Instead name of currently set
color is used.

Task ID 2128166

closes odoo/odoo#47474

Signed-off-by: Thibault Delavallee (tde) <tde@openerp.com>

1 files changed, 18 insertions, 2 deletions

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 2ec474bc2b3..721d6618e83 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -3312,6 +3312,21 @@ var FieldColor = AbstractField.extend({
 });
 
 var FieldColorPicker = FieldInteger.extend({
+    RECORD_COLORS: [
+        _t('No color'),
+        _t('Red'),
+        _t('Orange'),
+        _t('Yellow'),
+        _t('Light blue'),
+        _t('Dark purple'),
+        _t('Salmon pink'),
+        _t('Medium blue'),
+        _t('Dark blue'),
+        _t('Fushia'),
+        _t('Green'),
+        _t('Purple'),
+    ],
+
     /**
      * Prepares the rendering, since we are based on an input but not using it
      * setting tagName after parent init force the widget to not render an input
@@ -3338,7 +3353,8 @@ var FieldColorPicker = FieldInteger.extend({
      * @override
      */
     _renderReadonly: function () {
-        this.$el.html(qweb.render('ColorPickerReadonly', {active_color: this.value,}));
+        var selectedColorName = this.RECORD_COLORS[this.value];
+        this.$el.html(qweb.render('ColorPickerReadonly', { active_color: this.value, name_color: selectedColorName }));
         this.$el.on('click', 'a', function(ev){ ev.preventDefault(); });
     },
     /**
@@ -3353,7 +3369,7 @@ var FieldColorPicker = FieldInteger.extend({
         if (!$colorpicker.length) {
             return;
         }
-        $colorpicker.html(qweb.render('KanbanColorPicker'));
+        $colorpicker.html(qweb.render('KanbanColorPicker', { colors: this.RECORD_COLORS }));
         $colorpicker.on('click', 'a', this._onColorChanged.bind(this));
     },
     /**