From 7736cde22c3bce06305045a818a2d70892cf25ef Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Thu, 28 May 2020 10:04:46 +0000 Subject: [PATCH] [IMP] web_editor, website, *: use new color names *: mass_mailing, website_blog, website_forum, website_hr_recruitment Deprecate alpha, beta, gamma, delta and espilon color names and now use a new color system: o-color-x, with x from 1 to 5. This will allow to review the colors of all themes to have nice visuals for the new color combinations classes, without breaking the current uses of bg-alpha, alert-delta, etc in current websites of customers (by keeping the old color and classes for compatibility). This will also allow to uniformize all themes under the same conventions to enforce BS color override: - o-color-1 used as primary (as before, for alpha) - o-color-2 used as secondary (as before, for beta) Before, some themes were not following the 2 guidelines. The users using those themes will simply have the possibility to choose o-color-1 and o-color-2 colors accordingly to restore their website without breaking the new system features. Another change is that those colors are defined through color palettes and not theme color palettes. This will avoid them to generate automatic bootstrap classes which we don't want (alert, btn) and generate the one we want by ourself. Note: for mass mailing, the colors and classes also have been renamed but the system stays unchanged. Part of https://github.com/odoo/odoo/pull/45856 task-2197038 --- .../static/src/scss/themes/theme_default.scss | 58 ++++++++--------- addons/mass_mailing/views/snippets_themes.xml | 28 ++++----- .../src/js/wysiwyg/widgets/color_palette.js | 2 +- ...olor_system_support_primary_variables.scss | 1 + .../static/src/scss/secondary_variables.scss | 9 ++- .../static/src/scss/web_editor.backend.scss | 18 ------ .../static/src/scss/web_editor.common.scss | 9 +++ .../static/src/scss/web_editor.variables.scss | 63 ++++++++++++------- .../static/tests/field_html_tests.js | 8 +-- addons/web_editor/static/tests/test_utils.js | 10 +-- addons/web_editor/views/editor.xml | 12 ++-- addons/website/data/website_demo.xml | 37 +---------- .../static/src/js/editor/snippets.options.js | 32 ++++------ .../static/src/scss/secondary_variables.scss | 27 +++++--- addons/website/static/src/scss/website.scss | 5 +- .../static/src/snippets/s_chart/options.js | 2 +- addons/website/static/src/xml/website.seo.xml | 2 +- addons/website/views/snippets/s_badge.xml | 2 +- addons/website/views/snippets/s_banner.xml | 2 +- .../website/views/snippets/s_blockquote.xml | 2 +- addons/website/views/snippets/s_carousel.xml | 6 +- addons/website/views/snippets/s_chart.xml | 4 +- .../views/snippets/s_color_blocks_2.xml | 4 +- .../website/views/snippets/s_comparisons.xml | 2 +- addons/website/views/snippets/s_countdown.xml | 2 +- addons/website/views/snippets/s_cover.xml | 2 +- addons/website/views/snippets/s_features.xml | 6 +- .../views/snippets/s_masonry_block.xml | 4 +- .../website/views/snippets/s_media_list.xml | 4 +- addons/website/views/snippets/s_numbers.xml | 8 +-- addons/website/views/snippets/s_popup.xml | 2 +- .../views/snippets/s_process_steps.xml | 8 +-- .../website/views/snippets/s_product_list.xml | 12 ++-- addons/website/views/snippets/s_showcase.xml | 8 +-- .../views/snippets/s_text_highlight.xml | 2 +- addons/website/views/snippets/s_timeline.xml | 8 +-- addons/website/views/snippets/snippets.xml | 24 +++---- .../views/website_blog_templates.xml | 6 +- addons/website_forum/views/website_forum.xml | 4 +- .../website_hr_recruitment_templates.xml | 2 +- 40 files changed, 217 insertions(+), 230 deletions(-) create mode 100644 addons/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss diff --git a/addons/mass_mailing/static/src/scss/themes/theme_default.scss b/addons/mass_mailing/static/src/scss/themes/theme_default.scss index 784fd39e228..6b68e537299 100644 --- a/addons/mass_mailing/static/src/scss/themes/theme_default.scss +++ b/addons/mass_mailing/static/src/scss/themes/theme_default.scss @@ -3,31 +3,31 @@ // ============================ // ===== Default Theme palette ===== -$o-mm-def-color-alpha: #f5f5f5; -$o-mm-def-color-beta: #ffffff; -$o-mm-def-color-gamma: #706482; -$o-mm-def-color-delta: #464646; -$o-mm-def-color-epsilon: darken($o-mm-def-color-gamma, 5%); -$o-mm-def-color-zeta: #706482; -$o-mm-def-color-eta: #87a6b5; +$o-mm-def-color-1: #f5f5f5; +$o-mm-def-color-2: #ffffff; +$o-mm-def-color-3: #706482; +$o-mm-def-color-4: #464646; +$o-mm-def-color-5: darken($o-mm-def-color-3, 5%); +$o-mm-def-color-6: #706482; +$o-mm-def-color-7: #87a6b5; // ===== Default Theme variables ===== $o-mm-def-body-width : 600px; $o-mm-def-body-bobile : 480px; $o-mm-def-b-radius : 2px; -$o-mm-def-body-bg : $o-mm-def-color-beta; +$o-mm-def-body-bg : $o-mm-def-color-2; $o-mm-def-font : -apple-system, "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; -$o-mm-def-text-color : $o-mm-def-color-delta; +$o-mm-def-text-color : $o-mm-def-color-4; -$o-mm-def-btn-bg : $o-mm-def-color-gamma; -$o-mm-def-btn-text : $o-mm-def-color-beta; +$o-mm-def-btn-bg : $o-mm-def-color-3; +$o-mm-def-btn-text : $o-mm-def-color-2; // ===== Colors ===== -@include bg-variant(".bg-beta", $o-mm-def-color-zeta); -@include text-emphasis-variant(".text-beta", $o-mm-def-color-zeta); -@include bg-variant(".bg-delta", $o-mm-def-color-eta); -@include bg-variant(".bg-gray-lighter", $o-mm-def-color-alpha); +@include bg-variant(".bg-o-color-2", $o-mm-def-color-6); +@include text-emphasis-variant(".text-o-color-2", $o-mm-def-color-6); +@include bg-variant(".bg-o-color-4", $o-mm-def-color-7); +@include bg-variant(".bg-gray-lighter", $o-mm-def-color-1); td:not([align]) { // Default browser style but needed so that alignment works on some mail @@ -41,7 +41,7 @@ td:not([align]) { box-sizing: content-box; width: 94%; min-height: 100%; - background-color: $o-mm-def-color-alpha; + background-color: $o-mm-def-color-1; padding: 0 3%; // Forces on

and elements as several mail clients does not @@ -61,8 +61,8 @@ td:not([align]) { .o_mail_wrapper_td { width: $o-mm-def-body-width; - border: 1px solid darken($o-mm-def-color-alpha, 2%); - background-color: $o-mm-def-color-beta; + border: 1px solid darken($o-mm-def-color-1, 2%); + background-color: $o-mm-def-color-2; } } } @@ -89,7 +89,7 @@ td:not([align]) { } a, .btn.btn-link { - color: $o-mm-def-color-epsilon; + color: $o-mm-def-color-5; font-weight: bold; text-decoration: none !important; @@ -106,20 +106,20 @@ td:not([align]) { .separator { height: 2px; - background-color: $o-mm-def-color-alpha; + background-color: $o-mm-def-color-1; } - .bg-beta { + .bg-o-color-2 { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { - color: $o-mm-def-color-beta; + color: $o-mm-def-color-2; } .btn.btn-primary { - background-color: $o-mm-def-color-eta; + background-color: $o-mm-def-color-7; } a, .btn.btn-link { - color: $o-mm-def-color-eta; + color: $o-mm-def-color-7; } } @@ -153,7 +153,7 @@ td:not([align]) { } .o_mail_block_steps .o_mail_snippet_general{ - background-color: $o-mm-def-color-alpha; + background-color: $o-mm-def-color-1; } .o_mail_block_two_cols, .o_mail_block_three_cols { @@ -184,7 +184,7 @@ td:not([align]) { margin-left: 20px; margin-right: 20px; .o_mail_snippet_general{ - background: darken($o-mm-def-color-alpha, 2%); + background: darken($o-mm-def-color-1, 2%); } } @@ -196,7 +196,7 @@ td:not([align]) { .o_mail_block_comparison_table { .separator { height: 1px; - background-color: darken($o-mm-def-color-alpha, 15%); + background-color: darken($o-mm-def-color-1, 15%); } table table { td, th { @@ -215,7 +215,7 @@ td:not([align]) { .o_mail_block_discount2 { .o_code { padding: 5px 10px; - background: $o-mm-def-color-alpha; + background: $o-mm-def-color-1; border-radius: 3px; font-family: monospace; } @@ -223,7 +223,7 @@ td:not([align]) { .o_mail_block_footer_social { .o_mail_table_styles { - border-top: 2px solid $o-mm-def-color-alpha; + border-top: 2px solid $o-mm-def-color-1; padding-top: 20px; padding-bottom: 20px; } diff --git a/addons/mass_mailing/views/snippets_themes.xml b/addons/mass_mailing/views/snippets_themes.xml index 9da535d7480..3a57e1656cb 100644 --- a/addons/mass_mailing/views/snippets_themes.xml +++ b/addons/mass_mailing/views/snippets_themes.xml @@ -242,7 +242,7 @@ - @@ -298,7 +298,7 @@
+

DEFAULT
- @@ -509,7 +509,7 @@
+

PRO
-
+

With strong technical foundations, Odoo's framework is unique. It provides top notch usability that scales across all apps.
@@ -543,12 +543,12 @@ - - @@ -575,7 +575,7 @@
+

Apps That Help You Grow Your Business
+   My Account   @@ -556,7 +556,7 @@
-
+
 
-

+

$20

OFF YOUR NEXT ORDER!

@@ -616,8 +616,8 @@ @@ -648,13 +648,13 @@
-

20%

-

OFF

+

20%

+

OFF
- -
+

21 Jul

ALL DAY

 + Your Picture @@ -687,7 +687,7 @@
  - +   @@ -702,7 +702,7 @@
  - +   @@ -717,7 +717,7 @@
  - +   diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js index 4f6d677a1cb..6bf55bb787a 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/color_palette.js @@ -101,7 +101,7 @@ const ColorPaletteWidget = Widget.extend({ } // Compute class colors - const compatibilityColorNames = ['primary', 'secondary', 'success', 'info', 'warning', 'danger']; + const compatibilityColorNames = ['primary', 'secondary', 'alpha', 'beta', 'gamma', 'delta', 'epsilon', 'success', 'info', 'warning', 'danger']; this.colorNames = [...compatibilityColorNames]; this.colorToColorNames = {}; this.el.querySelectorAll('button[data-color]').forEach(elem => { diff --git a/addons/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss b/addons/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss new file mode 100644 index 00000000000..4fb5d42c0da --- /dev/null +++ b/addons/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss @@ -0,0 +1 @@ +$o-support-13-0-color-system: true; diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss index 142cf2438d9..6d975a1fecd 100644 --- a/addons/web_editor/static/src/scss/secondary_variables.scss +++ b/addons/web_editor/static/src/scss/secondary_variables.scss @@ -24,13 +24,16 @@ $o-color-palette: map-merge($o-base-color-palette, o-map-omit($o-color-palette)) // Theme colors $o-theme-color-palette: nth($o-theme-color-palettes, $o-theme-color-palette-number) !default; -$-main-color: map-get($o-theme-color-palette, 'alpha'); +@if not $o-support-13-0-color-system { + $o-theme-color-palette: map-remove($o-theme-color-palette, 'alpha', 'beta', 'gamma', 'delta', 'epsilon'); +} +$-main-color: map-get($o-color-palette, 'o-color-1'); $-main-color-lightness: lightness($-main-color); $o-theme-color-palette: map-merge(( - // alpha and beta colors are used to override primary and secondary BS4 + // color 1 and 2 are used to override primary and secondary BS4 // colors by default, so that theme colors affect the default Odoo layouts 'primary': $-main-color, - 'secondary': map-get($o-theme-color-palette, 'beta'), + 'secondary': map-get($o-color-palette, 'o-color-2'), // BS light and dark colors are not used for any BS component, just // for color utilities. By default, we set them to a very light and diff --git a/addons/web_editor/static/src/scss/web_editor.backend.scss b/addons/web_editor/static/src/scss/web_editor.backend.scss index c0355ff6d9c..370baed9db9 100644 --- a/addons/web_editor/static/src/scss/web_editor.backend.scss +++ b/addons/web_editor/static/src/scss/web_editor.backend.scss @@ -42,24 +42,6 @@ } } -// FIX (to improve in next versions) -// --------------------------------- -// The web_editor.colorpicker defines a series of color buttons which toggle the bg-* and text-* classes. -// The problem is that themes can define new buttons whose bg-* and text-* classes only exist in the frontend. -// So these buttons should not be displayed in the backend. Only solution for the current implementation is -// to add this ugly rule (in this backend file) which hides every button and redisplayed the default ones. -.note-editor { - .colorpicker .o_colorpicker_section > button { - display: none; - - &[data-color="alpha"], &[data-color="beta"], &[data-color="gamma"], &[data-color="delta"], &[data-color="epsilon"], - &[data-color="white"], &[data-color="gray-lighter"], &[data-color="gray-light"], &[data-color="gray"], &[data-color="gray-dark"], &[data-color="gray-darker"], &[data-color="black"], - &[data-color="primary"], &[data-color="success"], &[data-color="info"], &[data-color="warning"], &[data-color="danger"] { - display: block; - } - } -} - .o_field_widgetTextHtml_fullscreen { .oe_form_field_html.o_form_fullscreen_ancestor iframe { position: absolute !important; 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 89fde8cba22..0eb6ee9fd1b 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -641,3 +641,12 @@ blockquote { } } } + +// Extend bootstrap to create background and text utilities for some colors +// outside of the $theme-colors too (but not btn-, alert-, etc). +@for $index from 1 through 5 { + $-color-name: 'o-color-#{$index}'; + $-color: color($-color-name); + @include bg-variant(".bg-#{$-color-name}", $-color); + @include text-emphasis-variant(".text-#{$-color-name}", $-color); +} 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 3be0284d254..ab240268f62 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -2,6 +2,8 @@ /// This files regroups the variables and mixins which are specific to the editor. /// +$o-support-13-0-color-system: false !default; + $o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default; $o-we-font-size: 13px; @@ -310,21 +312,37 @@ $o-we-toolbar-height: 32px; // palette once selected to ensure it works. // Colors -$o-base-color-palette: () !default; +$o-base-color-palette: ( + 'o-color-1': transparent, + 'o-color-2': transparent, + 'o-color-3': transparent, + 'o-color-4': transparent, + 'o-color-5': transparent, +) !default; $o-color-palettes: ( - (), + ( + 'o-color-1': $o-enterprise-primary-color, + 'o-color-2': $o-enterprise-color, + 'o-color-3': #F6F6F6, + 'o-color-4': #FFFFFF, + 'o-color-5': #383E45, + ), + ( + 'o-color-1': #337ab7, + 'o-color-2': #e9ecef, + 'o-color-3': #F8F9FA, + 'o-color-4': #FFFFFF, + 'o-color-5': #343a40, + ), ) !default; $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-base-theme-color-palette: () !default; $o-theme-color-palettes: ( + // alpha -> epsilon are old color names kept for compatibility. + // They should not be used in the code base anymore and ideally they will + // not generate any classes for >= 13.4 databases. ( 'alpha': $o-enterprise-primary-color, 'beta': $o-enterprise-color, @@ -332,6 +350,7 @@ $o-theme-color-palettes: ( 'delta': #5B899E, 'epsilon': #E46F78, ), + (), ) !default; $o-theme-color-palette-number: 1 !default; @@ -366,7 +385,7 @@ $o-transparent-grays: ( 'white-85': rgba(white, 0.85), ) !default; $o-gray-color-palettes: ( - (), + (), (), ) !default; $o-gray-color-palette-number: 1 !default; @@ -389,26 +408,26 @@ $o-base-color-combination: ( $o-color-combinations-presets: ( ( ( - // See $o-base-color-combination + 'bg': 'o-color-4', ), ( - 'bg': 'gamma', - 'headings': 'alpha', + 'bg': 'o-color-3', + 'headings': 'o-color-1', ), ( - 'bg': 'beta', - 'btn-secondary': 'gamma', + 'bg': 'o-color-2', + 'btn-secondary': 'o-color-3', ), ( - 'bg': 'alpha', - 'link': 'epsilon', - 'btn-primary': 'epsilon', - 'btn-secondary': 'gamma', + 'bg': 'o-color-1', + 'link': 'o-color-5', + 'btn-primary': 'o-color-5', + 'btn-secondary': 'o-color-3', ), ( - 'bg': 'epsilon', - 'headings': 'delta', - 'btn-secondary': 'gamma', + 'bg': 'o-color-5', + 'headings': 'o-color-4', + 'btn-secondary': 'o-color-3', ), ), ) !default; diff --git a/addons/web_editor/static/tests/field_html_tests.js b/addons/web_editor/static/tests/field_html_tests.js index d1e83c32393..eb62efa8a48 100644 --- a/addons/web_editor/static/tests/field_html_tests.js +++ b/addons/web_editor/static/tests/field_html_tests.js @@ -227,10 +227,10 @@ QUnit.module('web_editor', {}, function () { // text is selected await openColorpicker('.note-toolbar .note-back-color-preview'); - await testUtils.dom.click($field.find('.note-toolbar .note-back-color-preview .o_we_color_btn.bg-gamma')); + await testUtils.dom.click($field.find('.note-toolbar .note-back-color-preview .o_we_color_btn.bg-o-color-3')); assert.strictEqual($field.find('.note-editable').html(), - '

toto toto toto

tata

', + '

toto toto toto

tata

', "should have rendered the field correctly in edit"); form.destroy(); @@ -361,7 +361,7 @@ QUnit.module('web_editor', {}, function () { mockRPC: function (route, args) { if (args.method === "write") { assert.strictEqual(args.args[1].body, - '

toto toto toto

tata

', + '

toto toto toto

tata

', "should save the content"); } @@ -386,7 +386,7 @@ QUnit.module('web_editor', {}, function () { } await openColorpicker('.note-toolbar .note-back-color-preview'); - await testUtils.dom.click($field.find('.note-toolbar .note-back-color-preview .o_we_color_btn.bg-gamma')); + await testUtils.dom.click($field.find('.note-toolbar .note-back-color-preview .o_we_color_btn.bg-o-color-3')); await testUtils.form.clickSave(form); diff --git a/addons/web_editor/static/tests/test_utils.js b/addons/web_editor/static/tests/test_utils.js index b8dd9040fc7..8b28e292438 100644 --- a/addons/web_editor/static/tests/test_utils.js +++ b/addons/web_editor/static/tests/test_utils.js @@ -12,11 +12,11 @@ const COLOR_PICKER_TEMPLATE = `
-