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

[IMP] web_editor: allow color combinations specific override and access

Browse Source 
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
This commit is contained in:
qsm-odoo
2020-06-02 09:42:19 +00:00
parent d9c4d928f7
commit ade27dd08d
3 changed files with 62 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/scss/secondary_variables.scss
+33 -5
View File
@@ -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);
}
addons/web_editor/static/src/scss/web_editor.common.scss
+13 -14
View File
@@ -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
addons/web_editor/static/src/scss/web_editor.variables.scss
+16 -19
View File
@@ -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',
),
),