[IMP] web_editor: come back to a more regular summernote colorpicker

Splitting the summernote colorpicker into bg colorpicker and foreground
colorpicker seems to have been a bad idea as people tend to click on
the recent color button thinking it will open a dropdown.

This commit keeps the design that had been decided for colorpicker
template and do not change the "background-color" snippet option.
However, the colors for background and foreground text changes are
now displayed in an unique dropdown again, with reviewed style.

+ adapt the rte tour

3 files changed, 72 insertions, 91 deletions

diff --git a/addons/web_editor/static/src/js/rte.summernote.js b/addons/web_editor/static/src/js/rte.summernote.js
index a83e9136a06..cb0e809b439 100644
--- a/addons/web_editor/static/src/js/rte.summernote.js
+++ b/addons/web_editor/static/src/js/rte.summernote.js
@@ -46,65 +46,38 @@ renderer.createPalette = function ($container, options) {
 
     var $clpicker = $(QWeb.render('web_editor.colorpicker'));
 
-    $container.find('.colorpicker').each(function (i, picker) {
-        var $picker = $(picker);
-
-        var $sections = $clpicker.find('.o_colorpicker_section').clone(true);
-
-        var $toggles = $picker.find('.o_colorpicker_section_menu');
-        var $tabs = $picker.find('.o_colorpicker_section_tabs');
-        var $defaultToggle = $toggles.find('li');
-        var $defaultTab = $tabs.find('.tab-pane');
-
-        var newDefaultID = _.uniqueId();
-        $defaultToggle.children('a').attr('href', $defaultToggle.children('a').attr('href') + newDefaultID);
-        $defaultTab.attr('id', $defaultTab.attr('id') + newDefaultID);
-
-        if ($sections.length) {
-            $sections.each(function () {
-                var $section = $(this);
-                var id = 'o_palette_' + $section.data('name') + _.uniqueId();
-
-                var $li = $('<li/>')
-                            .append($('<a/>', {href: '#' + id})
-                                .append($('<i/>', {'class': $section.data('iconClass') || '', html: $section.data('iconContent') || ''})));
-                $defaultToggle.before($li);
-
-                $defaultTab.before($section.addClass('tab-pane').attr('id', id));
-            });
-        } else {
-            var id = 'o_palette_other' + _.uniqueId();
-
-            var $li = $('<li/>')
-                        .append($('<a/>', {href: '#' + id, 'aria-controls': id})
-                            .append($('<i/>', {'class': 'fa fa-magic'})));
-            $toggles.prepend($li);
-
-            $tabs.prepend($('<div/>', {'class': 'tab-pane', id: id}).append($clpicker.clone(true)));
-        }
-
-        $toggles.find('li:first-child').addClass('active');
-        $tabs.find('div:first-child').addClass('active');
-
-        $toggles.on('click mouseover', '> li > a', function (e) {
-            e.preventDefault();
-            e.stopPropagation();
-            $(this).tab('show');
+    var groups;
+    if ($clpicker.is("colorpicker")) {
+        groups = _.map($clpicker.children(), function (el) {
+            return $(el).find("button").empty();
         });
-    });
-
-    var $bg = $container.find('.o_background_toggle .dropdown-menu button');
-    var $fore = $container.find('.o_foreground_toggle .dropdown-menu button');
+    } else {
+        groups = [$clpicker.find("button").empty()];
+    }
 
+    var html = "<h6>" + _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) {
+            $after_breaks = $row.find(":nth-child(8n+9)");
+        }
+        $after_breaks.addClass("o_clear");
+        return $row[0].outerHTML;
+    }).join("") + "<h6>" + _t("Common colors") + "</h6>";
+    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");
     $bg.each(function () {
         var $el = $(this);
-        var className = $el.hasClass('note-color-btn')? $el.attr('title') : ('bg-' + $el.data('color'));
+        var className = 'bg-' + $el.data('color');
         $el.attr('data-event', 'backColor').attr('data-value', className).addClass(className);
     });
     $fore.each(function () {
         var $el = $(this);
-        var className = $el.hasClass('note-color-btn')? $el.attr('title') : ('text-' + $el.data('color'));
-        $el.attr('data-event', 'foreColor').attr('data-value', className).addClass(className);
+        var className = 'text-' + $el.data('color');
+        $el.attr('data-event', 'foreColor').attr('data-value', className).addClass('bg-' + $el.data('color'));
     });
 };
 
diff --git a/addons/web_editor/static/src/js/tour.rte.js b/addons/web_editor/static/src/js/tour.rte.js
index 9e867ff9f39..1e0093f80c0 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 @@ Tour.register({
         },
         {
             waitFor:   '#editable_area > section .row > div:first:not(:has(p font)) h1 font',
-            element:   '.note-color button.dropdown-toggle:visible:first',
+            element:   '.note-color button.dropdown-toggle:visible',
             title:     "change selection to change text color",
             onload: function () {
                 var $el = $('#editable_area > section .row > div:first:not(:has(p font)) h1 font');
@@ -70,17 +70,12 @@ Tour.register({
             }
         },
         {
-            title:     "Select foreground spectrum colorpanel",
-            waitFor:   ".dropdown-menu:visible",
-            element:   ".dropdown-menu:visible .o_colorpicker_section_menu li:last a",
-        },
-        {
-            element:   ".dropdown-menu:visible .note-color-row:eq(1) button[data-event=foreColor]:first",
+            element:   ".dropdown-menu:visible .btn-group:last .note-color-row:eq(1) button[data-event=foreColor]:first",
             title:     "change text color",
         },
         {
             waitFor:   '#editable_area > section .row > div:first h1 font:eq(2)',
-            element:   '.note-color button.dropdown-toggle:visible:last',
+            element:   '.note-color button.dropdown-toggle:visible',
             title:     "change selection to change text bg-color again",
             onload: function () {
                 var $el = $('#editable_area > section .row > div:first h1 font:eq(2)');
@@ -89,12 +84,7 @@ Tour.register({
             }
         },
         {
-            title:     "Select background spectrum colorpanel",
-            waitFor:   ".dropdown-menu:visible",
-            element:   ".dropdown-menu:visible .o_colorpicker_section_menu li:last a",
-        },
-        {
-            element:   ".dropdown-menu:visible .note-color-row:eq(0) button[data-event=backColor]:first",
+            element:   ".dropdown-menu:visible .btn-group:first .note-color-row:eq(0) button[data-event=backColor]:first",
             title:     "change text backColor again",
         },
         {
@@ -109,7 +99,7 @@ Tour.register({
         },
         {
             waitFor:   ".dropdown-menu:visible",
-            element:   ".dropdown-menu:visible .note-color-row:eq(0) button[data-event=foreColor]:first",
+            element:   ".dropdown-menu:visible .btn-group:last .note-color-row:eq(0) button[data-event=foreColor]:first",
             title:     "change text foreColor again",
         },
         {
diff --git a/addons/web_editor/static/src/less/web_editor.ui.less b/addons/web_editor/static/src/less/web_editor.ui.less
index f453d0ca384..f3b91123d78 100644
--- a/addons/web_editor/static/src/less/web_editor.ui.less
+++ b/addons/web_editor/static/src/less/web_editor.ui.less
@@ -726,29 +726,33 @@ html[lang] > body.editor_enable{
                 .o-text-overflow(inline-block);
                 max-width: 100px;
             }
+
+            &.active {
+                border-top: 2px solid white;
+                background-color: @o-we-color-dark;
+                color: @o-we-color-text-light;
+                box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5);
+            }
         }
-        .btn.active {
-            border-top: 2px solid white;
-            background-color: @o-we-color-dark;
-            color: @o-we-color-text-light;
-            box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.5);
-        }
-        >.btn-group {
-            margin-top: -2px
-        }
-        .btn-group.open .dropdown-toggle {
-            border-top: 2px solid white;
-            background-color: @o-we-color-darker;
-            color: white;
-            box-shadow: none;
+        > .btn-group {
+            margin-top: -2px;
+
+            &.open .dropdown-toggle {
+                border-top: 2px solid white;
+                background-color: @o-we-color-darker;
+                color: white;
+                box-shadow: none;
+            }
         }
         .dropdown-menu {
             margin: 0;
             border-radius: 0;
             background-color: @o-we-color-darker;
+            color: @o-we-color-text-normal;
             > li > a {
                 width: 100%;
                 color: @o-we-color-text-light;
+
                 &:hover {
                     background-color: @o-we-tab-active-bg;
                     color: white;
@@ -765,16 +769,31 @@ html[lang] > body.editor_enable{
             border: 1px solid #989898;
             border-color: fadeOut(@o-we-color-text-normal, 0.5);
         }
-        .note-color-palette td > button, .note-color-palette div .note-color-btn {
-            border-color: fadeOut(white, 50%);
-            border-radius: 0;
-            margin: 1px;
-        }
+        .note-color-palette .note-color-row {
+            height: auto!important;
+
+            &::after {
+                content: "";
+                display: table;
+                clear: both;
+            }
+
+            .note-color-btn {
+                float: left;
+                margin: 1px 1px 0 0;
+                border-color: black;
+
+                &.o_small {
+                    width: 16px;
+                    height: 16px;
+                    margin: 3px 3px 2px 2px;
+                    border-radius: 50%;
+                }
 
-        // COLORPICKER
-        .note-color {
-            border: 1px solid @o-we-color-divider;
-            border-width: 0 1px;
+                &.o_clear {
+                    clear: both;
+                }
+            }
         }
     }
 }
@@ -804,8 +823,7 @@ html[lang] > body.editor_enable{
             content: '\f0c3';
         }
         .dropdown-menu {
-            min-width: 250px!important;
-            padding: 0!important;
+            min-width: 353px!important;
         }
     }
 }