[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>
This commit is contained in:
stefanorigano (SRI)
committed by
qsm-odoo
qsm-odoo
co-authored by
qsm-odoo
qsm-odoo
parent
95cbf79325
commit
fdbcf87228
@@ -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%;
|
||||
width: 4%;
|
||||
height: 125px;
|
||||
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_color_slider, .o_opacity_slider {
|
||||
width: 4%;
|
||||
margin-right: 2%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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 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_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>
|
||||
<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>
|
||||
|
||||
@@ -1087,39 +1087,27 @@ body.editor_enable.editor_has_snippets {
|
||||
background-color: $o-we-sidebar-content-field-colorpicker-dropdown-bg;
|
||||
color: $o-we-sidebar-content-field-colorpicker-dropdown-color;
|
||||
|
||||
.d-flex .btn.o_we_colorpicker_switch_pane_btn {
|
||||
color: inherit !important;
|
||||
font-size: inherit !important;
|
||||
font-weight: inherit !important;
|
||||
|
||||
&.active {
|
||||
color: $o-we-sidebar-content-field-colorpicker-dropdown-active-color;
|
||||
border-bottom: $o-we-sidebar-tabs-active-border-width solid $o-we-sidebar-tabs-active-border-color;
|
||||
}
|
||||
+ .o_colorpicker_reset {
|
||||
padding: 0 $o-we-sidebar-content-field-clickable-spacing !important;
|
||||
border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color !important;
|
||||
border-radius: $o-we-sidebar-content-field-border-radius !important;
|
||||
background: $o-we-sidebar-content-field-clickable-bg !important;
|
||||
line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width !important;
|
||||
color: inherit !important;
|
||||
font-size: inherit !important;
|
||||
font-weight: inherit !important;
|
||||
align-self: center;
|
||||
}
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
.o_we_colorpicker_switch_panel {
|
||||
border-bottom: 1px solid $o-we-bg-dark;
|
||||
box-shadow: inset 0 1px 0 rgba(white, .2);
|
||||
}
|
||||
.o_we_colorpicker_switch_pane_btn {
|
||||
@extend %we-generic-tab-button;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.o_colorpicker_reset {
|
||||
max-width: 40%;
|
||||
@extend %we-generic-button;
|
||||
}
|
||||
.o_colorpicker_sections {
|
||||
|
||||
.o_we_color_btn, .o_we_color_combination_btn {
|
||||
float: left;
|
||||
width: percentage(1 / 8);
|
||||
padding-top: percentage(1 / 8);
|
||||
padding-top: percentage(1 / 10);
|
||||
margin: 0;
|
||||
border: none;
|
||||
box-shadow: inset 0 0 0 1px $o-we-sidebar-content-field-colorpicker-dropdown-bg;
|
||||
border: 1px solid $o-we-sidebar-content-field-colorpicker-dropdown-bg;
|
||||
box-shadow: $o-we-sidebar-content-field-colorpicker-shadow;
|
||||
|
||||
&.o_colorpicker_reset {
|
||||
background-color: transparent;
|
||||
@@ -1135,25 +1123,23 @@ body.editor_enable.editor_has_snippets {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.o_we_color_combination_btn {
|
||||
float: none;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
background-clip: padding-box;
|
||||
border-top: $o-we-sidebar-content-field-spacing solid transparent;
|
||||
border-bottom: $o-we-sidebar-content-field-spacing solid transparent;
|
||||
|
||||
> .o_we_cc_preview_wrapper {
|
||||
padding: $o-we-sidebar-content-field-clickable-spacing;
|
||||
}
|
||||
|
||||
+ .o_we_color_combination_btn {
|
||||
margin-top: -$o-we-sidebar-content-field-spacing;
|
||||
.o_we_cc_preview_wrapper:after {
|
||||
// For some reasons, in this specific context we have to
|
||||
// compensate a 1px gap between the flex container and the
|
||||
// absolute positioned pseudo-element that generates the bg.
|
||||
bottom: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
.o_colorpicker_section {
|
||||
padding-top: $o-we-sidebar-content-field-spacing;
|
||||
|
||||
|
||||
@@ -43,15 +43,21 @@
|
||||
|
||||
<!-- options -->
|
||||
<div t-name="web_editor.snippet.option.colorpicker" class="colorpicker">
|
||||
<div class="d-flex px-1">
|
||||
<button t-if="widget.withCombinations" type="button" class="btn flex-grow-1 o_we_colorpicker_switch_pane_btn active" data-target="color-combinations">Combinations</button>
|
||||
<button type="button" t-attf-class="btn flex-grow-1 o_we_colorpicker_switch_pane_btn #{widget.withCombinations ? '' : 'active'}" data-target="theme-colors">Custom</button>
|
||||
<button t-if="widget.resetButton" type="button" class="btn flex-grow-1 o_we_color_btn o_colorpicker_reset">
|
||||
<div class="o_we_colorpicker_switch_panel d-flex justify-content-end px-2">
|
||||
<t t-if="widget.withCombinations">
|
||||
<button type="button" tabindex="1" class="o_we_colorpicker_switch_pane_btn active" data-target="color-combinations">
|
||||
<span>Combinations</span>
|
||||
</button>
|
||||
<button type="button" tabindex="2" t-attf-class="o_we_colorpicker_switch_pane_btn #{widget.withCombinations ? '' : 'active'}" data-target="theme-colors">
|
||||
<span>Custom</span>
|
||||
</button>
|
||||
</t>
|
||||
<button t-if="widget.resetButton" type="button" class="my-1 ml-auto o_we_color_btn o_colorpicker_reset">
|
||||
<t t-if="widget.withCombinations">None</t>
|
||||
<t t-else="">Reset</t>
|
||||
</button>
|
||||
</div>
|
||||
<div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? '' : 'd-none'} px-1" data-color-tab="color-combinations">
|
||||
<div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? '' : 'd-none'} pt-2 px-2 pb-3 bg-black-25" data-color-tab="color-combinations">
|
||||
<!-- List all Presets -->
|
||||
<t t-foreach="5" t-as="i">
|
||||
<t t-call="web_editor.colorpalette.combination.btn">
|
||||
@@ -59,7 +65,7 @@
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
<div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? 'd-none' : ''} p-1" data-color-tab="theme-colors"/>
|
||||
<div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? 'd-none' : ''} pt-2 px-2 pb-3 bg-black-25" data-color-tab="theme-colors"/>
|
||||
</div>
|
||||
<t t-name="web_editor.colorpalette.combination.btn">
|
||||
<button type="button" class="o_we_color_btn o_we_color_combination_btn"
|
||||
|
||||
Reference in New Issue
Block a user