[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

1 files changed, 20 insertions, 46 deletions

diff --git a/addons/web_editor/static/lib/summernote/src/js/Renderer.js b/addons/web_editor/static/lib/summernote/src/js/Renderer.js
index 51190b58695..2c2c8f4ac00 100644
--- a/addons/web_editor/static/lib/summernote/src/js/Renderer.js
+++ b/addons/web_editor/static/lib/summernote/src/js/Renderer.js
@@ -31,7 +31,6 @@ define([
       var title = options.title;
       var className = options.className;
       var dropdown = options.dropdown;
-      var no_caret = options.no_caret;
       var hide = options.hide;
 
       return (dropdown ? '<div class="btn-group' +
@@ -48,7 +47,7 @@ define([
                  (hide ? ' data-hide=\'' + hide + '\'' : '') +
                  ' tabindex="-1">' +
                  label +
-                 ((dropdown && !no_caret)? ' <span class="caret"></span>' : '') +
+                 (dropdown ? ' <span class="caret"></span>' : '') +
                '</button>' +
                (dropdown || '') +
              (dropdown ? '</div>' : '');
@@ -225,52 +224,27 @@ define([
           value: '{"backColor":"#B35E9B"}'
         });
 
-        // This is a copy of web_editor.snippet.option.colorpicker qweb template
-        var colorpicker_template = '' +
-          '<div class="dropdown-menu">' +
-            '<div class="colorpicker">' +
-              '<div class="note-palette-title">{0}</div>' +
-              '<div class="btn-group palette-reset">' +
-                '<div class="note-color-reset" data-event="{2}" data-value="inherit" title="{1}">' +
-                  '<i class="fa fa-ban"></i>' +
-                '</div>' +
-              '</div>' +
-              '<div class="o_colorpicker_sections">' +
-                '<ul class="nav nav-pills o_colorpicker_section_menu">' +
-                  '<li><a href="#o_palette_spectrum"><i class="fa fa-eyedropper"></i></a></li>' +
-                '</ul>' +
-                '<div class="tab-content o_colorpicker_section_tabs">' +
-                  '<div class="tab-pane" id="o_palette_spectrum">' +
-                    '<div class="note-color-palette" data-target-event="{2}"></div>' +
-                  '</div>' +
-                '</div>' +
-              '</div>' +
-            '</div>' +
-          '</div>';
-
-        var foreground = formatStr(colorpicker_template, [lang.color.foreground, lang.color.reset, 'foreColor']);
-        var background = formatStr(colorpicker_template, [lang.color.background, lang.color.transparent, 'backColor']);
-
-        var foregroundButton = tplButton('', {
-          title: lang.color.foreground,
-          className: 'o_foreground_toggle',
-          dropdown: foreground,
-          no_caret: true,
-        });
-        var backgroundButton = tplButton('', {
-          title: lang.color.background,
-          className: 'o_background_toggle',
-          dropdown: background,
-          no_caret: true,
-        });
+        var items = [
+          '<li><div class="btn-group">',
+          '<div class="note-palette-title">' + lang.color.background + '</div>',
+          '<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><div class="btn-group">',
+          '<div class="note-palette-title">' + lang.color.foreground + '</div>',
+          '<div class="note-color-reset" data-event="foreColor" data-value="inherit" title="' + lang.color.reset + '">',
+          lang.color.resetToDefault,
+          '</div>',
+          '<div class="note-color-palette" data-target-event="foreColor"></div>',
+          '</div></li>'
+        ];
 
-        return colorButton + foregroundButton + backgroundButton;
+        var moreButton = tplButton('', {
+          title: lang.color.more,
+          dropdown: tplDropdown(items)
+        });
 
-        function formatStr(str, values) {
-          return str.replace(/{(\d+)}/g, function (match, number) {
-            return (values[number] !== undefined)? values[number] : match;
-          });
-        };
+        return colorButton + moreButton;
       },
       bold: function (lang, options) {
         return tplIconButton(options.iconPrefix + options.icons.font.bold, {