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

[FIX] website: limit palettes number proposed by the ui

Browse Source 
Prior to this commit the entire palettes library (139 entries) was
rendered into the "Theme" tab palettes dropdown.

The final result was overwhelming, especially considering that palettes
were not ordered by color. Moreover, since palettes have been designed
to provide variety within themes, a lot of them appeared very similar
(if not exact clones) when compared in the context of a general library.

This commit keeps palettes' definitions to avoid breaking
pre-existing DBs design, but will propose the user the "configurator"
ones (+ the 2 system ones) only.

Themes can eventually inject a preferred palette in the list in order to
match screenshoot and "pre-configurator" demo content.

This commit also removes the previous prefix-based ordering system, now
obsolete. Indeed several themes use palettes defined by other themes,
invalidating the prefix mechanism.

task-2656337

X-original-commit: 9ff9417d1d5ccb85e0d0751acc8de5faced30236
Part-of: odoo/odoo#77857
This commit is contained in:
stefanorigano (SRI)
2021-10-05 14:17:47 +00:00
committed by qsm-odoo
parent 67bd29fb0f
commit 48b87b4c7f
3 changed files with 42 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/editor/snippets.options.js
+2 -10
View File
@@ -1230,18 +1230,10 @@ options.registry.ThemeColors = options.registry.OptionsTab.extend({
async _renderCustomXML(uiFragment) {
const paletteSelectorEl = uiFragment.querySelector('[data-variable="color-palettes-name"]');
const style = window.getComputedStyle(document.documentElement);
const priorityPrefix = weUtils.getCSSVariableValue('priority-palette-prefix', style).replace(/'/g, "");
const allPaletteNames = weUtils.getCSSVariableValue('palette-names', style).split(' ').map((name) => {
const allPaletteNames = weUtils.getCSSVariableValue('palette-names', style).split(', ').map((name) => {
return name.replace(/'/g, "");
});
const themePaletteNames = allPaletteNames.filter((name) => {
return name.startsWith(priorityPrefix);
});
const otherPaletteNames = allPaletteNames.filter((name) => {
return !name.startsWith(priorityPrefix);
});
const sortedPaletteNames = themePaletteNames.concat(otherPaletteNames);
for (const paletteName of sortedPaletteNames) {
for (const paletteName of allPaletteNames) {
const btnEl = document.createElement('we-button');
btnEl.classList.add('o_palette_color_preview_button');
btnEl.dataset.customizeWebsiteVariable = `'${paletteName}'`;
addons/website/static/src/scss/primary_variables.scss
+28 -2
View File
@@ -1876,8 +1876,34 @@ $o-color-palettes-compatibility-indexes: (
$o-gray-color-palettes-compatibility-indexes: null; // Default to the color one above
$o-theme-color-palettes-compatibility-indexes: null; // Default to the color one above
// Palettes with this prefix will be displayed first in the editor panel
$o-palette-priority-prefix: 'base';
// Create the list of palettes proposed by the UI
$o-selected-color-palettes-names: (
// Proposed by the configurator
'avantgarde-2',
'bistro-6',
'bookstore-4',
'generic-4',
'bookstore-5',
'beauty-3',
'cobalt-1',
'odoo-experts-2',
'artists-4',
'bewise-1',
'generic-16',
'generic-12',
'clean-2',
'generic-8',
'vehicle-1',
'anelusia-4',
'nano-2',
'notes-3',
'graphene-2',
'enark-4',
// System default
'base-1',
'base-2',
);
//------------------------------------------------------------------------------
// Website customizations
addons/website/static/src/scss/website.wysiwyg.scss
+12 -13
View File
@@ -11,8 +11,6 @@
// without duplicating the css.
@include print-variable('o-we-toolbar-height', $o-navbar-height);
@include print-variable('priority-palette-prefix', $o-palette-priority-prefix);
// Need the colors, name, menu background color and footer background color of each color palette
$o-palette-names: ();
$-default-cc: ();
@@ -24,27 +22,28 @@
$-default-cc: map-merge($-default-cc, ($attr: map-get($o-base-color-palette, $attr)))
}
@each $palette-name, $palette in $o-color-palettes {
@if $palette-name != 'user-palette' {
@each $key, $value in $palette {
@include print-variable('o-palette-#{$palette-name}-#{$key}', $value);
@each $-selected-palette-name in $o-selected-color-palettes-names {
$-palette: map-get($o-color-palettes, $-selected-palette-name);
@if $-selected-palette-name != 'user-palette' {
@each $key, $value in $-palette {
@include print-variable('o-palette-#{$-selected-palette-name}-#{$key}', $value);
}
$o-palette-names: append($o-palette-names, $palette-name);
@each $attr-name, $default-cc-idx in $-default-cc {
$-cc-idx: $default-cc-idx;
@if map-has-key($palette, $attr-name) {
$-cc-idx: map-get($palette, $attr-name);
@if map-has-key($-palette, $attr-name) {
$-cc-idx: map-get($-palette, $attr-name);
}
$-bg: $body-bg;
@if $-cc-idx != null {
$-cc: nth($o-color-combinations, $-cc-idx);
$-bg: o-safe-get($palette, 'o-cc#{$-cc-idx}-bg', map-get($-cc, 'bg'));
$-bg: o-safe-get($-palette, 'o-cc#{$-cc-idx}-bg', map-get($-cc, 'bg'));
@if type-of($-bg) != color {
$-bg: map-get($palette, $-bg);
$-bg: map-get($-palette, $-bg);
}
}
@include print-variable('o-palette-#{$palette-name}-#{$attr-name}-bg', $-bg);
@include print-variable('o-palette-#{$-selected-palette-name}-#{$attr-name}-bg', $-bg);
}
}
}
@@ -56,7 +55,7 @@
@include print-variable('o-default-#{$attr-name}-bg', $-default-bg);
}
@include print-variable('palette-names', $o-palette-names);
@include print-variable('palette-names', $o-selected-color-palettes-names);
// Need info about the base grays which are used to compute the final grays
@each $name, $color in $o-base-gray-color-palette {