[IMP] web_editor: improve icon color edition

- Make sure icon colors can be edited the same way as text
- Improve recent color behavior

3 files changed, 51 insertions, 24 deletions

diff --git a/addons/web_editor/static/src/js/rte.summernote.js b/addons/web_editor/static/src/js/rte.summernote.js
index 8ff0effb86b..811c3e23a9f 100644
--- a/addons/web_editor/static/src/js/rte.summernote.js
+++ b/addons/web_editor/static/src/js/rte.summernote.js
@@ -67,8 +67,8 @@ renderer.createPalette = function ($container, options) {
     var $palettes = $container.find(".note-color .note-color-palette");
     $palettes.prepend(html);
 
-    var $bg = $palettes.first().find("button:not(.note-color-btn)").addClass("note-color-btn");
-    var $fore = $palettes.last().find("button:not(.note-color-btn)").addClass("note-color-btn");
+    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');
@@ -146,10 +146,7 @@ renderer.tplPopovers = function (lang, options) {
         })).appendTo($resizefa);
     }
     var $colorfa = $airPopover.find('.note-color').clone();
-    $colorfa.find(".btn-group:first").remove();
     $colorfa.find("ul.dropdown-menu").css('min-width', '172px');
-    $colorfa.find('button[data-event="color"]').attr('data-value', '{"foreColor": "#f00"}')
-        .find("i").css({'background': '', 'color': '#f00'});
     $resizefa.after($colorfa);
 
     // show dialog box and delete
diff --git a/addons/web_editor/static/src/js/summernote.js b/addons/web_editor/static/src/js/summernote.js
index 71647828cc6..c2e2ea54dca 100644
--- a/addons/web_editor/static/src/js/summernote.js
+++ b/addons/web_editor/static/src/js/summernote.js
@@ -1872,23 +1872,51 @@ $.summernote.pluginEvents.removeFormat = function (event, editor, layoutInfo, va
 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 font = $(elBtn).closest('.note-color').find('.note-recent-color i')[0];
-
-    if (sEvent === "foreColor") {
-        if (sValue.indexOf('text-') !== -1) {
-            font.className += ' ' + sValue;
-            font.style.color = '';
+    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+/);
+        if (sEvent === "foreColor") {
+            //set class for forecolor to recentcolor button font-icon
+            for (var 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 {
-            font.className = font.className.replace(/(^|\s+)text-\S+/);
-            font.style.color = sValue !== 'inherit' ? sValue : "";
+            //set class for backcolor to recentcolor button font-icon
+            for (var 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 : "";
+            }
         }
-    } else {
-        if (sValue.indexOf('bg-') !== -1) {
-            font.className += ' ' + 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;
@@ -2089,8 +2117,9 @@ $.summernote.pluginEvents.applyFont = function (event, editor, layoutInfo, color
     }
 
     // remove node without attributes (move content), and merge the same nodes
-    var className2, style, style2, $prev;
-    for (var i=0; i<nodes.length; i++) {
+    if (!dom.isImgFont(node)) {
+     var className2, style, style2, $prev;
+     for (var i=0; i<nodes.length; i++) {
       node = nodes[i];
 
       if ((dom.isText(node) || dom.isBR(node)) && !dom.isVisibleText(node)) {
@@ -2128,6 +2157,7 @@ $.summernote.pluginEvents.applyFont = function (event, editor, layoutInfo, color
           continue;
         }
       }
+     }
     }
 
     range.create(startPoint.node, startPoint.offset, endPoint.node, endPoint.offset).select();
diff --git a/addons/web_editor/static/src/js/tour.rte.js b/addons/web_editor/static/src/js/tour.rte.js
index c940c40c221..da4780202d3 100644
--- a/addons/web_editor/static/src/js/tour.rte.js
+++ b/addons/web_editor/static/src/js/tour.rte.js
@@ -61,7 +61,7 @@ odoo.define('web_editor.tour', function (require) {
         trigger: ".note-color button.dropdown-toggle",
     }, {
         content: "change text color",
-        trigger: "button[data-event=foreColor]:first",
+        trigger: ".btn-group.open button[data-event=foreColor]:first",
     }, {
         content: "change selection to change text bg-color again",
         trigger: '#editable_area > section .row > div:first h1 font:eq(2)',
@@ -218,7 +218,7 @@ odoo.define('web_editor.tour', function (require) {
     }, {
         content: "add ul content",
         trigger: '#editable_area > section .row > div:first',
-        extra_trigger: 'body:not(:has(#editable_area > section .row > div:first p:eq(4), #editable_area > section .row > div:eq(3))) #editable_area > section .row > div:first p:eq(3)',
+        extra_trigger: 'body:not(:has(#editable_area > section .row > div:first p:eq(5), #editable_area > section .row > div:eq(3))) #editable_area > section .row > div:first p:eq(3)',
         run: function () {
             var html = '  <ul>     '+
                 '\n     <li>   <p>Batnae municipium.  </p></li>'+