[FIX] web: field color: adapted for views

The FieldColor widget had been designed exclusively for the document
layout configurator. Because of this, the widget would not display/behave
correctly in other views.

Before this commit:
- in list views, the widget had a "white-space" attribute adapted for char fields,
which gave it much more space than it needed
- there was no handling of the widget in readonly state: it was always editable
- its size in list views was a bit too large

Now:
- all styling problems have been adjusted for list views (unchanged for forms)
- the widget is disabled when in readonly mode

Task 2072466

closes odoo/odoo#36949

Signed-off-by: VincentSchippefilt <VincentSchippefilt@users.noreply.github.com>

1 files changed, 42 insertions, 10 deletions

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index a34d024b8e6..69be202a33d 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -3271,11 +3271,22 @@ var AceEditor = DebouncedField.extend({
  */
 var FieldColor = AbstractField.extend({
     template: 'FieldColor',
-    events: {
+    events: _.extend({}, AbstractField.prototype.events, {
         'click .o_field_color': '_onColorClick',
-    },
-    custom_events: {
+    }),
+    custom_events: _.extend({}, AbstractField.prototype.custom_events, {
         'colorpicker:saved': '_onColorpickerSaved',
+    }),
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    getFocusableElement: function () {
+        return this.$('.o_field_color');
     },
 
     //--------------------------------------------------------------------------
@@ -3287,10 +3298,10 @@ var FieldColor = AbstractField.extend({
     * @private
     */
     _render: function () {
-        this._super.apply(this, arguments);
         this.$('.o_field_color').data('value', this.value)
             .css('background-color', this.value)
             .attr('title', this.value);
+        return this._super.apply(this, arguments);
     },
 
     //--------------------------------------------------------------------------
@@ -3299,13 +3310,20 @@ var FieldColor = AbstractField.extend({
 
     /**
     * @private
-    * @param {MouseEvent} ev
     */
-    _onColorClick: function (ev) {
-        new ColorpickerDialog(this, {
-            defaultColor: this.value,
-            noTransparency: true,
-        }).open();
+    _onColorClick: function () {
+        if (this.mode === 'edit') {
+            const dialog = new ColorpickerDialog(this, {
+                defaultColor: this.value,
+                noTransparency: true,
+            }).open();
+            dialog.on('closed', this, () => {
+                // we need to wait for the modal to execute its whole close function.
+                Promise.resolve().then(() => {
+                    this.getFocusableElement().focus();
+                });
+            });
+        }
     },
 
     /**
@@ -3315,6 +3333,20 @@ var FieldColor = AbstractField.extend({
     _onColorpickerSaved: function (ev) {
         this._setValue(ev.data.hex);
     },
+
+    /**
+     * @override
+     * @private
+     */
+    _onKeydown: function (ev) {
+        if (ev.which === $.ui.keyCode.ENTER) {
+            ev.preventDefault();
+            ev.stopPropagation();
+            this._onColorClick(ev);
+        } else {
+            this._super.apply(this, arguments);
+        }
+    },
 });
 
 return {