[IMP] web, web_editor: integrate colorpicker in colorpalette

Stop using the colorpicker dialog in the colorpalette widget.
Integrate the colorpicker widget in the colorpalette widget. Of course,
the colorpicker behaviors are adapted so that no useless rerendering
of the colorpalette is made on each value change.

The 'reset color' button is now a button like the other colors, no need
for a 'color_reset' event anymore. It is removed and replaced with a
'color_picked' event with color being an empty string. The clear button
now also work on hover.

Also, the topbar colorpalette for text and text background colors now
has the exact same behaviour as the background colorpalette: adding
color preview on hover.

The colorpalette now also closes on 'enter' keypress.

Part of https://github.com/odoo/odoo/pull/46088
task-2195313

closes odoo/odoo#46088

Related: odoo/enterprise#8696
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

3 files changed, 69 insertions, 22 deletions

diff --git a/addons/web_editor/static/src/js/editor/rte.summernote.js b/addons/web_editor/static/src/js/editor/rte.summernote.js
index 68b00afb564..514dfdfe85c 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -30,11 +30,15 @@ var tplButton = renderer.getTemplate().button;
 var tplIconButton = renderer.getTemplate().iconButton;
 var tplDropdown = renderer.getTemplate().dropdown;
 
-var applyColor = function (target, eventName, color) {
+const processAndApplyColor = function (target, eventName, color, preview) {
+    if (!color) {
+        color = 'inherit';
+    } else if (!ColorpickerWidget.isCSSColor(color)) {
+        color = (eventName === "foreColor" ? 'text-' : 'bg-') + color;
+    }
     var layoutInfo = dom.makeLayoutInfo(target);
-    $.summernote.pluginEvents[eventName](undefined, eventHandler.modules.editor, layoutInfo, color);
+    $.summernote.pluginEvents[eventName](undefined, eventHandler.modules.editor, layoutInfo, color, preview);
 };
-
 // Update and change the popovers content, and add history button
 renderer.createPalette = function ($container, options) {
     const $dropdownContent = $container.find(".colorPalette");
@@ -46,6 +50,10 @@ renderer.createPalette = function ($container, options) {
         const mutex = new concurrency.MutexedDropPrevious();
         const $dropdown = $(elem).closest('.btn-group, .dropdown');
         let manualOpening = false;
+        // Prevent dropdown closing on colorpicker click
+        $dropdown.on('hide.bs.dropdown', ev => {
+            return !(ev.clickEvent && ev.clickEvent.originalEvent && ev.clickEvent.originalEvent.__isColorpickerClick);
+        });
         $dropdown.on('show.bs.dropdown', () => {
             if (manualOpening) {
                 return true;
@@ -62,14 +70,15 @@ renderer.createPalette = function ($container, options) {
                     $editable: rte.Class.prototype.editable(), // Our parent is the root widget, we can't retrieve the editable section from it...
                     selectedColor: $(targetElement).css(eventName === "foreColor" ? 'color' : 'backgroundColor'),
                 });
-                colorpicker.on('color_picked', null, ev => {
-                    let color = ev.data.color;
-                    if (!ColorpickerWidget.isCSSColor(color)) {
-                        color = (eventName === "foreColor" ? 'text-' : 'bg-') + color;
-                    }
-                    applyColor(ev.data.target, eventName, color);
+                colorpicker.on('custom_color_picked color_picked', null, ev => {
+                    processAndApplyColor(ev.data.target, eventName, ev.data.color);
+                });
+                colorpicker.on('color_hover color_leave', null, ev => {
+                    processAndApplyColor(ev.data.target, eventName, ev.data.color, true);
+                });
+                colorpicker.on('enter_key_color_colorpicker', null, () => {
+                    $dropdown.children('.dropdown-toggle').dropdown('hide');
                 });
-                colorpicker.on('color_reset', null, ev => applyColor(ev.data.target, eventName, 'inherit'));
                 return colorpicker.replace(hookEl).then(() => {
                     if (oldColorpicker) {
                         oldColorpicker.destroy();
diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 35fd4cef7c7..50b56ad435a 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -726,8 +726,10 @@ const SelectUserValueWidget = UserValueWidget.extend({
     _onClick: function () {
         if (!this.menuTogglerEl.classList.contains('active')) {
             this.trigger_up('user_value_widget_opening');
+            this.menuTogglerEl.classList.add('active');
+        } else {
+            this.close();
         }
-        this.menuTogglerEl.classList.toggle('active');
         const activeButton = this._userValueWidgets.find(widget => widget.isActive());
         if (activeButton) {
             this.menuEl.scrollTop = activeButton.el.offsetTop - (this.menuEl.offsetHeight / 2);
@@ -980,10 +982,11 @@ const MultiUserValueWidget = UserValueWidget.extend({
 const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
     className: (SelectUserValueWidget.prototype.className || '') + ' o_we_so_color_palette',
     custom_events: _.extend({}, SelectUserValueWidget.prototype.custom_events, {
+        'custom_color_picked': '_onCustomColorPicked',
         'color_picked': '_onColorPicked',
         'color_hover': '_onColorHovered',
         'color_leave': '_onColorLeft',
-        'color_reset': '_onColorReset',
+        'enter_key_color_colorpicker': '_onEnterKey'
     }),
 
     /**
@@ -1012,6 +1015,17 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
     /**
      * @override
      */
+    close: function () {
+        this._super(...arguments);
+        if (this._customColorValue && this._customColorValue !== this._value) {
+            this._value = this._customColorValue;
+            this._customColorValue = false;
+            this._onUserValueChange();
+        }
+    },
+    /**
+     * @override
+     */
     getMethodsParams: function () {
         return _.extend(this._super(...arguments), {
             colorNames: this.colorPalette.getColorNames(),
@@ -1024,6 +1038,9 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
         if (typeof this._previewColor === 'string') {
             return this._previewColor;
         }
+        if (typeof this._customColorValue === 'string') {
+            return this._customColorValue;
+        }
         let value = this._super(...arguments);
         if (value && this.options.dataAttributes.hasOwnProperty('cssCompatible') &&
             !ColorpickerWidget.isCSSColor(value)) {
@@ -1094,6 +1111,16 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * Called when a custom color is selected -> preview the color
+     * and set the current value. Update of this value on close
+     *
+     * @private
+     * @param {Event} ev
+     */
+    _onCustomColorPicked: function (ev) {
+        this._customColorValue = ev.data.color;
+    },
+    /**
      * Called when a color button is clicked -> confirms the preview.
      *
      * @private
@@ -1101,6 +1128,7 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
      */
     _onColorPicked: function (ev) {
         this._previewColor = false;
+        this._customColorValue = false;
         this._value = ev.data.color;
         this._onUserValueChange(ev);
     },
@@ -1125,14 +1153,20 @@ const ColorpickerUserValueWidget = SelectUserValueWidget.extend({
         this._onUserValueReset(ev);
     },
     /**
-     * Called when the color reset button is clicked -> removes all color
-     * classes and color styles.
-     *
      * @private
      */
-    _onColorReset: function (ev) {
-        this._value = '';
-        this._onUserValueChange(ev);
+    _onEnterKey: function () {
+        this.close();
+    },
+    /**
+     * @override
+     */
+    _onClick: function (ev) {
+        // Do not close the colorpalette on colorpicker click
+        if (!ev.originalEvent.__isColorpickerClick) {
+            this._super(...arguments);
+        }
+        ev.stopPropagation();
     },
 });
 
diff --git a/addons/web_editor/static/src/js/editor/summernote.js b/addons/web_editor/static/src/js/editor/summernote.js
index 80ccd3d0c82..1053e0699bc 100644
--- a/addons/web_editor/static/src/js/editor/summernote.js
+++ b/addons/web_editor/static/src/js/editor/summernote.js
@@ -2307,12 +2307,14 @@ $.summernote.pluginEvents.color = function (event, editor, layoutInfo, sObjColor
   if (foreColor) { $.summernote.pluginEvents.foreColor(event, editor, layoutInfo, foreColor); }
   if (backColor) { $.summernote.pluginEvents.backColor(event, editor, layoutInfo, backColor); }
 };
-$.summernote.pluginEvents.foreColor = function (event, editor, layoutInfo, foreColor) {
+$.summernote.pluginEvents.foreColor = function (event, editor, layoutInfo, foreColor, preview) {
   var $editable = layoutInfo.editable();
   $.summernote.pluginEvents.applyFont(event, editor, layoutInfo, foreColor, null, null);
-  editor.afterCommand($editable);
+  if (!preview) {
+    editor.afterCommand($editable);
+  }
 };
-$.summernote.pluginEvents.backColor = function (event, editor, layoutInfo, backColor) {
+$.summernote.pluginEvents.backColor = function (event, editor, layoutInfo, backColor, preview) {
   var $editable = layoutInfo.editable();
   var r = range.create();
   if (!r) return;
@@ -2328,7 +2330,9 @@ $.summernote.pluginEvents.backColor = function (event, editor, layoutInfo, backC
     return;
   }
   $.summernote.pluginEvents.applyFont(event, editor, layoutInfo, null, backColor, null);
-  editor.afterCommand($editable);
+  if (!preview) {
+    editor.afterCommand($editable);
+  }
 };
 
 options.onCreateLink = function (sLinkUrl) {