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

[FIX] website: theme color palette based on primary or alpha

Browse Source 
Steps to reproduce:
- install website
- install the theme "clean"
- go to website > customize > customize theme
- select the first "extra color" (alpha) and change it

Previous behavior:
All extra color that have not been set previously have changed
automatically without notice

Current behavior:
the theme is either showing primary/secondary colors or only "extra" colors
Good themes are supposed to enforce primary = alpha and secondary = beta
All extra color that have not been set previously change automatically but
an information tooltip shows up when you hover alpha to avoid confusion

opw-2180611

Forward-Port-Of: #46099
closes #49730

closes odoo/odoo#49789

X-original-commit: c9aada53b1e6b24da4e1fe9ac4d44db3ff8cacda
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Signed-off-by: Nicolas Lempereur (nle) <nle@odoo.com>
This commit is contained in:
jerome hanke (jhk)
2020-04-20 12:07:24 +00:00
committed by Nicolas Lempereur
parent 4faf329def
commit fcc07467a2
5 changed files with 23 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/i18n/website.pot
+5
View File
@@ -1445,6 +1445,11 @@ msgid ""
"changes, are you sure you want to proceed?"
msgstr ""
#. module: website
#: model_terms:ir.ui.view,arch_db:website.snippet_options
msgid "Changing this color will regenerate the default theme color scheme"
msgstr ""
#. module: website
#: model_terms:ir.ui.view,arch_db:website.s_chart_options
msgid "Chart"
addons/website/static/src/js/editor/snippets.options.js
+3 -2
View File
@@ -636,8 +636,9 @@ options.registry.Theme = options.Class.extend({
// used as 'primary' and 'secondary' BS values (to customize standard BS
// used in Odoo). However, some themes are still going against that
// system and do not link alpha-primary and beta-secondary at all.
this._alphaEqualsPrimary = (this._getCSSColorFromName('primary') === this._getCSSColorFromName('alpha'));
this._betaEqualsSecondary = (this._getCSSColorFromName('secondary') === this._getCSSColorFromName('beta'));
const style = window.getComputedStyle(document.documentElement);
this._alphaEqualsPrimary = style.getPropertyValue('--is-alpha-primary').trim() == 'true';
this._betaIsSecondary = style.getPropertyValue('--is-beta-secondary').trim() == 'true';
return this._super(...arguments);
},
addons/website/static/src/scss/secondary_variables.scss
+7 -1
View File
@@ -16,7 +16,14 @@ $o-color-palettes: append($o-color-palettes, $-actual-user-color-palette);
// Theme color palette
// -------------------
// Proper themes have to enforce primary = alpha and secondary = beta.
// Exceptions to this rule are made for compatibility reasons
$-palette-default: nth($o-theme-color-palettes, $o-theme-color-palette-number);
// Generate default theme color scheme if alpha is set
$-is-alpha-primary: not map-has-key($-palette-default, 'primary');
$-is-beta-secondary: not map-has-key($-palette-default, 'secondary');
$-alpha: map-get($o-user-theme-color-palette, 'alpha');
@if ($-alpha) {
$o-user-theme-color-palette: map-merge((
@@ -30,7 +37,6 @@ $-alpha: map-get($o-user-theme-color-palette, 'alpha');
// By default, all user theme color palette values are null. Each null value is
// automatically replaced with corresponsing colors in chosen default theme
// color palette.
$-palette-default: nth($o-theme-color-palettes, $o-theme-color-palette-number);
$-actual-user-theme-color-palette: map-merge($-palette-default, o-map-omit($o-user-theme-color-palette));
$o-theme-color-palettes: append($o-theme-color-palettes, $-actual-user-theme-color-palette);
addons/website/static/src/scss/website.scss
+4
View File
@@ -25,6 +25,10 @@ $-font-numbers: (
// customized by themes, the user or anything else (so there is no file to
// parse to get them). Those will be printed here as CSS variables.
// 0) does this theme enforce primary = alpha or secondary = beta
--is-alpha-primary: #{$-is-alpha-primary};
--is-beta-secondary: #{$-is-beta-secondary};
// 1) Handle default values
--header-font-size: #{$font-size-base};
addons/website/views/snippets/snippets.xml
+4 -2
View File
@@ -633,11 +633,13 @@
<we-row string="Main Colors">
<we-colorpicker data-name="primary_color_opt" title="Primary" data-customize-website-color="" data-color-type="theme" data-color="primary"/>
<we-colorpicker data-name="secondary_color_opt" title="Secondary" data-customize-website-color="" data-color-type="theme" data-color="secondary"/>
<we-colorpicker data-name="alpha_as_primary_color_opt" title="Primary" data-customize-website-color="" data-color-type="theme" data-color="alpha"/>
<we-colorpicker data-name="alpha_as_primary_color_opt" data-customize-website-color="" data-color-type="theme" data-color="alpha"
title="Changing this color will regenerate the default theme color scheme"/>
<we-colorpicker data-name="beta_as_secondary_color_opt" title="Secondary" data-customize-website-color="" data-color-type="theme" data-color="beta"/>
</we-row>
<we-row string="Extra Colors">
<we-colorpicker data-name="alpha_as_extra_color_opt" data-customize-website-color="" data-color-type="theme" data-color="alpha"/>
<we-colorpicker data-name="alpha_as_extra_color_opt" data-customize-website-color="" data-color-type="theme" data-color="alpha"
title="Changing this color will regenerate the default theme color scheme"/>
<we-colorpicker data-name="beta_as_extra_color_opt" data-customize-website-color="" data-color-type="theme" data-color="beta"/>
<we-colorpicker data-customize-website-color="" data-color-type="theme" data-color="gamma"/>
<we-colorpicker data-customize-website-color="" data-color-type="theme" data-color="delta"/>