[IMP] web_editor: improve text colorpicker

- Split editor button: one for font color and one for background color
- Remove recent color button feature
- Add only theme colors and remove other color sections like
  graypalette/standard colors
- Button's icon for font color and background color buttons have the
  same color of currently selected element

task-37974
Closes #26274

addons/web_editor/static/src/js/editor/rte.summernote.js

@@ -44,14 +44,14 @@ renderer.createPalette = function ($container, options) {
 
     var groups;
     if ($clpicker.is("colorpicker")) {
-        groups = _.map($clpicker.children(), function (el) {
+        groups = _.map($clpicker.find('[data-name="theme"]'), function (el) {
             return $(el).find("button").empty();
         });
     } else {
         groups = [$clpicker.find("button").empty()];
     }
 
-    var html = "<h6>" + _t("Theme colors") + "</h6>" + _.map(groups, function ($group) {
+    var html = "<h6 class='mt-2'>" + _t("Theme colors") + "</h6>" + _.map(groups, function ($group) {
         var $row = $("<div/>", {"class": "note-color-row mb8"}).append($group);
         var $after_breaks = $row.find(".o_small + :not(.o_small)");
         if ($after_breaks.length === 0) {
@@ -59,22 +59,22 @@ renderer.createPalette = function ($container, options) {
         }
         $after_breaks.addClass("o_clear");
         return $row[0].outerHTML;
-    }).join("") + "<h6>" + _t("Common colors") + "</h6>";
+    }).join("") + "<h6 class='mt-2'>" + _t("Common colors") + "</h6>";
     var $palettes = $container.find(".note-color .note-color-palette");
     $palettes.prepend(html);
 
-    var $bg = $palettes.filter(":even").find("button:not(.note-color-btn)").addClass("note-color-btn");
-    var $fore = $palettes.filter(":odd").find("button:not(.note-color-btn)").addClass("note-color-btn");
-    $bg.each(function () {
-        var $el = $(this);
-        var className = 'bg-' + $el.data('color');
-        $el.attr('data-event', 'backColor').attr('data-value', className).addClass(className);
-    });
+    var $fore = $palettes.filter(":even").find("button:not(.note-color-btn)").addClass("note-color-btn");
+    var $bg = $palettes.filter(":odd").find("button:not(.note-color-btn)").addClass("note-color-btn");
     $fore.each(function () {
         var $el = $(this);
         var className = 'text-' + $el.data('color');
         $el.attr('data-event', 'foreColor').attr('data-value', className).addClass('bg-' + $el.data('color'));
     });
+    $bg.each(function () {
+        var $el = $(this);
+        var className = 'bg-' + $el.data('color');
+        $el.attr('data-event', 'backColor').attr('data-value', className).addClass(className);
+    });
 };
 
 var fn_tplPopovers = renderer.tplPopovers;
@@ -230,6 +230,9 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
         $(oStyle.image).addClass('o_we_selected_image');
 
         if (dom.isImgFont(oStyle.image)) {
+            $container.find('.note-fore-color-preview > button').css('border-bottom-color', $(oStyle.image).css('color'));
+            $container.find('.note-back-color-preview > button').css('border-bottom-color', $(oStyle.image).css('background-color'));
+
             $container.find('.btn-group:not(.only_fa):has(button[data-event="resize"],button[data-value="img-thumbnail"])').addClass('d-none');
             $container.find('.only_fa').removeClass('d-none');
             $container.find('button[data-event="resizefa"][data-value="2"]').toggleClass("active", $(oStyle.image).hasClass("fa-2x"));
@@ -242,7 +245,7 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
             $container.find('button[data-event="imageShape"][data-value="shadow"]').toggleClass("active", $(oStyle.image).hasClass("shadow"));
 
         } else {
-            $container.find('.d-none:not(.only_fa)').removeClass('d-none');
+            $container.find('.d-none:not(.only_fa, .note-recent-color)').removeClass('d-none');
             $container.find('.only_fa').addClass('d-none');
             var width = ($(oStyle.image).attr('style') || '').match(/(^|;|\s)width:\s*([0-9]+%)/);
             if (width) {
@@ -267,6 +270,9 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
         $container.find('button[data-event="floatMe"][data-value="right"]').toggleClass("active", $(oStyle.image).hasClass("float-right"));
 
         $(oStyle.image).trigger('attributes_change');
+    } else {
+        $container.find('.note-fore-color-preview > button').css('border-bottom-color', oStyle.color);
+        $container.find('.note-back-color-preview > button').css('border-bottom-color', oStyle['background-color']);
     }
 };
 
@@ -990,14 +996,10 @@ $.summernote.lang.odoo = {
       justify: _t('Justify full')
     },
     color: {
-      recent: _t('Recent Color'),
-      more: _t('More Color'),
       background: _t('Background Color'),
       foreground: _t('Font Color'),
       transparent: _t('Transparent'),
-      setTransparent: _t('Set transparent'),
-      reset: _t('Reset'),
-      resetToDefault: _t('Reset to default')
+      setTransparent: _t('None'),
     },
     shortcut: {
       shortcuts: _t('Keyboard shortcuts'),

addons/web_editor/static/src/js/editor/summernote.js

@@ -970,6 +970,43 @@ renderer.tplButtonInfo.fontsize = function (lang, options) {
     });
 };
 
+renderer.tplButtonInfo.color = function (lang, options) {
+    var foreColorButtonLabel = '<i class="' + options.iconPrefix + options.icons.color.recent + '"></i>';
+    var backColorButtonLabel = '<i class="' + options.iconPrefix + 'paint-brush"></i>';
+    // TODO Remove recent color button if possible.
+    // It is still put to avoid JS errors when clicking other buttons as the
+    // editor still expects it to exist.
+    var recentColorButton = renderer.getTemplate().button(foreColorButtonLabel, {
+        className: 'note-recent-color d-none',
+        title: lang.color.foreground,
+        event: 'color',
+        value: '{"backColor":"#B35E9B"}'
+    });
+    var foreColorItems = [
+        '<li><div class="btn-group flex-column">',
+        '<div class="note-color-palette" data-target-event="foreColor"></div>',
+        '</div></li>',
+    ];
+    var backColorItems = [
+        '<li><div class="btn-group flex-column">',
+        '<div class="note-color-reset" data-event="backColor" data-value="inherit" title="' + lang.color.transparent + '">',
+        lang.color.setTransparent + '</div>',
+        '<div class="note-color-palette" data-target-event="backColor"></div>',
+        '</div></li>',
+    ];
+    var foreColorButton = renderer.getTemplate().button(foreColorButtonLabel, {
+        className: 'note-fore-color-preview mx-1',
+        title: lang.color.foreground,
+        dropdown: renderer.getTemplate().dropdown(foreColorItems)
+    });
+    var backColorButton = renderer.getTemplate().button(backColorButtonLabel, {
+        className: 'note-back-color-preview mx-1',
+        title: lang.color.background,
+        dropdown: renderer.getTemplate().dropdown(backColorItems)
+    });
+    return recentColorButton + foreColorButton + backColorButton;
+},
+
 //::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::
 
 key.nameFromCode[46] = 'DELETE';
@@ -1922,59 +1959,6 @@ $.summernote.pluginEvents.removeFormat = function (event, editor, layoutInfo, va
     event.preventDefault();
     return false;
 };
-var fn_boutton_updateRecentColor = eventHandler.modules.toolbar.button.updateRecentColor;
-eventHandler.modules.toolbar.button.updateRecentColor = function (elBtn, sEvent, sValue) {
-    fn_boutton_updateRecentColor.call(this, elBtn, sEvent, sValue);
-    var $recentcolor = $.find('.note-recent-color i');
-    var $recentcolorbtn = $.find('.note-recent-color');
-
-    //find last used color for fonts or for icons
-    //set this color into recentcolor button of both font and icon
-    for (var i in $recentcolor) {
-        var $font = $recentcolor[i];
-        var $button = $($recentcolorbtn[i]);
-        var className = $font.className.split(/\s+/);
-        var k;
-        if (sEvent === "foreColor") {
-            //set class for forecolor to recentcolor button font-icon
-            for (k=2; k<className.length; k++) {
-                if (className[k].length && className[k].slice(0,5) === "text-") {
-                  className.splice(k,1);
-                  k--;
-                }
-            }
-            if (sValue.indexOf('text-') !== -1) {
-                $font.className = className.join(' ') + ' ' + sValue;
-                $font.style.color = '';
-            } else {
-                $font.className = $font.className.replace(/(^|\s+)text-\S+/, '');
-                $font.style.color = sValue !== 'inherit' ? sValue : "";
-            }
-        } else {
-            //set class for backcolor to recentcolor button font-icon
-            for (k=2; k<className.length; k++) {
-                if (className[k].length && className[k].slice(0,3) === "bg-") {
-                  className.splice(k,1);
-                  k--;
-                }
-            }
-            if (sValue.indexOf('bg-') !== -1) {
-                $font.className =className.join(' ') + ' ' + sValue;
-                $font.style.backgroundColor = "";
-            } else {
-                $font.className = $font.className.replace(/(^|\s+)bg-\S+/, '');
-                $font.style.backgroundColor = sValue !== 'inherit' ? sValue : "";
-            }
-        }
-        if (sValue !== 'inherit') {
-            //set attribute for color to the recentcolor button
-            var colorInfo = JSON.parse($button.attr('data-value'));
-            colorInfo[sEvent] = sValue;
-            $button.attr('data-value', JSON.stringify(colorInfo));
-        }
-    }
-    return false;
-};
 
 eventHandler.modules.editor.undo = function ($popover) {
     if (!$popover.attr('disabled')) $popover.data('NoteHistory').undo();
@@ -1983,6 +1967,15 @@ eventHandler.modules.editor.redo = function ($popover) {
     if (!$popover.attr('disabled'))  $popover.data('NoteHistory').redo();
 };
 
+// Get color and background color of node to update recent color button
+var fn_from_node = eventHandler.modules.editor.style.fromNode;
+eventHandler.modules.editor.style.fromNode = function ($node) {
+    var styleInfo = fn_from_node.apply(this, arguments);
+    styleInfo['color'] = $node.css('color');
+    styleInfo['background-color'] = $node.css('background-color');
+    return styleInfo;
+};
+
 // use image toolbar if current range is on image
 var fn_editor_currentstyle = eventHandler.modules.editor.currentStyle;
 eventHandler.modules.editor.currentStyle = function (target) {

addons/web_editor/static/src/js/tours/rte.js

@@ -53,8 +53,11 @@ tour.register('rte', {
     }
 }, {
     content: "change text bg-color after triple click",
-    trigger: '.note-popover button[data-event="color"]',
+    trigger: '.note-color button.dropdown-toggle:has(.fa-paint-brush)',
     extra_trigger: '#editable_area > section .row > div:first',
+}, {
+    content: "change text backColor",
+    trigger: "button[data-event=backColor]:visible:eq(2)",
 }, {
     content: "change selection to change text color",
     trigger: '#editable_area > section .row > div:first:not(:has(p font)) h1 font',
@@ -64,10 +67,10 @@ tour.register('rte', {
     }
 }, {
     content: "open color dropdown",
-    trigger: ".note-color button.dropdown-toggle",
+    trigger: ".note-color button.dropdown-toggle:has(.fa-font)",
 }, {
     content: "change text color",
-    trigger: ".btn-group.show button[data-event=foreColor]:first",
+    trigger: "button[data-event=foreColor]:visible:first",
 }, {
     content: "change selection to change text bg-color again",
     trigger: '#editable_area > section .row > div:first h1 font:eq(2)',
@@ -77,7 +80,7 @@ tour.register('rte', {
     }
 }, {
     content: "open color dropdown",
-    trigger: ".note-color button.dropdown-toggle",
+    trigger: ".note-color button.dropdown-toggle:has(.fa-paint-brush)",
 }, {
     content: "change text backColor again",
     trigger: "button[data-event=backColor]:visible:first",
@@ -90,7 +93,7 @@ tour.register('rte', {
     }
 }, {
     content: "open color dropdown",
-    trigger: ".note-color button.dropdown-toggle",
+    trigger: ".note-color button.dropdown-toggle:has(.fa-font)",
 }, {
     content: "change text color again",
     trigger: "button[data-event=foreColor]:visible:eq(3)",

addons/web_editor/static/src/scss/web_editor.ui.scss

@@ -789,12 +789,6 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
             min-width: 228px;
         }
 
-        #colors_preview {
-            padding: 4px;
-            border-radius: 2px;
-            border: 1px solid #989898;
-            border-color: fade-out($o-we-color-text-normal, 0.5);
-        }
         .note-color-palette .note-color-row {
             height: auto!important;
 
@@ -842,8 +836,17 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
     }
 
     .note-color {
-        .dropdown-toggle {
-            width: auto;
+        .note-back-color-preview, .note-fore-color-preview {
+            .dropdown-toggle {
+                padding: 0px 7px;
+                height: 35px;
+                width: auto;
+                border-top: none !important;
+                border-bottom: 3px solid;
+                &:after {
+                    display: none;
+                }
+            }
         }
         .o_foreground_toggle > button:before {
             font-family: FontAwesome;
@@ -854,7 +857,10 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
             content: '\f0c3';
         }
         .dropdown-menu {
-            min-width: 353px!important;
+            min-width: 180px!important;
+            .btn-group .note-color-reset {
+                font-size: 14px !important;
+            }
         }
     }
 }