[IMP] livechat: add settings to set livechat colors

This commit allow users to set up different colors for both
the live chat button for website visitors and the chat window
once the live chat button has been clicked. For both, the header
background color and the text color can be set up.

Task-Id 2030383

closes odoo/odoo#35843

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>

5 files changed, 113 insertions, 2 deletions

diff --git a/addons/im_livechat/static/src/js/im_livechat.js b/addons/im_livechat/static/src/js/im_livechat.js
index cc22507b457..72b53d7abb4 100644
--- a/addons/im_livechat/static/src/js/im_livechat.js
+++ b/addons/im_livechat/static/src/js/im_livechat.js
@@ -105,6 +105,12 @@ var LivechatButton = Widget.extend({
             }
         }
         this.call('bus_service', 'onNotification', this, this._onNotification);
+        if (this.options.button_background_color) {
+            this.$el.css('background-color', this.options.button_background_color);
+        }
+        if (this.options.button_text_color) {
+            this.$el.css('color', this.options.button_text_color);
+        }
         return this._super();
     },
 
@@ -290,7 +296,9 @@ var LivechatButton = Widget.extend({
         var self = this;
         var options = {
             displayStars: false,
+            headerBackgroundColor: this.options.header_background_color,
             placeholder: this.options.input_placeholder || "",
+            titleColor: this.options.title_color,
         };
         this._chatWindow = new WebsiteLivechatWindow(this, this._livechat, options);
         return this._chatWindow.appendTo($('body')).then(function () {
diff --git a/addons/im_livechat/static/src/js/im_livechat_channel_form_controller.js b/addons/im_livechat/static/src/js/im_livechat_channel_form_controller.js
new file mode 100644
index 00000000000..2361910aebf
--- /dev/null
+++ b/addons/im_livechat/static/src/js/im_livechat_channel_form_controller.js
@@ -0,0 +1,54 @@
+odoo.define('im_livechat.ImLivechatChannelFormController', function (require) {
+'use strict';
+
+const FormController = require('web.FormController');
+
+const ImLivechatChannelFormController = FormController.extend({
+    events: Object.assign({}, FormController.prototype.events, {
+        'click .o_im_livechat_channel_form_button_colors_reset_button': '_onClickLivechatButtonColorsResetButton',
+        'click .o_im_livechat_channel_form_chat_window_colors_reset_button': '_onClickLivechatChatWindowColorsResetButton',
+    }),
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {Object} colorValues
+     */
+    async _updateColors(colorValues) {
+        for (const name in colorValues) {
+            this.$(`[name="${name}"] .o_field_color`).css('background-color', colorValues[name]);
+        }
+        const result = await this.model.notifyChanges(this.handle, colorValues);
+        this.renderer.updateState(this.model.get(this.handle), { fieldNames: result });
+    },
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     */
+    async _onClickLivechatButtonColorsResetButton() {
+        await this._updateColors({
+            button_background_color: "#878787",
+            button_text_color: "#FFFFFF",
+        });
+    },
+    /**
+     * @private
+     */
+    async _onClickLivechatChatWindowColorsResetButton() {
+        await this._updateColors({
+            header_background_color: "#875A7B",
+            title_color: "#FFFFFF",
+        });
+    },
+});
+
+return ImLivechatChannelFormController;
+
+});
diff --git a/addons/im_livechat/static/src/js/im_livechat_channel_form_view.js b/addons/im_livechat/static/src/js/im_livechat_channel_form_view.js
new file mode 100644
index 00000000000..af5f42d7c29
--- /dev/null
+++ b/addons/im_livechat/static/src/js/im_livechat_channel_form_view.js
@@ -0,0 +1,19 @@
+odoo.define('im_livechat.ImLivechatChannelFormView', function (require) {
+"use strict";
+
+const ImLivechatChannelFormController = require('im_livechat.ImLivechatChannelFormController');
+
+const FormView = require('web.FormView');
+const viewRegistry = require('web.view_registry');
+
+const ImLivechatChannelFormView = FormView.extend({
+    config: Object.assign({}, FormView.prototype.config, {
+        Controller: ImLivechatChannelFormController,
+    }),
+});
+
+viewRegistry.add('im_livechat_channel_form_view_js', ImLivechatChannelFormView);
+
+return ImLivechatChannelFormView;
+
+});
diff --git a/addons/im_livechat/static/src/js/website_livechat_window.js b/addons/im_livechat/static/src/js/website_livechat_window.js
index ca20f05764c..06c13de3dfb 100644
--- a/addons/im_livechat/static/src/js/website_livechat_window.js
+++ b/addons/im_livechat/static/src/js/website_livechat_window.js
@@ -16,12 +16,28 @@ var LivechatWindow = AbstractThreadWindow.extend({
      * @override
      * @param {im_livechat.im_livechat.LivechatButton} parent
      * @param {im_livechat.model.WebsiteLivechat} thread
+     * @param {Object} [options={}]
+     * @param {string} [options.headerBackgroundColor]
+     * @param {string} [options.titleColor]
      */
-    init: function (parent, thread) {
+    init(parent, thread, options={}) {
         this._super.apply(this, arguments);
-
         this._thread = thread;
     },
+    /**
+     * @override
+     * @return {Promise}
+     */
+    async start() {
+        await this._super(...arguments);
+        if (this.options.headerBackgroundColor) {
+            this.$('.o_thread_window_header').css('background-color', this.options.headerBackgroundColor);
+        }
+        if (this.options.titleColor) {
+            this.$('.o_thread_window_header').css('color', this.options.titleColor);
+        }
+    },
+
 
     //--------------------------------------------------------------------------
     // Public
diff --git a/addons/im_livechat/static/src/scss/im_livechat_form.scss b/addons/im_livechat/static/src/scss/im_livechat_form.scss
index 88c44da54df..808e5ba8322 100644
--- a/addons/im_livechat/static/src/scss/im_livechat_form.scss
+++ b/addons/im_livechat/static/src/scss/im_livechat_form.scss
@@ -5,3 +5,17 @@
         }
     }
 }
+
+.o_livechat_layout_colors {
+    vertical-align: middle;
+    align-items: center;
+}
+
+.o_form_view .o_group {
+    // long selector in order to be more specific...
+    .o_im_livechat_field_widget_color {
+        width: 30px;
+        margin: 0 5px 0 0;
+    }
+}
+