From ade27dd08dd8a4aebebe04665171c1c39a00b338 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Thu, 28 May 2020 10:04:44 +0000 Subject: [PATCH] [IMP] web_editor: allow color combinations specific override and access Now, the colors used in a color combination are accessible and possible to override through the BS $colors map, with a specific prefix (o-cc for "color combination"). So, to access the 'headings' color of the color combination 3, use: color('o-cc3-headings'); If you don't need to completely override a color combinations preset, you can override what you want through a color palette: $o-color-palettes: ( ( 'text': red, 'o-cc4-btn-primary': 'alpha', // ... ) ); As our current system allows the user to customize colors of the color palette (like for menu, default text, etc), this will allow to easily give them the possibility to override combinations colors in a future update. Part of https://github.com/odoo/odoo/pull/45856 task-2197038 --- .../static/src/scss/secondary_variables.scss | 38 ++++++++++++++++--- .../static/src/scss/web_editor.common.scss | 27 +++++++------ .../static/src/scss/web_editor.variables.scss | 35 ++++++++--------- 3 files changed, 62 insertions(+), 38 deletions(-) diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss index 52030130514..142cf2438d9 100644 --- a/addons/web_editor/static/src/scss/secondary_variables.scss +++ b/addons/web_editor/static/src/scss/secondary_variables.scss @@ -3,8 +3,23 @@ // Colors //------------------------------------------------------------------------------ +// Color combinations +$o-color-combinations: nth($o-color-combinations-presets, $o-color-combinations-preset-number) !default; +$-combination-additions: (); +@for $index from 1 through length($o-color-combinations) { + $combination: map-merge($o-base-color-combination, nth($o-color-combinations, $index)); + + @each $element, $color in $combination { + $-combination-additions: map-merge($-combination-additions, ( + 'o-cc#{$index}-#{$element}': $color, + )); + } +} + // Colors $o-color-palette: nth($o-color-palettes, $o-color-palette-number) !default; +// Original color palette can contain override of the default combinations (so keep 'null' values for this merge) +$o-color-palette: map-merge($-combination-additions, $o-color-palette); $o-color-palette: map-merge($o-base-color-palette, o-map-omit($o-color-palette)); // Theme colors @@ -32,9 +47,6 @@ $o-gray-color-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number) $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)); -// Color combinations -$o-color-combinations: nth($o-color-combinations-presets, $o-color-combinations-preset-number) !default; - $o-color-system-initialized: false; // Returns: @@ -50,9 +62,23 @@ $o-color-system-initialized: false; } @return false; } +@function use-cc-bg($name) { + @if type-of($name) == 'number' { + // Preset number, let's return the background color of the related + // preset. + @return 'o-cc#{$name}-bg'; + } + @return $name; +} // Looks up for the color related to the given name in the related odoo palettes // following redirection a maximum number of time (by default none). -@function o-related-color($name, $max-recursions: 0, $original-name: $name) { +@function o-related-color($name, $max-recursions: 0, $original-name: $name, $use-cc-bg: false) { + @if $use-cc-bg { + $name: use-cc-bg($name); + } @else if type-of($name) == 'number' { + @return $name; + } + @if $max-recursions < 0 or check-color-identifier-type($name) { @return $name; } @@ -71,6 +97,8 @@ $o-color-system-initialized: false; // either in $theme-colors, $grays or $colors maps. If those maps are not // initialized yet, it will look up the color in the related odoo palettes. @function o-color($name) { + $name: use-cc-bg($name); + @if check-color-identifier-type($name) { @return $name; } @@ -91,5 +119,5 @@ $o-color-system-initialized: false; } // If not initialized, search the css color value in selected color palettes - @return o-related-color($name, $max-recursions: 10); + @return o-related-color($name, $max-recursions: 10, $use-cc-bg: true); } diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss index fbaa1557fa0..89fde8cba22 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -542,20 +542,19 @@ blockquote { } } @for $index from 1 through length($o-color-combinations) { - $config: nth($o-color-combinations, $index); - $-bg: map-get($config, 'bg'); - $-text: map-get($config, 'text'); - $-headings: map-get($config, 'headings'); - $-h2: map-get($config, 'h2'); - $-h3: map-get($config, 'h3'); - $-h4: map-get($config, 'h4'); - $-h5: map-get($config, 'h5'); - $-h6: map-get($config, 'h6'); - $-link: map-get($config, 'link'); - $-btn-primary: map-get($config, 'btn-primary'); - $-btn-primary-border: map-get($config, 'btn-primary-border'); - $-btn-secondary: map-get($config, 'btn-secondary'); - $-btn-secondary-border: map-get($config, 'btn-secondary-border'); + $-bg: color('o-cc#{$index}-bg'); + $-text: color('o-cc#{$index}-text'); + $-headings: color('o-cc#{$index}-headings'); + $-h2: color('o-cc#{$index}-h2'); + $-h3: color('o-cc#{$index}-h3'); + $-h4: color('o-cc#{$index}-h4'); + $-h5: color('o-cc#{$index}-h5'); + $-h6: color('o-cc#{$index}-h6'); + $-link: color('o-cc#{$index}-link'); + $-btn-primary: color('o-cc#{$index}-btn-primary'); + $-btn-primary-border: color('o-cc#{$index}-btn-primary-border'); + $-btn-secondary: color('o-cc#{$index}-btn-secondary'); + $-btn-secondary-border: color('o-cc#{$index}-btn-secondary-border'); // Those color classes color multiple elements when applied on a snippet. // Those rules are not important so that they can be overridden through 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 ecfda70dd87..3be0284d254 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -371,46 +371,43 @@ $o-gray-color-palettes: ( $o-gray-color-palette-number: 1 !default; // Color combinations +$o-base-color-combination: ( + 'bg': 'white', + 'text': null, // Default to better contrast with the 'bg' + 'headings': null, // Default to 'text' + 'h2': null, // Default to 'h(x-1)' + 'h3': null, + 'h4': null, + 'h5': null, + 'h6': null, + 'link': null, // Default to BS 'primary' (= first odoo color) + 'btn-primary': null, // Default to BS 'primary' (= first odoo color) + 'btn-primary-border': null, // Default to 'btn-primary' + 'btn-secondary': null, // Default to BS 'secondary' (= second odoo color) + 'btn-secondary-border': null, // Default to 'btn-secondary' +); $o-color-combinations-presets: ( ( ( - 'bg': #FFFFFF, - 'text': null, - 'headings': null, - 'link': null, - 'btn-primary': null, - 'btn-secondary': null, + // See $o-base-color-combination ), ( 'bg': 'gamma', - 'text': null, 'headings': 'alpha', - 'link': null, - 'btn-primary': null, - 'btn-secondary': null, ), ( 'bg': 'beta', - 'text': null, - 'headings': null, - 'link': null, - 'btn-primary': null, 'btn-secondary': 'gamma', ), ( 'bg': 'alpha', - 'text': null, - 'headings': null, 'link': 'epsilon', 'btn-primary': 'epsilon', 'btn-secondary': 'gamma', ), ( 'bg': 'epsilon', - 'text': null, 'headings': 'delta', - 'link': null, - 'btn-primary': null, 'btn-secondary': 'gamma', ), ),