From 84e712e6b8dbaebf4543d0e050380aa594b3389d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A9bastien=20Mottet=20=28oms=29?= Date: Wed, 1 Sep 2021 09:28:16 +0000 Subject: [PATCH] [IMP] website: add menu/footer bg color in configurator palettes 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) --- .../components/configurator/configurator.js | 28 +++++++++++-- .../static/src/scss/website.wysiwyg.scss | 41 +++++++++++++++++-- 2 files changed, 62 insertions(+), 7 deletions(-) diff --git a/addons/website/static/src/components/configurator/configurator.js b/addons/website/static/src/components/configurator/configurator.js index d7a51d80836..4e1f1a76d5f 100644 --- a/addons/website/static/src/components/configurator/configurator.js +++ b/addons/website/static/src/components/configurator/configurator.js @@ -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-(?[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, diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss index e9a24a24770..b05b48a4f59 100644 --- a/addons/website/static/src/scss/website.wysiwyg.scss +++ b/addons/website/static/src/scss/website.wysiwyg.scss @@ -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 {