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

[FIX] web_editor, website: review default palette system

Browse Source 
Before this commit, this was done:

1) Primary variables (app order):

(a) web_editor: define palettes (color + theme + gray), only 1 empty
                one. Mark the first ones as the selected ones.

(b) website: fill all defined palettes with the website-related
             color key and values (body, menu, logo-height, etc).
             + define "website values" palette.

2) Secondary variables (reverse app order):

(c) website: merge the user palettes on top of the selected palettes
             (so user values overriding values added in (a) and (b)),
             the resulting palettes are added in palettes lists and the
             selected palette numbers are set to select those ones.
             + final selection of "website values" palette.

(d) web_editor: final selection of the selected color palette amongst
                the color palettes.

--

The problem with all of this is that the definition of palettes
in themes (occuring between step (b) and (c)) never received the
website-related color key and values of step (b) and were thus forced
to redefine all of those by themself even if they wanted to use the
default website one.

This commit changes the system so that step (a) and (b) now define
"base" palettes (color, theme, gray, website values) and step (c) and
(d) now merge the final selected palettes with those "base" palettes.
This is in fact theoratically more efficient and allows to not force
themes to define every possible palette value we might introduce.

closes odoo/odoo#47097

Related: odoo/design-themes#216
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
This commit is contained in:
qsm-odoo
2020-03-07 11:09:36 +00:00
parent acdf3cf7f5
commit 05d17089c4
4 changed files with 65 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/scss/secondary_variables.scss
+4 -1
View File
@@ -5,6 +5,7 @@
// Colors
$o-color-palette: nth($o-color-palettes, $o-color-palette-number) !default;
$o-color-palette: map-merge($o-base-color-palette, o-map-omit($o-color-palette));
@function palette-color($key) {
@return map-get($o-color-palette, $key);
}
@@ -25,6 +26,7 @@ $o-theme-color-palette: map-merge((
'light': lighten(desaturate($-main-color, 80%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness
'dark': darken(desaturate($-main-color, 80%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness
), o-map-omit($o-theme-color-palette));
$o-theme-color-palette: map-merge($o-base-theme-color-palette, o-map-omit($o-theme-color-palette));
@function palette-theme-color($key) {
@return map-get($o-theme-color-palette, $key);
}
@@ -33,7 +35,8 @@ $o-theme-color-palette: map-merge((
// Extend grays with transparent ones (for some reason, BS4 create black-50 and
// white-50 but does not allow overridding that with variables).
$o-gray-color-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number) !default;
$o-gray-color-palette: map-merge($o-transparent-grays, $o-gray-color-palette);
$o-gray-color-palette: map-merge($o-transparent-grays, o-map-omit($o-gray-color-palette));
$o-gray-color-palette: map-merge($o-base-gray-color-palette, o-map-omit($o-gray-color-palette));
@function palette-gray($key) {
@return map-get($o-gray-color-palette, $key);
}
addons/web_editor/static/src/scss/web_editor.variables.scss
+23 -11
View File
@@ -281,15 +281,26 @@ $o-we-toolbar-height: 32px;
// Edition colors
// Colors
$o-color-palettes: (
(
// Note: the "base" palettes contain all possible keys a palette should or
// must contain, with a default value which should work in use cases where it
// will be used. Any palette defined by an app will be merged with the base
// palette once selected to ensure it works.
),
// Colors
$o-base-color-palette: () !default;
$o-color-palettes: (
(),
) !default;
$o-color-palette-number: 1;
$o-color-palette-number: 1 !default;
// Theme colors
$o-base-theme-color-palette: (
'alpha': white,
'beta': white,
'gamma': white,
'delta': white,
'epsilon': white,
) !default;
$o-theme-color-palettes: (
(
'alpha': $o-enterprise-primary-color,
@@ -299,9 +310,13 @@ $o-theme-color-palettes: (
'epsilon': #E46F78,
),
) !default;
$o-theme-color-palette-number: 1;
$o-theme-color-palette-number: 1 !default;
// Greyscale transparent colours
$o-base-gray-color-palette: (
'white': #FFFFFF, // Those two will enforce the creation of bg-white
'black': #000000, // and bg-black classes.
) !default;
$o-transparent-grays: (
'black-15': rgba(black, 0.15),
'black-25': rgba(black, 0.25),
@@ -313,12 +328,9 @@ $o-transparent-grays: (
'white-85': rgba(white, 0.85),
) !default;
$o-gray-color-palettes: (
(
'white': #FFFFFF, // Those two will enforce the creation of bg-white
'black': #000000, // and bg-black classes.
),
(),
) !default;
$o-gray-color-palette-number: 1;
$o-gray-color-palette-number: 1 !default;
// Translations
$o-we-content-to-translate-color: rgb(255, 255, 90) !default;
addons/website/static/src/scss/primary_variables.scss
+22 -26
View File
@@ -4,23 +4,18 @@ $o-theme-layout: 'full';
// Colors
//------------------------------------------------------------------------------
// Extend default color palettes with website-related colors
$-palettes: ();
@each $palette in $o-color-palettes {
$-palettes: append($-palettes, map-merge((
'body': $o-portal-default-body-bg,
'menu': #F9F9F9,
'footer': #F9F9F9,
'text': null, // Default to bootstrap
'h1': null, // Default to text
'h2': null, // Default to h1
'h3': null, // Default to h2
'h4': null, // Default to h3
'h5': null, // Default to h4
'h6': null, // Default to h5
), $palette));
}
$o-color-palettes: $-palettes;
$o-base-color-palette: map-merge($o-base-color-palette, (
'body': $o-portal-default-body-bg,
'menu': #F9F9F9,
'footer': #F9F9F9,
'text': null, // Default to bootstrap
'h1': null, // Default to text
'h2': null, // Default to h1
'h3': null, // Default to h2
'h4': null, // Default to h3
'h5': null, // Default to h4
'h6': null, // Default to h5
));
// By default, all user color palette values are null. Each null value is
// automatically replaced with corresponsing color of chosen color palette.
@@ -49,16 +44,17 @@ $o-theme-figcaption-opacity: 0.6;
// Website customizations
//------------------------------------------------------------------------------
$o-base-website-values-palette: (
'logo-height': null, // Default to navbar height (see portal)
'header-font-size': null, // Default to BS (normal font-size)
'font-number': 1,
'headings-font-number': 1,
'navbar-font-number': 1,
'buttons-font-number': 1,
'google-fonts': null,
);
$o-website-values-palettes: (
(
'logo-height': null, // Default to navbar height (see portal)
'header-font-size': null, // Default to BS (normal font-size)
'font-number': 1,
'headings-font-number': 1,
'navbar-font-number': 1,
'buttons-font-number': 1,
'google-fonts': null,
),
(),
) !default;
$o-website-values-palette-number: 1 !default;
addons/website/static/src/scss/secondary_variables.scss
+16 -5
View File
@@ -6,11 +6,12 @@
// Color palette
// -------------
// By default, all user color palette values are null. Each null value is
// By default, most user color palette values are null. Each null value is
// automatically replaced with corresponsing colors in chosen default color
// palette.
$-palette-default: nth($o-color-palettes, $o-color-palette-number);
$o-color-palettes: append($o-color-palettes, map-merge($-palette-default, o-map-omit($o-user-color-palette)));
$-actual-user-color-palette: map-merge($-palette-default, o-map-omit($o-user-color-palette));
$o-color-palettes: append($o-color-palettes, $-actual-user-color-palette);
// Theme color palette
// -------------------
@@ -30,8 +31,10 @@ $-alpha: map-get($o-user-theme-color-palette, 'alpha');
// automatically replaced with corresponsing colors in chosen default theme
// color palette.
$-palette-default: nth($o-theme-color-palettes, $o-theme-color-palette-number);
$o-theme-color-palettes: append($o-theme-color-palettes, map-merge($-palette-default, o-map-omit($o-user-theme-color-palette)));
$-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);
// ---
// Enable last color and theme color palettes, which are now the user customized
// color palettes.
@@ -42,10 +45,18 @@ $o-theme-color-palette-number: length($o-theme-color-palettes);
// Website customizations
//------------------------------------------------------------------------------
// By default, most website palette values are null. Each null value is
// automatically replaced with corresponsing values in chosen default values
// palette.
$-website-values-default: nth($o-website-values-palettes, $o-website-values-palette-number);
$o-website-values: map-merge($-website-values-default, o-map-omit($o-user-website-values)) !default;
$o-website-values-palettes: append($o-website-values-palettes, $o-website-values);
$-actual-user-website-values-palette: map-merge($-website-values-default, o-map-omit($o-user-website-values));
$o-website-values-palettes: append($o-website-values-palettes, $-actual-user-website-values-palette);
// Enable last website values palette, which is now the user customized one
$o-website-values-palette-number: length($o-website-values-palettes);
$o-website-values: nth($o-website-values-palettes, $o-website-values-palette-number) !default;
$o-website-values: map-merge($o-base-website-values-palette, o-map-omit($o-website-values));
@function o-website-value($key) {
@return map-get($o-website-values, $key);
}