pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web_editor, website: improve "palettes-chooser" dropdown design

Browse Source 
This commit reviews the component design in order to match the
"Configurator" one.

As a result, 'color-4' and 'color-5' are hidden in the palette-chooser
while remaining visible/editable once the palette is active.

This commit will also reorder color fields in the sidebar and in the
colopicker in order to match both the palette-preview & CC-list colors
order.

Beside design consistency, another reason behind these changes goes back
to the initial stages of the color system introduced with v14.

At the very beginning the system was designed to handle 3 custom colors
+ "locked" black and white.
Being able to edit black and white sounded interesting at that time;
as a result 'color-4' and 'color-5' have been introduced in the
system.

Despite being a powerful tool for designers and pro-users, the edition
of these color has been proven to be tricky an potentially unsafe.

Together with new default palettes that standardize 'color-4' and
'color-5' to safe values, hiding these color from the list simplify
the palette selection process and aims, implicitly, to communicate to
"normal" users that these colors are "not part of the palette", while
somehow related.

task-2656337

closes odoo/odoo#77857

X-original-commit: 02aba326710523bf210644e9038198059db1672c
Related: odoo/design-themes#514
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
stefanorigano (SRI)
2021-10-05 14:17:48 +00:00
committed by qsm-odoo
parent 0d5244e4d1
commit 27604376a9
4 changed files with 40 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/views/editor.xml
+5 -1
View File
@@ -35,7 +35,11 @@
<template id="web_editor.colorpicker" name="Color-Picker" groups="base.group_user">
<colorpicker>
<div class="o_colorpicker_section" data-name="theme">
<button t-foreach="5" t-as="i" t-attf-data-color="o-color-#{i + 1}"></button>
<button data-color="o-color-1"/>
<button data-color="o-color-3"/>
<button data-color="o-color-2"/>
<button data-color="o-color-4" class="ml-2"/>
<button data-color="o-color-5"/>
</div>
<div class="o_colorpicker_section" data-name="common">
<button data-color="black"></button>
addons/website/static/src/js/editor/snippets.options.js
+2 -2
View File
@@ -1237,13 +1237,13 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
const btnEl = document.createElement('we-button');
btnEl.classList.add('o_palette_color_preview_button');
btnEl.dataset.customizeWebsiteVariable = `'${paletteName}'`;
for (let c = 1; c <= 5; c++) {
[1, 3, 2].forEach(c => {
const colorPreviewEl = document.createElement('span');
colorPreviewEl.classList.add('o_palette_color_preview');
const color = weUtils.getCSSVariableValue(`o-palette-${paletteName}-o-color-${c}`, style);
colorPreviewEl.style.backgroundColor = color;
btnEl.appendChild(colorPreviewEl);
}
});
paletteSelectorEl.appendChild(btnEl);
}
addons/website/static/src/scss/website.wysiwyg.scss
+31 -8
View File
@@ -114,20 +114,33 @@ $i: 1;
#oe_snippets > .o_we_customize_panel {
.o_we_user_value_widget.o_palette_color_preview_button {
display: inline-flex;
margin: 1% 0;
padding-right: 0.3rem;
width: 50%;
background: transparent;
&.active, &:hover {
background: transparent;
> div {
box-shadow: 0 0 0 2px $o-we-bg-darkest, 0 0 0 3px $o-we-accent;
}
}
> div {
display: flex;
flex: 1 1 auto;
align-items: stretch;
justify-content: flex-end;
margin: 3px;
min-height: $o-we-sidebar-content-field-dropdown-grid-item-height * .5;
border-radius: $o-we-sidebar-content-field-dropdown-grid-item-height;
box-shadow: 0 0 0 1px $o-we-bg-darkest;
}
.o_palette_color_preview {
flex: 1 0 0;
margin: 1px 0;
transition: flex 150ms ease 0s;
}
&:not(:hover) .o_palette_color_preview {
&:nth-child(4), &:nth-child(5) {
flex: 0 0 0;
}
}
}
@@ -183,7 +196,11 @@ $i: 1;
.o_we_so_color_palette.o_we_user_value_widget {
+ .o_we_so_color_palette {
margin-left: 10px;
margin-left: $o-we-item-spacing * .5;
&:nth-child(4) {
margin-left: $o-we-item-spacing * 3;
}
}
.o_we_color_preview {
width: $o-we-sidebar-content-field-colorpicker-size-large;
@@ -204,6 +221,12 @@ $i: 1;
> div, we-toggler {
height: 100%;
}
we-selection-items {
padding-top: $o-we-dropdown-item-height * .5;
padding-bottom: $o-we-dropdown-item-height * .5;
background: $o-we-dropdown-item-active-bg;
}
}
we-toggler {
align-items: center;
addons/website/views/snippets/snippets.xml
+2 -2
View File
@@ -1276,11 +1276,11 @@
<we-colorpicker data-name="color_1_opt" title="Primary"
data-customize-website-color="" data-color="o-color-1"
data-use-css-color="true" data-selected-tab="custom-colors"/>
<we-colorpicker data-customize-website-color="" data-color="o-color-3"
data-use-css-color="true" data-selected-tab="custom-colors"/>
<we-colorpicker data-name="color_2_opt" title="Secondary"
data-customize-website-color="" data-color="o-color-2"
data-use-css-color="true" data-selected-tab="custom-colors"/>
<we-colorpicker data-customize-website-color="" data-color="o-color-3"
data-use-css-color="true" data-selected-tab="custom-colors"/>
<we-colorpicker data-customize-website-color="" data-color="o-color-4"
data-use-css-color="true" data-selected-tab="custom-colors"/>
<we-colorpicker data-customize-website-color="" data-color="o-color-5"