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

[IMP] website, web_editor: provide clarity for theme colors

Browse Source 
Prior to this commit, the color presets generated by the color palette
would always be visible by the user which could lead to confusion.
Most users would click on the presets and edit them instead of editing
the color palette.

This commit groups the presets into a collapsed section under the color
palette to incentivize the user to click on the color bubbles instead.

task-2687469

closes odoo/odoo#79921

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Arthur Detroux (ard)
2021-12-17 16:57:57 +00:00
committed by qsm-odoo
parent fbc7b78036
commit 583f7ceb2d
4 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/js/editor/snippets.options.js
+1
View File
@@ -143,6 +143,7 @@ function _buildCollapseElement(title, options) {
const children = options && options.childNodes || [];
if (titleEl) {
titleEl.remove();
titleEl.classList.add('o_we_collapse_toggler');
children.unshift(titleEl);
}
let i = 0;
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+7 -4
View File
@@ -1624,11 +1624,14 @@ body.editor_enable.editor_has_snippets {
}
}
&.active {
background-color: $o-we-sidebar-content-fold-block-bg;
box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-dark, .5), $o-we-item-standup-bottom rgba($o-we-item-standup-color-light, .2);
we-collapse.active, we-collapse.active .o_we_collapse_toggler {
background-color: $o-we-bg-lighter;
we-collapse.active {
&, we-toggler.o_we_collapse_toggler {
background-color: $o-we-bg-lighter;
}
}
&, we-collapse.active we-collapse.active, we-collapse.active we-collapse.active .o_we_collapse_toggler {
background-color: $o-we-sidebar-content-fold-block-bg;
}
}
.o_we_collapse_toggler {
addons/website/static/src/js/editor/snippets.options.js
+2 -1
View File
@@ -1268,6 +1268,7 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
paletteSelectorEl.appendChild(btnEl);
}
const presetCollapseEl = uiFragment.querySelector('we-collapse.o_we_theme_presets_collapse');
for (let i = 1; i <= 5; i++) {
const collapseEl = document.createElement('we-collapse');
const ccPreviewEl = $(qweb.render('web_editor.color.combination.preview'))[0];
@@ -1277,7 +1278,7 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
for (const el of editionEls) {
collapseEl.appendChild(el);
}
uiFragment.appendChild(collapseEl);
presetCollapseEl.appendChild(collapseEl);
}
await this._super(...arguments);
addons/website/views/snippets/snippets.xml
+2
View File
@@ -1277,6 +1277,8 @@
data-use-css-color="true" data-selected-tab="custom-colors"/>
<we-select data-img="/website/static/src/img/snippets_options/palette.svg" class="o_we_theme_colors_select" data-variable="color-palettes-name"/>
</we-row>
<we-collapse class="o_we_theme_presets_collapse" string="Color Presets">
</we-collapse>
</div>
<div data-js="OptionsTab" data-selector="theme-options" data-no-check="true">
<we-checkbox string="Show Header"