diff options
Diffstat (limited to 'addons/web/static/src')
| -rw-r--r-- | addons/web/static/src/scss/colorpicker.scss | 86 | ||||
| -rw-r--r-- | addons/web/static/src/xml/colorpicker.xml | 47 |
2 files changed, 55 insertions, 78 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> |