From 87f28adaacbf06f34f2426e7011832983de3e405 Mon Sep 17 00:00:00 2001
From: fja-odoo <fja@odoo.com>
Date: Thu, 27 Feb 2020 14:11:57 +0000
Subject: [PATCH] [IMP] web: make ColorpickerDialog smaller

Remove HSL from the color picker and make the dialog smaller.

Part of https://github.com/odoo/odoo/pull/46088
task-2195313
---
 .../src/js/widgets/colorpicker_dialog.js      |  2 +-
 .../web/static/src/xml/colorpicker_dialog.xml | 48 +++++++------------
 2 files changed, 17 insertions(+), 33 deletions(-)

diff --git a/addons/web/static/src/js/widgets/colorpicker_dialog.js b/addons/web/static/src/js/widgets/colorpicker_dialog.js
index 6982f9c6349..f7238cceb2a 100644
--- a/addons/web/static/src/js/widgets/colorpicker_dialog.js
+++ b/addons/web/static/src/js/widgets/colorpicker_dialog.js
@@ -29,7 +29,7 @@ var ColorpickerDialog = Dialog.extend({
         options = options || {};
 
         this._super(parent, _.extend({
-            size: 'medium',
+            size: 'small',
             title: _t('Pick a color'),
             buttons: [
                 {text: _t('Choose'), classes: 'btn-primary', close: true, click: this._onFinalPick.bind(this)},
diff --git a/addons/web/static/src/xml/colorpicker_dialog.xml b/addons/web/static/src/xml/colorpicker_dialog.xml
index edcb9376026..dab882595db 100644
--- a/addons/web/static/src/xml/colorpicker_dialog.xml
+++ b/addons/web/static/src/xml/colorpicker_dialog.xml
@@ -4,7 +4,7 @@
 <t t-name="ColorpickerDialog">
     <div class="o_colorpicker_widget">
         <div class="row">
-            <div class="col-auto">
+            <div class="col-12">
                 <div class="o_color_pick_area d-inline-block border">
                     <div class="o_picker_pointer rounded-circle" />
                 </div>
@@ -15,7 +15,7 @@
                     <div class="o_opacity_pointer" />
                 </div>
             </div>
-            <form class="col o_color_picker_inputs">
+            <form class="col-12 o_color_picker_inputs">
                 <div class="input-group">
                     <div class="input-group-prepend">
                         <span class="input-group-text rounded-0 o_color_preview" />
@@ -23,38 +23,22 @@
                     <input type="text" class="form-control o_hex_input" data-color-method="hex" />
                 </div>
                 <div class="form-row mt-2">
-                    <div class="col">
-                        <div class="form-group">
-                            <label for="red">Red</label>
-                            <input type="text" class="form-control o_red_input" data-color-method="rgb" id="red" />
-                        </div>
-                        <div class="form-group">
-                            <label for="green">Green</label>
-                            <input type="text" class="form-control o_green_input" data-color-method="rgb" id="green" />
-                        </div>
-                        <div class="form-group">
-                            <label for="blue">Blue</label>
-                            <input type="text" class="form-control o_blue_input" data-color-method="rgb" id="blue" />
-                        </div>
+                    <div class="col form-group">
+                        <label for="red">Red</label>
+                        <input type="text" class="form-control o_red_input" data-color-method="rgb" id="red" />
                     </div>
-                    <div class="col">
-                        <div class="form-group">
-                            <label for="hue">Hue</label>
-                            <input type="text" class="form-control o_hue_input" data-color-method="hsl" id="hue" />
-                        </div>
-                        <div class="form-group">
-                            <label for="saturation">Saturation %</label>
-                            <input type="text" class="form-control o_saturation_input" data-color-method="hsl" id="saturation" />
-                        </div>
-                        <div class="form-group">
-                            <label for="lightness">Lightness %</label>
-                            <input type="text" class="form-control o_lightness_input" data-color-method="hsl" id="lightness" />
-                        </div>
+                    <div class="col form-group">
+                        <label for="green">Green</label>
+                        <input type="text" class="form-control o_green_input" data-color-method="rgb" id="green" />
+                    </div>
+                    <div class="col form-group">
+                        <label for="blue">Blue</label>
+                        <input type="text" class="form-control o_blue_input" data-color-method="rgb" id="blue" />
+                    </div>
+                    <div class="col form-group" t-if="!widget.options.noTransparency">
+                        <label for="opacity">Opacity %</label>
+                        <input type="text" class="form-control o_opacity_input" data-color-method="opacity" id="opacity" />
                     </div>
-                </div>
-                <div class="form-group" t-if="!widget.options.noTransparency">
-                    <label for="opacity">Opacity %</label>
-                    <input type="text" class="form-control o_opacity_input" data-color-method="opacity" id="opacity" />
                 </div>
             </form>
         </div>