From e90e7c3e007f296bc61ceed012b5177120fc25cc Mon Sep 17 00:00:00 2001
From: Younn Olivier <yol@odoo.com>
Date: Mon, 19 Jul 2021 08:46:15 +0000
Subject: [PATCH] [FIX] web_editor: fix colorpicker display on html fields

ISSUE
When selecting colors options from the editor toolbar on a html field,
the colorpicker was not displayed under the toolbar.

CAUSE
Before this commit, the colorpicker dropdown position was computed with
top, bottom and height css properties.

After a new colorpicker was introduced with multiple sections of
different sizes, the size of the dropdown-menu could not be fixed
anymore and [1] broke the existing computation to display the dropdown
above or below the toolbar.

SOLUTION
Using bootstrap dropdown 'dropup' class instead of top, bottom and
height css properties.

[1]: https://github.com/odoo/odoo/commit/96ab729850983162a0039e40c77537ef65cd039e

closes odoo/odoo#73947

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 addons/web_editor/static/src/js/wysiwyg/wysiwyg.js | 13 +++----------
 addons/web_editor/static/src/scss/wysiwyg.scss     |  2 --
 2 files changed, 3 insertions(+), 12 deletions(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index ca779d039a1..c77add0371a 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -842,19 +842,12 @@ const Wysiwyg = Widget.extend({
                         }
                         manualOpening = true;
                         $dropdown.children('.dropdown-toggle').dropdown('show');
-                        const $colorpickerMenu = $dropdown.find('.colorpicker-menu');
                         const $colorpicker = $dropdown.find('.colorpicker');
                         const colorpickerHeight = $colorpicker.outerHeight();
                         const toolbarPos = this.toolbar.$el.offset();
-                        let top;
-                        if (colorpickerHeight < toolbarPos.top) {
-                            top = 'auto';
-                        } else {
-                            const colorpickerBottom = toolbarPos.top + this.toolbar.$el.outerHeight() + colorpickerHeight;
-                            const clientHeight = this.odooEditor.document.documentElement.clientHeight;
-                            top = colorpickerBottom > clientHeight ? colorpickerHeight - clientHeight : '';
-                        }
-                        $colorpickerMenu.css({top, height: $colorpicker.outerHeight() + 2});
+                        const colorpickerBottom = toolbarPos.top + this.toolbar.$el.outerHeight() + colorpickerHeight;
+                        const clientHeight = this.odooEditor.document.documentElement.clientHeight;
+                        $dropdown[0].classList.toggle('dropup', colorpickerBottom > clientHeight);
                         manualOpening = false;
                     });
                 });
diff --git a/addons/web_editor/static/src/scss/wysiwyg.scss b/addons/web_editor/static/src/scss/wysiwyg.scss
index 5c32695d93d..2d89e09cc4f 100644
--- a/addons/web_editor/static/src/scss/wysiwyg.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg.scss
@@ -75,11 +75,9 @@ $o-we-zindex: $o-we-overlay-zindex + 1 !default;
         box-shadow: $o-we-dropdown-shadow;
 
         &.colorpicker-menu {
-            bottom: 100%;
             margin-top: 0;
             margin-bottom: 0.125rem;
             min-width: 222px !important;
-            height: auto !important;
         }
     }
     .dropdown-toggle::after {