[IMP] web, web_editor: review colorpicker design

Part of https://github.com/odoo/odoo/pull/55959
task-2157252

Co-authored-by: qsm-odoo <qsm@odoo.com>

4 files changed, 87 insertions, 118 deletions

diff --git a/addons/web/static/src/scss/colorpicker.scss b/addons/web/static/src/scss/colorpicker.scss
index a2be514e6d1..ae618504a0c 100644
--- a/addons/web/static/src/scss/colorpicker.scss
+++ b/addons/web/static/src/scss/colorpicker.scss
@@ -1,82 +1,48 @@
 // COLOR PICKER
 .o_colorpicker_widget {
     .o_color_pick_area {
-        position: relative;
-        width: 79%;
         height: 125px;
         background-image: linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 0%, 0) 50%, hsl(0, 0%, 0%) 100%),
                           linear-gradient(to right, hsl(0, 0%, 50%) 0%, hsla(0, 0%, 50%, 0) 100%);
         cursor: crosshair;
-
-        .o_picker_pointer {
-            position: absolute;
-            width: 10px;
-            height: 10px;
-            border: 1px solid white;
-            box-shadow: 0px 0px 2px 1px gray('400');
-        }
     }
     .o_color_slider {
-        position: relative;
-        margin-left: 2.5%;
-        width: 4%;
-        height: 125px;
         background: linear-gradient(#F00 0%, #FF0 16.66%, #0F0 33.33%, #0FF 50%, #00F 66.66%, #F0F 83.33%, #F00 100%);
-        cursor: pointer;
-
-        .o_slider_pointer {
-            @include o-position-absolute($left: -100%);
-            width: 300%;
-            height: 6px;
-            border: 1px solid white;
-            box-shadow: 0px 0px 2px 1px gray('600');
-        }
     }
-    .o_opacity_slider {
+    .o_opacity_slider, .o_color_preview {
         @extend %o-preview-alpha-background;
-        position: relative;
-        margin-left: 5%;
+    }
+    .o_color_slider, .o_opacity_slider {
         width: 4%;
-        height: 125px;
+        margin-right: 2%;
         cursor: pointer;
-
-        .o_opacity_pointer {
-            @include o-position-absolute($left: -100%);
-            width: 300%;
-            height: 6px;
-            border: 1px solid white;
-            box-shadow: 0px 0px 2px 1px gray('600');
-        }
     }
-
+    .o_slider_pointer, .o_opacity_pointer {
+        @include o-position-absolute($left: -50%);
+        width: 200%;
+        height: 8px;
+        margin-top: -2px;
+    }
+    .o_slider_pointer, .o_opacity_pointer, .o_picker_pointer, .o_color_preview {
+        box-shadow: inset 0 0 0 1px rgba(white, 0.9);
+    }
+    .o_slider_pointer, .o_opacity_pointer, .o_picker_pointer, .o_color_preview, .o_hex_div, .o_rgba_div  {
+        border: 1px solid black;
+    }
     .o_color_picker_inputs {
-        padding-top: 3px;
-        font-size: 12px;
-        display: flex;
+        font-size: 10px;
 
-        .o_color_preview {
-            @extend %o-preview-alpha-background;
-            height: 20px;
-            width: 30px;
-        }
-        > * {
-            display: flex;
-        }
-        .o_hex_div {
-            width: 38%;
-            margin-right: 2%;
-            border: 1px solid;
-        }
-        .o_rgba_div {
-            width: 60%;
-            border: 1px solid;
-        }
         input {
-            width: 100%;
-            border: none;
+            font-family: monospace !important; // FIXME: the monospace font used in the editor has not consistent ch units on Firefox
             height: 18px;
-            background-color: inherit;
-            color: inherit;
+            font-size: 11px;
+        }
+        .o_hex_div input {
+            width: 7ch;
+        }
+        .o_rgba_div input {
+            margin-right: 3px;
+            width: 3ch;
         }
     }
 }
diff --git a/addons/web/static/src/xml/colorpicker.xml b/addons/web/static/src/xml/colorpicker.xml
index a3f45348990..ada505a8db8 100644
--- a/addons/web/static/src/xml/colorpicker.xml
+++ b/addons/web/static/src/xml/colorpicker.xml
@@ -3,27 +3,38 @@
 
 <t t-name="Colorpicker">
     <div class="o_colorpicker_widget">
-        <div class="o_color_pick_area d-inline-block border" t-att-style="widget.options.noTransparency ? 'width: 89%;' : None">
-            <div class="o_picker_pointer rounded-circle" tabindex="-1"/>
-        </div>
-        <div class="o_color_slider d-inline-block border">
-            <div class="o_slider_pointer" tabindex="-1"/>
-        </div>
-        <div class="o_opacity_slider d-inline-block border" t-if="!widget.options.noTransparency">
-            <div class="o_opacity_pointer" tabindex="-1"/>
+        <div class="d-flex justify-content-between align-items-stretch mb-2">
+            <div class="o_color_pick_area position-relative w-75" t-att-style="widget.options.noTransparency ? 'width: 89%;' : None">
+                <div class="o_picker_pointer rounded-circle p-1 position-absolute" tabindex="-1"/>
+            </div>
+            <div class="o_color_slider position-relative">
+                <div class="o_slider_pointer" tabindex="-1"/>
+            </div>
+            <div class="o_opacity_slider position-relative" t-if="!widget.options.noTransparency">
+                <div class="o_opacity_pointer" tabindex="-1"/>
+            </div>
         </div>
-        <div class="o_color_picker_inputs">
-            <div t-if="widget.options.colorPreview" class="o_color_preview"/>
-            <div class="o_hex_div"><input type="text" class="o_hex_input" data-color-method="hex" size="1"/>hex</div>
-            <div class="o_rgba_div">
-                <input type="text" class="o_red_input" data-color-method="rgb" size="1"/>
-                <input type="text" class="o_green_input" data-color-method="rgb" size="1"/>
-                <input type="text" class="o_blue_input" data-color-method="rgb" size="1"/>
+        <div t-if="widget.options.colorPreview" class="o_color_preview mb-1 w-100 p-2"/>
+        <div class="o_color_picker_inputs d-flex justify-content-between mb-2">
+            <t t-set="input_classes">p-0 border-0 text-center text-monospace bg-transparent text-white</t>
+
+            <div class="o_hex_div bg-black-50 px-1 d-flex align-items-baseline">
+                <input type="text" t-attf-class="o_hex_input {{input_classes}}" data-color-method="hex" size="1"/>
+                <span class="flex-grow-0 ml-1 text-white-50">hex</span>
+            </div>
+            <div class="o_rgba_div bg-black-50 px-1 d-flex align-items-baseline">
+                <input type="text" t-attf-class="o_red_input {{input_classes}}" data-color-method="rgb" size="1"/>
+                <input type="text" t-attf-class="o_green_input {{input_classes}}" data-color-method="rgb" size="1"/>
+                <input type="text" t-attf-class="o_blue_input mr-0 {{input_classes}}" data-color-method="rgb" size="1"/>
                 <t t-if="!widget.options.noTransparency">
-                    <input type="text" class="o_opacity_input" data-color-method="opacity" size="1"/>
-                    RGBA
+                    <input type="text" t-attf-class="o_opacity_input {{input_classes}}" data-color-method="opacity" size="1"/>
+                    <span class="flex-grow-0 ml-1 text-white-50">
+                        RGBA
+                    </span>
                 </t>
-                <t t-else="">RGB</t>
+                <span t-else="" class="flex-grow-0 ml-1 text-white-50">
+                    RGB
+                </span>
             </div>
         </div>
     </div>
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
index a1f2a3152be..496d2a39b95 100644
--- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss
@@ -1087,39 +1087,27 @@ body.editor_enable.editor_has_snippets {
     background-color: $o-we-sidebar-content-field-colorpicker-dropdown-bg;
     color: $o-we-sidebar-content-field-colorpicker-dropdown-color;
 
-    .d-flex .btn.o_we_colorpicker_switch_pane_btn {
-        color: inherit !important;
-        font-size: inherit !important;
-        font-weight: inherit !important;
-
-        &.active {
-            color: $o-we-sidebar-content-field-colorpicker-dropdown-active-color;
-            border-bottom: $o-we-sidebar-tabs-active-border-width solid $o-we-sidebar-tabs-active-border-color;
-        }
-        + .o_colorpicker_reset {
-            padding: 0 $o-we-sidebar-content-field-clickable-spacing !important;
-            border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color !important;
-            border-radius: $o-we-sidebar-content-field-border-radius !important;
-            background: $o-we-sidebar-content-field-clickable-bg !important;
-            line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width !important;
-            color: inherit !important;
-            font-size: inherit !important;
-            font-weight: inherit !important;
-            align-self: center;
-        }
-        &:focus {
-            box-shadow: none;
-        }
+    .o_we_colorpicker_switch_panel {
+        border-bottom: 1px solid $o-we-bg-dark;
+        box-shadow: inset 0 1px 0 rgba(white, .2);
+    }
+    .o_we_colorpicker_switch_pane_btn {
+        @extend %we-generic-tab-button;
+        flex: 0 0 auto;
+    }
+    .o_colorpicker_reset {
+        max-width: 40%;
+        @extend %we-generic-button;
     }
     .o_colorpicker_sections {
 
         .o_we_color_btn, .o_we_color_combination_btn {
             float: left;
             width: percentage(1 / 8);
-            padding-top: percentage(1 / 8);
+            padding-top: percentage(1 / 10);
             margin: 0;
-            border: none;
-            box-shadow: inset 0 0 0 1px $o-we-sidebar-content-field-colorpicker-dropdown-bg;
+            border: 1px solid $o-we-sidebar-content-field-colorpicker-dropdown-bg;
+            box-shadow: $o-we-sidebar-content-field-colorpicker-shadow;
 
             &.o_colorpicker_reset {
                 background-color: transparent;
@@ -1135,25 +1123,23 @@ body.editor_enable.editor_has_snippets {
                 }
             }
         }
-
         .o_we_color_combination_btn {
             float: none;
             width: 100%;
             padding: 0;
             margin: 0;
+            border: 0;
             background-clip: padding-box;
             border-top: $o-we-sidebar-content-field-spacing solid transparent;
             border-bottom: $o-we-sidebar-content-field-spacing solid transparent;
 
-            > .o_we_cc_preview_wrapper {
-                padding: $o-we-sidebar-content-field-clickable-spacing;
-            }
-
-            + .o_we_color_combination_btn {
-                margin-top: -$o-we-sidebar-content-field-spacing;
+            .o_we_cc_preview_wrapper:after {
+                // For some reasons, in this specific context we have to
+                // compensate a 1px gap between the flex container and the
+                // absolute positioned pseudo-element that generates the bg.
+                bottom: -1px;
             }
         }
-
         .o_colorpicker_section {
             padding-top: $o-we-sidebar-content-field-spacing;
 
diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml
index f62c855d6f6..41c7c6e612d 100644
--- a/addons/web_editor/static/src/xml/snippets.xml
+++ b/addons/web_editor/static/src/xml/snippets.xml
@@ -43,15 +43,21 @@
 
     <!-- options -->
     <div t-name="web_editor.snippet.option.colorpicker" class="colorpicker">
-        <div class="d-flex px-1">
-            <button t-if="widget.withCombinations" type="button" class="btn flex-grow-1 o_we_colorpicker_switch_pane_btn active" data-target="color-combinations">Combinations</button>
-            <button type="button" t-attf-class="btn flex-grow-1 o_we_colorpicker_switch_pane_btn #{widget.withCombinations ? '' : 'active'}" data-target="theme-colors">Custom</button>
-            <button t-if="widget.resetButton" type="button" class="btn flex-grow-1 o_we_color_btn o_colorpicker_reset">
+        <div class="o_we_colorpicker_switch_panel d-flex justify-content-end px-2">
+            <t t-if="widget.withCombinations">
+                <button type="button" tabindex="1" class="o_we_colorpicker_switch_pane_btn active" data-target="color-combinations">
+                    <span>Combinations</span>
+                </button>
+                <button type="button" tabindex="2" t-attf-class="o_we_colorpicker_switch_pane_btn #{widget.withCombinations ? '' : 'active'}" data-target="theme-colors">
+                    <span>Custom</span>
+                </button>
+            </t>
+            <button t-if="widget.resetButton" type="button" class="my-1 ml-auto o_we_color_btn o_colorpicker_reset">
                 <t t-if="widget.withCombinations">None</t>
                 <t t-else="">Reset</t>
             </button>
         </div>
-        <div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? '' : 'd-none'} px-1" data-color-tab="color-combinations">
+        <div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? '' : 'd-none'} pt-2 px-2 pb-3 bg-black-25" data-color-tab="color-combinations">
             <!-- List all Presets -->
             <t t-foreach="5" t-as="i">
                 <t t-call="web_editor.colorpalette.combination.btn">
@@ -59,7 +65,7 @@
                 </t>
             </t>
         </div>
-        <div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? 'd-none' : ''} p-1" data-color-tab="theme-colors"/>
+        <div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? 'd-none' : ''} pt-2 px-2 pb-3 bg-black-25" data-color-tab="theme-colors"/>
     </div>
     <t t-name="web_editor.colorpalette.combination.btn">
         <button type="button" class="o_we_color_btn o_we_color_combination_btn"