diff options
| author | stefanorigano (SRI) <sri@odoo.com> | 2020-07-31 14:55:43 +0000 |
|---|---|---|
| committer | qsm-odoo <qsm@odoo.com> | 2020-08-14 19:19:47 +0000 |
| commit | fdbcf87228a50d814a8bdf5e49b72c1faa4c3166 (patch) | |
| tree | 70c541af702902764f75c8ff4a4cfa30487d9f21 /addons/web/static/src/xml | |
| parent | 95cbf79325606e8f8092f2103bd85ee98e57fd11 (diff) | |
[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>
Diffstat (limited to 'addons/web/static/src/xml')
| -rw-r--r-- | addons/web/static/src/xml/colorpicker.xml | 47 |
1 files changed, 29 insertions, 18 deletions
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> |