[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
This commit is contained in:
fja-odoo
2020-05-14 22:34:43 +00:00
committed by qsm-odoo
parent 79903abc3e
commit 87f28adaac
2 changed files with 17 additions and 33 deletions
@@ -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)},
@@ -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>