From 05d17089c4a604cb49f1a263b68f39aeffecccda Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Fri, 6 Mar 2020 14:21:52 +0000 Subject: [PATCH] [FIX] web_editor, website: review default palette system 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) --- .../static/src/scss/secondary_variables.scss | 5 +- .../static/src/scss/web_editor.variables.scss | 34 ++++++++----- .../static/src/scss/primary_variables.scss | 48 +++++++++---------- .../static/src/scss/secondary_variables.scss | 21 ++++++-- 4 files changed, 65 insertions(+), 43 deletions(-) diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss index e4355eeaa2b..fa8f1a39120 100644 --- a/addons/web_editor/static/src/scss/secondary_variables.scss +++ b/addons/web_editor/static/src/scss/secondary_variables.scss @@ -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); } diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index 5abbc9ac284..97951f635cd 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -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; diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss index 367188a8053..e7e6bb7d081 100644 --- a/addons/website/static/src/scss/primary_variables.scss +++ b/addons/website/static/src/scss/primary_variables.scss @@ -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; diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss index e1a8f4462cf..5f3d6704c85 100644 --- a/addons/website/static/src/scss/secondary_variables.scss +++ b/addons/website/static/src/scss/secondary_variables.scss @@ -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); }