[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>

5 files changed, 40 insertions, 31 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));
     },
     /**
diff --git a/addons/web/static/src/js/views/kanban/kanban_record.js b/addons/web/static/src/js/views/kanban/kanban_record.js
index 43d28407583..fbee9a5b1f0 100644
--- a/addons/web/static/src/js/views/kanban/kanban_record.js
+++ b/addons/web/static/src/js/views/kanban/kanban_record.js
@@ -18,20 +18,7 @@ var widgetRegistry = require('web.widget_registry');
 var _t = core._t;
 var QWeb = core.qweb;
 
-var KANBAN_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'),
-];
+var KANBAN_RECORD_COLORS = require('web.basic_fields').FieldColorPicker.prototype.RECORD_COLORS;
 var NB_KANBAN_RECORD_COLORS = KANBAN_RECORD_COLORS.length;
 
 var KanbanRecord = Widget.extend({
@@ -567,7 +554,7 @@ var KanbanRecord = Widget.extend({
         if (!$colorpicker.length) {
             return;
         }
-        $colorpicker.html(QWeb.render('KanbanColorPicker'));
+        $colorpicker.html(QWeb.render('KanbanColorPicker', { colors: KANBAN_RECORD_COLORS}));
         $colorpicker.on('click', 'a', this._onColorChanged.bind(this));
     },
     /**
diff --git a/addons/web/static/src/scss/color_picker.scss b/addons/web/static/src/scss/color_picker.scss
index 41ecfe0b069..b683cdb7c8a 100644
--- a/addons/web/static/src/scss/color_picker.scss
+++ b/addons/web/static/src/scss/color_picker.scss
@@ -1,12 +1,17 @@
 .o_field_color_picker {
     display: flex;
+    float: right;
+    margin-right: 7px;
     ul {
         display: flex;
+        justify-content: flex-end;
         flex-wrap: wrap;
-        width: 100%;
         @include o-kanban-colorpicker;
         @include o-kanban-record-color;
+        width: 100%;
         max-width: unset;
+        margin: 0;
+        padding: 0;
         > li {
             border: 2px solid white;
             box-shadow: 0 0 0 1px gray('300');
@@ -16,6 +21,9 @@
 
 .o_field_color_picker_preview {
     @include o-kanban-record-color;
+    width: 400px;
+    float: right;
+    margin-right: 7px;
     > li {
         display: inline-block;
         margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0;
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 10d52e55d28..9d59017cee7 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1896,7 +1896,7 @@
 <t t-name="ColorPickerReadonly">
     <div class="o_field_color_picker_preview">
         <li>
-            <a aria-label="No color" href="#" role="menuitem" t-att-class="'oe_kanban_color_'+active_color" t-att-data-color="active_color" title="No color"/>
+            <a href="#" role="menuitem" t-att-class="'oe_kanban_color_'+active_color" t-att-data-color="active_color" t-att-aria-label="name_color" t-att-title="name_color"/>
         </li>
     </div>
 </t>
diff --git a/addons/web/static/src/xml/kanban.xml b/addons/web/static/src/xml/kanban.xml
index e4ef2393e3f..cb34cd16851 100644
--- a/addons/web/static/src/xml/kanban.xml
+++ b/addons/web/static/src/xml/kanban.xml
@@ -77,18 +77,16 @@
 </t>
 
 <t t-name="KanbanColorPicker">
-    <li><a role="menuitem" href="#" data-color="0" class="oe_kanban_color_0" title="No color" aria-label="No color"/></li>
-    <li><a role="menuitem" href="#" data-color="1" class="oe_kanban_color_1" title="Red" aria-label="Red"/></li>
-    <li><a role="menuitem" href="#" data-color="2" class="oe_kanban_color_2" title="Orange" aria-label="Orange"/></li>
-    <li><a role="menuitem" href="#" data-color="3" class="oe_kanban_color_3" title="Yellow" aria-label="Yellow"/></li>
-    <li><a role="menuitem" href="#" data-color="4" class="oe_kanban_color_4" title="Light blue" aria-label="Light blue"/></li>
-    <li><a role="menuitem" href="#" data-color="5" class="oe_kanban_color_5" title="Dark purple" aria-label="Dark purple"/></li>
-    <li><a role="menuitem" href="#" data-color="6" class="oe_kanban_color_6" title="Salmon pink" aria-label="Salmon pink"/></li>
-    <li><a role="menuitem" href="#" data-color="7" class="oe_kanban_color_7" title="Medium blue" aria-label="Medium blue"/></li>
-    <li><a role="menuitem" href="#" data-color="8" class="oe_kanban_color_8" title="Dark blue" aria-label="Dark blue"/></li>
-    <li><a role="menuitem" href="#" data-color="9" class="oe_kanban_color_9" title="Fushia" aria-label="Fushia"/></li>
-    <li><a role="menuitem" href="#" data-color="10" class="oe_kanban_color_10" title="Green" aria-label="Green"/></li>
-    <li><a role="menuitem" href="#" data-color="11" class="oe_kanban_color_11" title="Purple" aria-label="Purple"/></li>
+    <t t-foreach="colors" t-as="color">
+        <li>
+            <a role="menuitem"
+               href="#"
+               t-att-data-color="color_index"
+               t-attf-class="oe_kanban_color_#{color_index}"
+               t-att-title="color"
+               t-att-aria-label="color"/>
+        </li>
+    </t>
 </t>
 
 <t t-name="GraphCustomTooltip">