From 605c899b041cddfa9c84eef66acee9471b0fb8b3 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Mon, 28 Sep 2020 15:26:49 +0000
Subject: [PATCH] [FIX] web_editor: restore background and foreground color
 previews

Forward-port of [1] for the custom text tools for the website editor.
Still has to be improved with the future text tools.

[1]: https://github.com/odoo/odoo/pull/58690

Part of https://github.com/odoo/odoo/pull/58638

closes odoo/odoo#58745

X-original-commit: 19be84634d394f47ceb882c5ddd24585f31b50ae
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/editor/rte.summernote.js           |  8 ++++----
 .../web_editor/static/src/scss/wysiwyg_snippets.scss | 12 ++++++++++--
 2 files changed, 14 insertions(+), 6 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 b99c9781446..96f73267244 100644
--- a/addons/web_editor/static/src/js/editor/rte.summernote.js
+++ b/addons/web_editor/static/src/js/editor/rte.summernote.js
@@ -245,8 +245,8 @@ 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('.note-fore-color-preview > button > .caret').css('border-bottom-color', $(oStyle.image).css('color'));
+            $container.find('.note-back-color-preview > button > .caret').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');
@@ -287,8 +287,8 @@ eventHandler.modules.popover.button.update = function ($container, oStyle) {
 
         $(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']);
+        $container.find('.note-fore-color-preview > button > .caret').css('border-bottom-color', oStyle.color);
+        $container.find('.note-back-color-preview > button > .caret').css('border-bottom-color', oStyle['background-color']);
     }
 };
 
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index e73da07afbf..f432de9c9f6 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -96,8 +96,16 @@ body.editor_enable.editor_has_snippets {
             .note-back-color-preview {
                 margin-left: $-text-tools-gap;
             }
-            .btn:after {
-                display: none;
+            .btn {
+
+                > .caret {
+                    display: block;
+                    @include o-position-absolute(auto, 0, 0, 0);
+                    border-bottom: 2px solid transparent;
+                }
+                &::after {
+                    display: none;
+                }
             }
         }
         &.note-style {