[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>
This commit is contained in:
qsm-odoo
2020-09-28 18:58:25 +00:00
parent 093ae661e9
commit 605c899b04
2 changed files with 14 additions and 6 deletions
@@ -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']);
}
};
@@ -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 {