From fdbcf87228a50d814a8bdf5e49b72c1faa4c3166 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Fri, 31 Jul 2020 14:55:43 +0000
Subject: [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>
---
 addons/web/static/src/xml/colorpicker.xml | 47 +++++++++++++++++++------------
 1 file changed, 29 insertions(+), 18 deletions(-)

(limited to 'addons/web/static/src/xml')

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>
-- 
cgit v1.2.3