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

[IMP] website: add menu/footer bg color in configurator palettes

Browse Source 
Menu and footer background colors are retrieved from scss and added
to the palettes. The chosen palette is sent to iap-service for the
theme preview svg generation. From now on iap-service will be able
to use specific menu and footer color for the svg preview generation.

task-2602521

closes odoo/odoo#76774

X-original-commit: 857022c5955f173f5814beb5345ec9e13f089964
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
Sébastien Mottet (oms)
2021-09-20 10:54:11 +00:00
committed by qsm-odoo
parent 6846191e85
commit 84e712e6b8
2 changed files with 62 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/components/configurator/configurator.js
+25 -3
View File
@@ -53,6 +53,10 @@ const PALETTE_NAMES = [
'enark-4',
];
// Attributes for which background color should be retrieved
// from CSS and added in each palette.
const CUSTOM_BG_COLOR_ATTRS = ['menu', 'footer'];
const SESSION_STORAGE_ITEM_NAME = 'websiteConfigurator' + session.website_id;
//---------------------------------------------------------
@@ -498,13 +502,17 @@ const actions = {
if (color1 === color2) {
color2 = ColorpickerWidget.mixCssColors('#FFFFFF', color1, 0.2);
}
state.recommendedPalette = {
const recommendedPalette = {
color1: color1,
color2: color2,
color3: ColorpickerWidget.mixCssColors('#FFFFFF', color2, 0.9),
color4: '#FFFFFF',
color5: ColorpickerWidget.mixCssColors(color1, '#000000', 0.75),
};
CUSTOM_BG_COLOR_ATTRS.forEach((attr) => {
recommendedPalette[attr] = recommendedPalette[state.defaultColors[attr]];
});
state.recommendedPalette = recommendedPalette;
} else {
state.recommendedPalette = undefined;
}
@@ -535,9 +543,11 @@ async function getInitialState() {
name: paletteName
};
for (let j = 1; j <= 5; j += 1) {
const color = weUtils.getCSSVariableValue(`o-palette-${paletteName}-o-color-${j}`, style);
palette[`color${j}`] = color;
palette[`color${j}`] = weUtils.getCSSVariableValue(`o-palette-${paletteName}-o-color-${j}`, style);
}
CUSTOM_BG_COLOR_ATTRS.forEach((attr) => {
palette[attr] = weUtils.getCSSVariableValue(`o-palette-${paletteName}-${attr}-bg`, style);
});
palettes[paletteName] = palette;
});
@@ -565,12 +575,23 @@ async function getInitialState() {
features[feature.id].website_config_preselection = wtp ? wtp.split(',') : [];
});
// Palette color used by default as background color for menu and footer.
// Needed to build the recommended palette.
const defaultColors = {};
CUSTOM_BG_COLOR_ATTRS.forEach((attr) => {
const color = weUtils.getCSSVariableValue(`o-default-${attr}-bg`, style);
const match = color.match(/o-color-(?<idx>[1-5])/);
const colorIdx = parseInt(match.groups['idx']);
defaultColors[attr] = `color${colorIdx}`;
});
return Object.assign(r, {
selectedType: undefined,
selectedPurpose: undefined,
selectedIndustry: undefined,
selectedPalette: undefined,
recommendedPalette: undefined,
defaultColors: defaultColors,
palettes: palettes,
features: features,
themes: [],
@@ -641,6 +662,7 @@ async function makeEnvironment() {
selectedIndustry: store.state.selectedIndustry,
selectedPalette: store.state.selectedPalette,
recommendedPalette: store.state.recommendedPalette,
defaultColors: store.state.defaultColors,
features: store.state.features,
logo: store.state.logo,
logoAttachmentId: store.state.logoAttachmentId,
addons/website/static/src/scss/website.wysiwyg.scss
+37 -4
View File
@@ -13,17 +13,50 @@
@include print-variable('priority-palette-prefix', $o-palette-priority-prefix);
// Need the colors and name of each color palette
$palette-names: ();
// Need the colors, name, menu background color and footer background color of each color palette
$o-palette-names: ();
$-default-cc: ();
$-bg-attrs: 'menu', 'footer';
@each $attr in $-bg-attrs {
// Since the variables built here are currently only used for theme previews we
// decided to keep things simple and we deliberately ignore potential overrides
// from #{$-bg-attrs}-custom and #{$-bg-attrs}-gradient.
$-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);
}
$palette-names: append($palette-names, $palette-name);
$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);
}
$-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'));
@if type-of($-bg) != color {
$-bg: map-get($palette, $-bg);
}
}
@include print-variable('o-palette-#{$palette-name}-#{$attr-name}-bg', $-bg);
}
}
}
@include print-variable('palette-names', $palette-names);
// Need the palette colors used as default menu and footer background color
@each $attr-name, $default-cc-idx in $-default-cc {
$-cc: nth($o-color-combinations, $default-cc-idx);
$-default-bg: map-get($-cc, 'bg');
@include print-variable('o-default-#{$attr-name}-bg', $-default-bg);
}
@include print-variable('palette-names', $o-palette-names);
// Need info about the base grays which are used to compute the final grays
@each $name, $color in $o-base-gray-color-palette {