diff options
| author | qsm-odoo <qsm@odoo.com> | 2020-05-28 10:04:46 +0000 |
|---|---|---|
| committer | qsm-odoo <qsm@odoo.com> | 2020-06-02 09:42:19 +0000 |
| commit | 7736cde22c3bce06305045a818a2d70892cf25ef (patch) | |
| tree | 2b42b79b891c9d569517b34eade2957fa174679d | |
| parent | ade27dd08dd8a4aebebe04665171c1c39a00b338 (diff) | |
[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
40 files changed, 217 insertions, 230 deletions
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 <p/> and <hx/> 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 @@ <table cellspacing="0" cellpadding="0" class="o_mail_table_styles"> <thead> <tr> - <th class="bg-beta o_mail_v_padding o_mail_col_mv"> + <th class="bg-o-color-2 o_mail_v_padding o_mail_col_mv"> <h2 class="text-center o_mail_no_margin">DEFAULT</h2> </th> </tr> @@ -298,7 +298,7 @@ <table cellspacing="0" cellpadding="0" class="o_mail_table_styles"> <thead> <tr> - <th class="bg-beta o_mail_v_padding o_mail_col_mv"> + <th class="bg-o-color-2 o_mail_v_padding o_mail_col_mv"> <h2 class="text-center o_mail_no_margin">PRO</h2> </th> </tr> @@ -509,7 +509,7 @@ <tr> <td width="100%" align="center" style="text-align:center" class="o_mail_h_padding"> <table> - <td class="bg-beta o_mail_v_padding"> + <td class="bg-o-color-2 o_mail_v_padding"> <p class="text-center">With strong technical foundations, Odoo's framework is unique. It provides <strong>top notch usability that scales across all apps</strong>.</p> </td> </table> @@ -543,12 +543,12 @@ <table class="o_mail_table_styles o_mail_full_width_padding" align="center" cellpadding="0" cellspacing="0"> <tbody> <tr> - <td class="text-center o_mail_h_padding o_mail_v_padding bg-beta"> + <td class="text-center o_mail_h_padding o_mail_v_padding bg-o-color-2"> <h3 style="margin:10px 0;">Apps That Help You Grow Your Business</h3> </td> </tr> <tr> - <td class="text-center o_mail_h_padding o_mail_v_padding bg-beta" style="padding:10px;"> + <td class="text-center o_mail_h_padding o_mail_v_padding bg-o-color-2" style="padding:10px;"> &nbsp; <a role="button" href="#" class="btn btn-primary">My Account</a> &nbsp; @@ -556,7 +556,7 @@ </tr> <tr> <td> - <div class="bg-beta"> + <div class="bg-o-color-2"> &nbsp; </div> </td> @@ -575,7 +575,7 @@ <tr> <td class="o_mail_v_padding"> <div class="text-center d-block mx-auto"> - <p class="o_mail_display_coupon o_mail_no_margin text-center text-beta" style="font-weight:800;"> + <p class="o_mail_display_coupon o_mail_no_margin text-center text-o-color-2" style="font-weight:800;"> $20 </p> <h3 class="o_mail_no_margin">OFF YOUR NEXT ORDER!</h3> @@ -616,8 +616,8 @@ <table class="o_mail_table_styles"> <tr> <td> - <p class="o_mail_display_coupon text-beta text-center o_mail_no_margin" style="font-weight:800;">20%</p> - <h4 class="text-beta text-center mt0 mb16" style="font-weight:800;">OFF</h4> + <p class="o_mail_display_coupon text-o-color-2 text-center o_mail_no_margin" style="font-weight:800;">20%</p> + <h4 class="text-o-color-2 text-center mt0 mb16" style="font-weight:800;">OFF</h4> </td> </tr> <tr> @@ -648,13 +648,13 @@ <div class="o_mail_snippet_general"> <table align="center" cellpadding="0" cellspacing="0" class="o_mail_table_styles"> <tr> - <td style="width:25%;min-height: 150px;vertical-align:middle;" class="bg-beta text-center o_mail_col_mv"> + <td style="width:25%;min-height: 150px;vertical-align:middle;" class="bg-o-color-2 text-center o_mail_col_mv"> <div class="o_mail_h_padding o_mail_v_padding"> <h3 class="o_mail_no_margin">21 Jul</h3> <p class="o_mail_no_margin">ALL DAY</p> </div> </td> - <td style="width:25%;min-height: 150px;" class="text-center bg-delta o_mail_col_mv"> + <td style="width:25%;min-height: 150px;" class="text-center bg-o-color-4 o_mail_col_mv"> <img src="/mass_mailing/static/src/img/theme_basic/s_default_image_block_event.jpg" class="d-block mx-auto" alt="Your Picture" /> </td> <td class="o_mail_h_padding o_mail_v_padding o_mail_col_mv" style="min-height: 150px;"> @@ -687,7 +687,7 @@ <tr> <td rowspan="2" class="text-right"> &nbsp; - <span class="fa fa-compass fa-2x text-delta" role="img" aria-label="Choose" title="Choose"></span> + <span class="fa fa-compass fa-2x text-o-color-4" role="img" aria-label="Choose" title="Choose"></span> &nbsp; </td> <td style="padding-left:10px;"> @@ -702,7 +702,7 @@ <tr> <td rowspan="2" class="text-right"> &nbsp; - <span class="fa fa-credit-card fa-2x text-delta" role="img" aria-label="Order" title="Order"></span> + <span class="fa fa-credit-card fa-2x text-o-color-4" role="img" aria-label="Order" title="Order"></span> &nbsp; </td> <td style="padding-left:10px;"> @@ -717,7 +717,7 @@ <tr> <td rowspan="2" class="text-right"> &nbsp; - <span class="fa fa-smile-o fa-2x text-delta" role="img" aria-label="Enjoy" title="Enjoy"></span> + <span class="fa fa-smile-o fa-2x text-o-color-4" role="img" aria-label="Enjoy" title="Enjoy"></span> &nbsp; </td> <td style="padding-left:10px;"> 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(), - '<p>t<font style="background-color: rgb(0, 255, 255);">oto t</font><font style="" class="bg-gamma">oto </font><font class="bg-gamma" style="">to</font>to</p><p>tata</p>', + '<p>t<font style="background-color: rgb(0, 255, 255);">oto t</font><font style="" class="bg-o-color-3">oto </font><font class="bg-o-color-3" style="">to</font>to</p><p>tata</p>', "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, - '<p>t<font class="bg-gamma">oto toto </font>toto</p><p>tata</p>', + '<p>t<font class="bg-o-color-3">oto toto </font>toto</p><p>tata</p>', "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 = ` <t t-name="web_editor.colorpicker"> <colorpicker> <div class="o_colorpicker_section" data-name="theme" data-display="Theme Colors" data-icon-class="fa fa-flask"> - <button data-color="alpha"/> - <button data-color="beta"/> - <button data-color="gamma"/> - <button data-color="delta"/> - <button data-color="epsilon"/> + <button data-color="o-color-1"/> + <button data-color="o-color-2"/> + <button data-color="o-color-3"/> + <button data-color="o-color-4"/> + <button data-color="o-color-5"/> </div> <div class="o_colorpicker_section" data-name="transparent_grayscale" data-display="Transparent Colors" data-icon-class="fa fa-eye-slash"> <button class="o_btn_transparent"/> diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml index 2ebd3ff40b5..2769509a927 100644 --- a/addons/web_editor/views/editor.xml +++ b/addons/web_editor/views/editor.xml @@ -120,6 +120,12 @@ </xpath> </template> +<template id="_assets_13_0_color_system_support_primary_variables" inherit_id="web_editor._assets_primary_variables" active="False"> + <xpath expr="//link[last()]" position="after"> + <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss"/> + </xpath> +</template> + <template id="_assets_secondary_variables" inherit_id="web._assets_secondary_variables"> <xpath expr="//link" position="before"> <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/secondary_variables.scss"/> @@ -212,11 +218,7 @@ <template id="web_editor.colorpicker" name="Color-Picker" groups="base.group_user"> <colorpicker> <div class="o_colorpicker_section" data-name="theme"> - <button data-color="alpha"></button> - <button data-color="beta"></button> - <button data-color="gamma"></button> - <button data-color="delta"></button> - <button data-color="epsilon"></button> + <button t-foreach="5" t-as="i" t-attf-data-color="o-color-#{i + 1}"></button> </div> <div class="o_colorpicker_section" data-name="common"> <button data-color="black"></button> diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml index 8efebf26764..47a5ef073d0 100644 --- a/addons/website/data/website_demo.xml +++ b/addons/website/data/website_demo.xml @@ -8,10 +8,9 @@ <field name="arch" type="xml"> <t name="Debug" t-name="website.bs_debug_page_view"> <t t-call="website.layout"> - <t t-set="odoo_theme_colors" t-value="[['alpha', 'Alpha'], ['beta', 'Beta'], ['gamma', 'Gamma'], ['delta', 'Delta'], ['epsilon', 'Epsilon']]"/> + <t t-set="odoo_theme_colors" t-value="[['o-color-1', 'Color 1'], ['o-color-2', 'Color 2'], ['o-color-3', 'Color 3'], ['o-color-4', 'Color 4'], ['o-color-5', 'Color 5']]"/> <t t-set="bs_theme_colors" t-value="[['primary', 'Primary'], ['secondary', 'Secondary'], ['success', 'Success'], ['info', 'Info'], ['warning', 'Warning'], ['danger', 'Danger'], ['light', 'Light'], ['dark', 'Dark']]"/> <t t-set="bs_gray_colors" t-value="[['white', 'White'], ['100', '100'], ['200', '200'], ['300', '300'], ['400', '400'], ['500', '500'], ['600', '600'], ['700', '700'], ['800', '800'], ['900', '900'], ['black', 'Black']]"/> - <t t-set="all_theme_colors" t-value="odoo_theme_colors + bs_theme_colors"/> <div id="wrap" class="oe_structure"> <section class="py-2"> <div class="container"> @@ -19,69 +18,37 @@ <div class="row"> <div class="col-md"> <h2>Badge</h2> - <t t-foreach="odoo_theme_colors" t-as="color"> - <span t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></span> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <span t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></span> </t> <h3 class="mt-2 h6">Pill</h3> - <t t-foreach="odoo_theme_colors" t-as="color"> - <span t-attf-class="badge mb-1 badge-pill badge-#{color[0]}"><t t-esc="color[1]"/></span> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <span t-attf-class="badge mb-1 badge-pill badge-#{color[0]}"><t t-esc="color[1]"/></span> </t> <h3 class="mt-2 h6">Link</h3> - <t t-foreach="odoo_theme_colors" t-as="color"> - <a href="#" t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></a> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <a href="#" t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></a> </t> <h3 class="mt-2 h6">Autosizing</h3> <div class="h3"> - <t t-foreach="odoo_theme_colors" t-as="color"> - <span t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></span> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <span t-attf-class="badge mb-1 badge-#{color[0]}"><t t-esc="color[1]"/></span> </t> </div> <h2 class="mt-4">Button</h2> - <t t-foreach="odoo_theme_colors" t-as="color"> - <button type="button" t-attf-class="btn mb-1 btn-#{color[0]}"><t t-esc="color[1]"/></button> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <button type="button" t-attf-class="btn mb-1 btn-#{color[0]}"><t t-esc="color[1]"/></button> </t> <h3 class="mt-2 h6">Outline</h3> - <t t-foreach="odoo_theme_colors" t-as="color"> - <button type="button" t-attf-class="btn mb-1 btn-outline-#{color[0]}"><t t-esc="color[1]"/></button> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <button type="button" t-attf-class="btn mb-1 btn-outline-#{color[0]}"><t t-esc="color[1]"/></button> </t> <h3 class="mt-2 h6">Small</h3> - <t t-foreach="odoo_theme_colors" t-as="color"> - <button type="button" t-attf-class="btn mb-1 btn-sm btn-#{color[0]}"><t t-esc="color[1]"/></button> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <button type="button" t-attf-class="btn mb-1 btn-sm btn-#{color[0]}"><t t-esc="color[1]"/></button> </t> <h3 class="mt-2 h6">Large</h3> - <t t-foreach="odoo_theme_colors" t-as="color"> - <button type="button" t-attf-class="btn mb-1 btn-lg btn-#{color[0]}"><t t-esc="color[1]"/></button> - </t> - <br/> <t t-foreach="bs_theme_colors" t-as="color"> <button type="button" t-attf-class="btn mb-1 btn-lg btn-#{color[0]}"><t t-esc="color[1]"/></button> </t> @@ -156,7 +123,7 @@ </div> <div class="col-md-auto"> <h2>Alert</h2> - <t t-foreach="all_theme_colors" t-as="color"> + <t t-foreach="bs_theme_colors" t-as="color"> <div t-attf-class="alert alert-#{color[0]}"> This is a "<t t-esc="color[1]"/>" alert with a <a href="#" class="alert-link">link</a>. </div> diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 5bde2b6d1c8..b1e98e1b874 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -618,16 +618,22 @@ options.registry.Theme = options.Class.extend({ * @override */ start: async function () { - // The normal configuration of Odoo is to have two colors named 'alpha' - // and 'beta' which generate their own BS CSS classes but which are also - // used as 'primary' and 'secondary' BS values (to customize standard BS - // used in Odoo). However, some themes are still going against that - // system and do not link alpha-primary and beta-secondary at all. + // Checks for support of the old color system const style = window.getComputedStyle(document.documentElement); - this._alphaEqualsPrimary = style.getPropertyValue('--is-alpha-primary').trim() == 'true'; - this._betaEqualsSecondary = style.getPropertyValue('--is-beta-secondary').trim() == 'true'; + const supportOldColorSystem = style.getPropertyValue('--support-13-0-color-system').trim() === 'true'; + const hasCustomizedOldColorSystem = style.getPropertyValue('--has-customized-13-0-color-system').trim() === 'true'; + this._showOldColorSystemWarning = supportOldColorSystem && hasCustomizedOldColorSystem; + return this._super(...arguments); }, + /** + * @override + */ + updateUIVisibility: async function () { + await this._super(...arguments); + const oldColorSystemEl = this.el.querySelector('.o_old_color_system_warning'); + oldColorSystemEl.classList.toggle('d-none', !this._showOldColorSystemWarning); + }, //-------------------------------------------------------------------------- // Options @@ -776,18 +782,6 @@ options.registry.Theme = options.Class.extend({ if (widgetName === 'theme_color_suggestions') { return false; } - if (widgetName === 'primary_color_opt' || widgetName === 'alpha_as_extra_color_opt') { - return !this._alphaEqualsPrimary; - } - if (widgetName === 'secondary_color_opt' || widgetName === 'beta_as_extra_color_opt') { - return !this._betaEqualsSecondary; - } - if (widgetName === 'alpha_as_primary_color_opt') { - return this._alphaEqualsPrimary; - } - if (widgetName === 'beta_as_secondary_color_opt') { - return this._betaEqualsSecondary; - } return this._super(...arguments); }, /** diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss index a6292647ba6..37851eb576e 100644 --- a/addons/website/static/src/scss/secondary_variables.scss +++ b/addons/website/static/src/scss/secondary_variables.scss @@ -44,6 +44,15 @@ $o-website-values: map-merge($o-base-website-values-palette, o-map-omit($o-websi // Colors //------------------------------------------------------------------------------ +$o-has-customized-13-0-color-system: + not not (map-get($o-user-theme-color-palette, 'primary') + or map-get($o-user-theme-color-palette, 'secondary') + or map-get($o-user-theme-color-palette, 'alpha') + or map-get($o-user-theme-color-palette, 'beta') + or map-get($o-user-theme-color-palette, 'gamma') + or map-get($o-user-theme-color-palette, 'delta') + or map-get($o-user-theme-color-palette, 'epsilon')); + // Color palette // ------------- @@ -57,14 +66,8 @@ $o-color-palettes: append($o-color-palettes, $-actual-user-color-palette); // Theme color palette // ------------------- -// Proper themes have to enforce primary = alpha and secondary = beta. -// Exceptions to this rule are made for compatibility reasons -$-palette-default: nth($o-theme-color-palettes, $o-theme-color-palette-number); - -// Generate default theme color scheme if alpha is set -$-is-alpha-primary: not map-has-key($-palette-default, 'primary'); -$-is-beta-secondary: not map-has-key($-palette-default, 'secondary'); - +// alpha -> epsilon colors are from the old color system, this is kept for +// compatibility: Generate default theme color scheme if alpha is set $-alpha: map-get($o-user-theme-color-palette, 'alpha'); @if ($-alpha) { $o-user-theme-color-palette: map-merge(( @@ -78,7 +81,15 @@ $-alpha: map-get($o-user-theme-color-palette, 'alpha'); // By default, all user theme color palette values are null. Each null value is // automatically replaced with corresponsing colors in chosen default theme // color palette. +$-palette-default: nth($o-theme-color-palettes, $o-theme-color-palette-number); $-actual-user-theme-color-palette: map-merge($-palette-default, o-map-omit($o-user-theme-color-palette)); +// Always remove the primary/secondary which were customizable in some theme +// in Odoo <= 13.3. The customer can always rechoose the right color in the +// Odoo color system as the first two ones are mapped to primary/secondary. +$-actual-user-theme-color-palette: map-remove($-actual-user-theme-color-palette, + 'primary', + 'secondary' +); $o-theme-color-palettes: append($o-theme-color-palettes, $-actual-user-theme-color-palette); // --- diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index 78334459a4d..bf2e0b01353 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -25,9 +25,8 @@ $-font-numbers: ( // customized by themes, the user or anything else (so there is no file to // parse to get them). Those will be printed here as CSS variables. - // 0) does this theme enforce primary = alpha or secondary = beta - --is-alpha-primary: #{$-is-alpha-primary}; - --is-beta-secondary: #{$-is-beta-secondary}; + --support-13-0-color-system: #{$o-support-13-0-color-system}; + --has-customized-13-0-color-system: #{$o-has-customized-13-0-color-system}; // 1) Handle default values --header-font-size: #{$font-size-base}; diff --git a/addons/website/static/src/snippets/s_chart/options.js b/addons/website/static/src/snippets/s_chart/options.js index 021a326be3c..7819d0eac1d 100644 --- a/addons/website/static/src/snippets/s_chart/options.js +++ b/addons/website/static/src/snippets/s_chart/options.js @@ -25,7 +25,7 @@ options.registry.InnerChart = options.Class.extend({ */ init: function () { this._super.apply(this, arguments); - this.themeArray = ['alpha', 'beta', 'gamma', 'delta', 'epsilon']; + this.themeArray = ['o-color-1', 'o-color-2', 'o-color-3', 'o-color-4', 'o-color-5']; this.style = window.getComputedStyle(document.documentElement); }, /** diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml index aecbd6da8d9..e1d4aeafafc 100644 --- a/addons/website/static/src/xml/website.seo.xml +++ b/addons/website/static/src/xml/website.seo.xml @@ -143,7 +143,7 @@ <div class="card-header">Social Preview</div> <img class="card-img-top o_meta_active_img" t-att-src="widget.activeMetaImg"/> <div class="card-body px-3 py-2"> - <h6 class="text-alpha card-title mb0"><t t-esc="widget.metaTitle"/></h6> + <h6 class="text-primary card-title mb0"><t t-esc="widget.metaTitle"/></h6> <small class="card-subtitle text-muted"><t t-esc="widget.serverUrl"/></small> <p t-esc="widget.metaDescription"/> </div> diff --git a/addons/website/views/snippets/s_badge.xml b/addons/website/views/snippets/s_badge.xml index 01e638b78f9..fc63291d44b 100644 --- a/addons/website/views/snippets/s_badge.xml +++ b/addons/website/views/snippets/s_badge.xml @@ -2,7 +2,7 @@ <odoo> <template name="Badge" id="s_badge"> - <span class="s_badge badge bg-gamma o_animable" data-name="Badge"> + <span class="s_badge badge bg-secondary o_animable" data-name="Badge"> <i class="fa fa-1x fa-fw fa-folder o_not-animable"/>Category </span> </template> diff --git a/addons/website/views/snippets/s_banner.xml b/addons/website/views/snippets/s_banner.xml index 66602d9943a..4aab0d34606 100644 --- a/addons/website/views/snippets/s_banner.xml +++ b/addons/website/views/snippets/s_banner.xml @@ -10,7 +10,7 @@ <h1><font style="font-size: 62px;">Sell Online. Easily.</font></h1> <p class="lead">This is a simple hero unit, a simple jumbotron-style component <br/>for calling extra attention to featured content or information.</p> <p class="lead"><br/></p> - <a href="#" class="btn btn-alpha">Do something</a> + <a href="#" class="btn btn-primary">Do something</a> </div> </div> </div> diff --git a/addons/website/views/snippets/s_blockquote.xml b/addons/website/views/snippets/s_blockquote.xml index 75e7808a340..e8252c4965b 100644 --- a/addons/website/views/snippets/s_blockquote.xml +++ b/addons/website/views/snippets/s_blockquote.xml @@ -3,7 +3,7 @@ <template name="Blockquote" id="s_blockquote"> <blockquote class="s_blockquote s_blockquote_classic blockquote o_animable" style="background-color: rgba(239,239,239);"> - <i class="fa fa-quote-left fa-1x bg-beta rounded-0 s_blockquote_icon"/> + <i class="fa fa-quote-left fa-1x bg-secondary rounded-0 s_blockquote_icon"/> <div class="s_blockquote_content"> <p>Write a quote here from one of your customers. Quotes are a great way to build confidence in your products or services.</p> <footer class="blockquote-footer text-muted"> diff --git a/addons/website/views/snippets/s_carousel.xml b/addons/website/views/snippets/s_carousel.xml index 8564998a4b9..0ae9198733b 100644 --- a/addons/website/views/snippets/s_carousel.xml +++ b/addons/website/views/snippets/s_carousel.xml @@ -20,7 +20,7 @@ <h2><font style="font-size: 62px;">Slide Title</font></h2> <p class="lead">Use this snippet to presents your content in a slideshow-like format.<br/> Don't write about products or services here, write about solutions.</p> <p> - <a href="/contactus" class="btn btn-beta">Contact us</a> + <a href="/contactus" class="btn btn-primary">Contact us</a> </p> </div> </div> @@ -33,10 +33,10 @@ <div class="carousel-content col-lg-8 offset-lg-2 bg-black-50 text-center pt48 pb40"> <h2 style="font-size: 62px;">Clever Slogan</h2> <div class="s_hr pt8 pb32" data-snippet="s_hr"> - <hr class="s_hr_5px s_hr_dotted border-600 w-25 border-epsilon mx-auto text-center"/> + <hr class="s_hr_5px s_hr_dotted border-600 w-25 border-o-color-5 mx-auto text-center"/> </div> <p class="lead">Storytelling is powerful.<br/> It draws readers in and engages them.</p> - <p><a href="/" class="btn btn-alpha">Start your journey</a></p> + <p><a href="/" class="btn btn-primary">Start your journey</a></p> </div> </div> </div> diff --git a/addons/website/views/snippets/s_chart.xml b/addons/website/views/snippets/s_chart.xml index cca0473204c..f8cbed914b6 100644 --- a/addons/website/views/snippets/s_chart.xml +++ b/addons/website/views/snippets/s_chart.xml @@ -9,8 +9,8 @@ { "label":"One", "data":["12","24","18","17","10"], - "backgroundColor":"alpha", - "borderColor":"alpha" + "backgroundColor":"o-color-1", + "borderColor":"o-color-1" } ] }"> diff --git a/addons/website/views/snippets/s_color_blocks_2.xml b/addons/website/views/snippets/s_color_blocks_2.xml index 13bed209ef9..fbc39fcae2e 100644 --- a/addons/website/views/snippets/s_color_blocks_2.xml +++ b/addons/website/views/snippets/s_color_blocks_2.xml @@ -5,13 +5,13 @@ <section class="s_color_blocks_2"> <div class="container-fluid"> <div class="row"> - <div class="col-lg-6 bg-beta text-center"> + <div class="col-lg-6 bg-secondary text-center"> <i class="fa fa-shield fa-5x m-3"/> <h2>A color block</h2> <p>Color blocks are a simple and effective way to <b>present and highlight your content</b>. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.</p> <a href="#" class="btn btn-primary">More Details</a> </div> - <div class="col-lg-6 bg-delta text-center"> + <div class="col-lg-6 bg-o-color-4 text-center"> <i class="fa fa-cube fa-5x m-3"/> <h2>An other color block</h2> <p>Color blocks are a simple and effective way to <b>present and highlight your content</b>. Choose an image or a color for the background. You can even resize and duplicate the blocks to create your own layout. Add images or icons to customize the blocks.</p> diff --git a/addons/website/views/snippets/s_comparisons.xml b/addons/website/views/snippets/s_comparisons.xml index 28cb6a0b070..693d29bf20b 100644 --- a/addons/website/views/snippets/s_comparisons.xml +++ b/addons/website/views/snippets/s_comparisons.xml @@ -29,7 +29,7 @@ </div> </div> <div class="col-lg-4 s_col_no_bgcolor text-center pt32 pb16" data-name="Box"> - <div class="card bg-gamma"> + <div class="card bg-primary"> <h4 class="card-header">Professional</h4> <div class="card-body"> <h2 class="card-title"> diff --git a/addons/website/views/snippets/s_countdown.xml b/addons/website/views/snippets/s_countdown.xml index 2e077469b31..95a1f1e3a69 100644 --- a/addons/website/views/snippets/s_countdown.xml +++ b/addons/website/views/snippets/s_countdown.xml @@ -7,7 +7,7 @@ t-att-data-end-time="datetime.datetime.now().timestamp() + 228307" data-layout="circle" data-layout-background="none" data-progress-bar-style="surrounded" data-progress-bar-weight="thin" - data-text-color="alpha" data-layout-background-color="400" data-progress-bar-color="alpha"> + data-text-color="o-color-1" data-layout-background-color="400" data-progress-bar-color="o-color-1"> <div class="container"> <div class="s_countdown_canvas_wrapper text-center"/> </div> diff --git a/addons/website/views/snippets/s_cover.xml b/addons/website/views/snippets/s_cover.xml index 24226f734e3..6b17f4875cb 100644 --- a/addons/website/views/snippets/s_cover.xml +++ b/addons/website/views/snippets/s_cover.xml @@ -8,7 +8,7 @@ <h1 style="text-align: center;"><font style="font-size: 62px; font-weight: bold;">Catchy Headline</font></h1> <p class="lead" style="text-align: center;">Write one or two paragraphs describing your product, services or a specific feature.<br/> To be successful your content needs to be useful to your readers.</p> <p style="text-align: center;"> - <a href="/contactus" class="btn btn-beta">Contact us</a> + <a href="/contactus" class="btn btn-primary">Contact us</a> </p> </div> </section> diff --git a/addons/website/views/snippets/s_features.xml b/addons/website/views/snippets/s_features.xml index b8ec968934a..5979aea9afe 100644 --- a/addons/website/views/snippets/s_features.xml +++ b/addons/website/views/snippets/s_features.xml @@ -6,17 +6,17 @@ <div class="container"> <div class="row"> <div class="col-lg-4 pt32 pb32 text-center"> - <i class="fa fa-3x fa-gear rounded bg-beta m-3"/> + <i class="fa fa-3x fa-gear rounded bg-secondary m-3"/> <h3>First Feature</h3> <p>Tell what's the value for the <br/>customer for this feature.</p> </div> <div class="col-lg-4 pt32 pb32 text-center"> - <i class="fa fa-3x fa-photo rounded bg-gamma m-3"/> + <i class="fa fa-3x fa-photo rounded bg-o-color-3 m-3"/> <h3>Second Feature</h3> <p>Write what the customer would like to know, <br/>not what you want to show.</p> </div> <div class="col-lg-4 pt32 pb32 text-center"> - <i class="fa fa-3x fa-leaf rounded bg-delta m-3"/> + <i class="fa fa-3x fa-leaf rounded bg-o-color-4 m-3"/> <h3>Third Feature</h3> <p>A small explanation of this great <br/>feature, in clear words.</p> </div> diff --git a/addons/website/views/snippets/s_masonry_block.xml b/addons/website/views/snippets/s_masonry_block.xml index 45446abc53c..9a0099ba9bf 100644 --- a/addons/website/views/snippets/s_masonry_block.xml +++ b/addons/website/views/snippets/s_masonry_block.xml @@ -12,7 +12,7 @@ </div> <div class="col-lg-6"> <div class="row h-100"> - <div class="col-lg-6 text-center bg-alpha" data-name="Block"> + <div class="col-lg-6 text-center bg-primary" data-name="Block"> <h3>A great title</h3> <p>And a great subtitle</p> </div> @@ -24,7 +24,7 @@ <h3>A great title</h3> <p>And a great subtitle</p> </div> - <div class="col-lg-6 text-center bg-beta" data-name="Block"> + <div class="col-lg-6 text-center bg-secondary" data-name="Block"> <h3>A great title</h3> <p>And a great subtitle</p> </div> diff --git a/addons/website/views/snippets/s_media_list.xml b/addons/website/views/snippets/s_media_list.xml index d75431b304f..86f62f58f51 100644 --- a/addons/website/views/snippets/s_media_list.xml +++ b/addons/website/views/snippets/s_media_list.xml @@ -30,10 +30,10 @@ </div> <div class="col-lg-8 s_media_list_body"> <h3>Post heading</h3> - <span class="s_badge badge bg-gamma" data-name="Badge" data-snippet="s_badge"> + <span class="s_badge badge bg-o-color-3" data-name="Badge" data-snippet="s_badge"> <i class="fa fa-1x fa-fw fa-clock-o"/>3 months ago </span> - <span class="s_badge badge bg-gamma" data-name="Badge" data-snippet="s_badge"> + <span class="s_badge badge bg-o-color-3" data-name="Badge" data-snippet="s_badge"> <i class="fa fa-1x fa-fw fa-user"/>by John DOE </span> <p>Use this component for creating a list of featured elements to which you want to bring attention.</p> diff --git a/addons/website/views/snippets/s_numbers.xml b/addons/website/views/snippets/s_numbers.xml index 9b115e200d9..ce434e53dd2 100644 --- a/addons/website/views/snippets/s_numbers.xml +++ b/addons/website/views/snippets/s_numbers.xml @@ -6,19 +6,19 @@ <div class="container"> <div class="row"> <div class="col-lg-3 text-center pt24 pb24"> - <span class="s_number display-4 text-beta">12</span> + <span class="s_number display-4 text-secondary">12</span> <h6>Useful options</h6> </div> <div class="col-lg-3 text-center pt24 pb24"> - <span class="s_number display-4 text-beta">45</span> + <span class="s_number display-4 text-secondary">45</span> <h6>Beautiful snippets</h6> </div> <div class="col-lg-3 text-center pt24 pb24"> - <span class="s_number display-4 text-beta">8</span> + <span class="s_number display-4 text-secondary">8</span> <h6>Amazing pages</h6> </div> <div class="col-lg-3 text-center pt24 pb24"> - <span class="s_number display-4 text-beta">37</span> + <span class="s_number display-4 text-secondary">37</span> <h6>Outstanding images</h6> </div> </div> diff --git a/addons/website/views/snippets/s_popup.xml b/addons/website/views/snippets/s_popup.xml index 2e9950f3e73..03596d8957b 100644 --- a/addons/website/views/snippets/s_popup.xml +++ b/addons/website/views/snippets/s_popup.xml @@ -19,7 +19,7 @@ <font style="font-size: 62px;">Win 20$</font> </h1> <p class="lead">Order now, and get 20$ discount on your first order with the coupon:<br/></p> - <p><button class="btn btn-alpha rounded-circle">NEWCUSTOMER</button></p> + <p><button class="btn btn-primary rounded-circle">NEWCUSTOMER</button></p> </div> </div> </div> diff --git a/addons/website/views/snippets/s_process_steps.xml b/addons/website/views/snippets/s_process_steps.xml index 85b3a7e6977..25bbeb9850c 100644 --- a/addons/website/views/snippets/s_process_steps.xml +++ b/addons/website/views/snippets/s_process_steps.xml @@ -8,7 +8,7 @@ <div class="col-lg-3 s_process_step pt24 pb24"> <div class="s_process_step_icon"> <span> - <i class="fa fa-shopping-basket fa-2x mx-auto rounded-circle bg-alpha"/> + <i class="fa fa-shopping-basket fa-2x mx-auto rounded-circle bg-primary"/> </span> </div> <div class="s_process_step_content text-center"> @@ -19,7 +19,7 @@ <div class="col-lg-3 s_process_step pt24 pb24"> <div class="s_process_step_icon"> <span> - <i class="fa fa-unlock-alt fa-2x mx-auto rounded-circle bg-beta"/> + <i class="fa fa-unlock-alt fa-2x mx-auto rounded-circle bg-secondary"/> </span> </div> <div class="s_process_step_content text-center"> @@ -30,7 +30,7 @@ <div class="col-lg-3 s_process_step pt24 pb24"> <div class="s_process_step_icon"> <span> - <i class="fa fa-paypal fa-2x mx-auto rounded-circle bg-gamma"/> + <i class="fa fa-paypal fa-2x mx-auto rounded-circle bg-o-color-3"/> </span> </div> <div class="s_process_step_content text-center"> @@ -41,7 +41,7 @@ <div class="col-lg-3 s_process_step pt24 pb24"> <div class="s_process_step_icon"> <span> - <i class="fa fa-plane fa-2x mx-auto rounded-circle bg-delta"/> + <i class="fa fa-plane fa-2x mx-auto rounded-circle bg-o-color-4"/> </span> </div> <div class="s_process_step_content text-center"> diff --git a/addons/website/views/snippets/s_product_list.xml b/addons/website/views/snippets/s_product_list.xml index b2890db4bf1..95feacb42d0 100644 --- a/addons/website/views/snippets/s_product_list.xml +++ b/addons/website/views/snippets/s_product_list.xml @@ -10,7 +10,7 @@ <img src="/web/image/website.s_product_list_default_image_1" alt="" class="img img-fluid"/> </a> <div class="s_product_list_item_link"> - <a href="http://www.odoo.com" class="btn btn-alpha">View item</a> + <a href="http://www.odoo.com" class="btn btn-primary">View item</a> </div> </div> <div class="col-lg-2 col-md-4 col-6"> @@ -18,7 +18,7 @@ <img src="/web/image/website.s_product_list_default_image_2" alt="" class="img img-fluid"/> </a> <div class="s_product_list_item_link"> - <a href="http://www.odoo.com" class="btn btn-alpha">View item</a> + <a href="http://www.odoo.com" class="btn btn-primary">View item</a> </div> </div> <div class="col-lg-2 col-md-4 col-6"> @@ -26,7 +26,7 @@ <img src="/web/image/website.s_product_list_default_image_3" alt="" class="img img-fluid"/> </a> <div class="s_product_list_item_link"> - <a href="http://www.odoo.com" class="btn btn-alpha">View item</a> + <a href="http://www.odoo.com" class="btn btn-primary">View item</a> </div> </div> <div class="col-lg-2 col-md-4 col-6"> @@ -34,7 +34,7 @@ <img src="/web/image/website.s_product_list_default_image_4" alt="" class="img img-fluid"/> </a> <div class="s_product_list_item_link"> - <a href="http://www.odoo.com" class="btn btn-alpha">View item</a> + <a href="http://www.odoo.com" class="btn btn-primary">View item</a> </div> </div> <div class="col-lg-2 col-md-4 col-6"> @@ -42,7 +42,7 @@ <img src="/web/image/website.s_product_list_default_image_5" alt="" class="img img-fluid"/> </a> <div class="s_product_list_item_link"> - <a href="http://www.odoo.com" class="btn btn-alpha">View item</a> + <a href="http://www.odoo.com" class="btn btn-primary">View item</a> </div> </div> <div class="col-lg-2 col-md-4 col-6"> @@ -50,7 +50,7 @@ <img src="/web/image/website.s_product_list_default_image_6" alt="" class="img img-fluid"/> </a> <div class="s_product_list_item_link"> - <a href="http://www.odoo.com" class="btn btn-alpha">View item</a> + <a href="http://www.odoo.com" class="btn btn-primary">View item</a> </div> </div> </div> diff --git a/addons/website/views/snippets/s_showcase.xml b/addons/website/views/snippets/s_showcase.xml index 592245cc9e6..765c7f91829 100644 --- a/addons/website/views/snippets/s_showcase.xml +++ b/addons/website/views/snippets/s_showcase.xml @@ -10,14 +10,14 @@ <div class="row"> <div class="col-lg-12 pt24 pb24" data-name="Block"> <div class="s_showcase_title d-flex flex-lg-row-reverse mb-2"> - <i class="s_showcase_icon fa fa-2x fa-desktop text-beta mr-3 mr-lg-0 ml-3"/> + <i class="s_showcase_icon fa fa-2x fa-desktop text-secondary mr-3 mr-lg-0 ml-3"/> <h3>First feature</h3> </div> <p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p> </div> <div class="col-lg-12 pt24 pb24" data-name="Block"> <div class="s_showcase_title d-flex flex-lg-row-reverse mb-2"> - <i class="s_showcase_icon fa fa-2x fa-paint-brush text-beta mr-3 mr-lg-0 ml-3"/> + <i class="s_showcase_icon fa fa-2x fa-paint-brush text-secondary mr-3 mr-lg-0 ml-3"/> <h3>Second feature</h3> </div> <p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p> @@ -31,14 +31,14 @@ <div class="row"> <div class="col-lg-12 pt24 pb24" data-name="Block"> <div class="s_showcase_title d-flex mb-2"> - <i class="s_showcase_icon fa fa-2x fa-heart text-beta mr-3"/> + <i class="s_showcase_icon fa fa-2x fa-heart text-secondary mr-3"/> <h3>Another feature</h3> </div> <p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p> </div> <div class="col-lg-12 pt24 pb24" data-name="Block"> <div class="s_showcase_title d-flex mb-2"> - <i class="s_showcase_icon fa fa-2x fa-gift text-beta mr-3"/> + <i class="s_showcase_icon fa fa-2x fa-gift text-secondary mr-3"/> <h3>Last Feature</h3> </div> <p>Focus on what the customer would like to know, not what you want to show. <br/>Write a small explanation of this great feature.</p> diff --git a/addons/website/views/snippets/s_text_highlight.xml b/addons/website/views/snippets/s_text_highlight.xml index 55aef4a33a4..07fe1d99ee9 100644 --- a/addons/website/views/snippets/s_text_highlight.xml +++ b/addons/website/views/snippets/s_text_highlight.xml @@ -2,7 +2,7 @@ <odoo> <template name="Text Highlight" id="s_text_highlight"> - <div class="s_text_highlight bg-beta my-3 text-center w-100"> + <div class="s_text_highlight bg-secondary my-3 text-center w-100"> <div class="container"> <h3>Text Highlight</h3> <p>Put the focus on what you have to say!</p> diff --git a/addons/website/views/snippets/s_timeline.xml b/addons/website/views/snippets/s_timeline.xml index 32e58729116..52f531a702b 100644 --- a/addons/website/views/snippets/s_timeline.xml +++ b/addons/website/views/snippets/s_timeline.xml @@ -13,7 +13,7 @@ <p class="card-text">A timeline is a graphical representation on which important events are marked.</p> </div> </div> - <i class="fa fa-1x fa-child bg-beta rounded-circle s_timeline_icon"/> + <i class="fa fa-1x fa-child bg-secondary rounded-circle s_timeline_icon"/> </div> <div class="s_timeline_content"/> </div> @@ -25,10 +25,10 @@ <p class="card-text">You can edit, duplicate...</p> </div> </div> - <i class="fa fa-1x fa-graduation-cap bg-beta rounded-circle s_timeline_icon"/> + <i class="fa fa-1x fa-graduation-cap bg-secondary rounded-circle s_timeline_icon"/> </div> <div class="s_timeline_content d-flex"> - <i class="fa fa-1x fa-asterisk bg-beta rounded-circle s_timeline_icon"/> + <i class="fa fa-1x fa-asterisk bg-secondary rounded-circle s_timeline_icon"/> <div class="s_timeline_card s_card card bg-white w-100" data-name="Card" data-snippet="s_card"> <div class="card-body"> <p class="card-text">...and switch the timeline contents to fit your needs.</p> @@ -44,7 +44,7 @@ <p class="card-text">Use this timeline as a part of your resume, to show your visitors what you've done in the past.</p> </div> </div> - <i class="fa fa-1x fa-bolt bg-beta rounded-circle s_timeline_icon"/> + <i class="fa fa-1x fa-bolt bg-secondary rounded-circle s_timeline_icon"/> </div> <div class="s_timeline_content"/> </div> diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index 904d855565c..42ce9562f9a 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -639,18 +639,18 @@ <!-- Theme options --> <div data-js="Theme" data-selector="theme" data-no-check="true"> <we-button class="o_we_primary_btn" data-switch-theme="" data-no-preview="true">Switch Theme</we-button> - <we-row string="Main Colors"> - <we-colorpicker data-name="primary_color_opt" title="Primary" data-customize-website-color="" data-color-type="theme" data-color="primary"/> - <we-colorpicker data-name="alpha_as_primary_color_opt" data-customize-website-color="" data-color-type="theme" data-color="alpha"/> - <we-colorpicker data-name="secondary_color_opt" title="Secondary" data-customize-website-color="" data-color-type="theme" data-color="secondary"/> - <we-colorpicker data-name="beta_as_secondary_color_opt" title="Secondary" data-customize-website-color="" data-color-type="theme" data-color="beta"/> - </we-row> - <we-row string="Extra Colors"> - <we-colorpicker data-name="alpha_as_extra_color_opt" data-customize-website-color="" data-color-type="theme" data-color="alpha"/> - <we-colorpicker data-name="beta_as_extra_color_opt" data-customize-website-color="" data-color-type="theme" data-color="beta"/> - <we-colorpicker data-customize-website-color="" data-color-type="theme" data-color="gamma"/> - <we-colorpicker data-customize-website-color="" data-color-type="theme" data-color="delta"/> - <we-colorpicker data-customize-website-color="" data-color-type="theme" data-color="epsilon"/> + <we-alert class="o_old_color_system_warning d-none"> + It appears your website is still using the old color system of + Odoo 13.0 in some places. We made sure it is still working but + we recommend you to try to use the new color system, which is + still customizable. + </we-alert> + <we-row string="Theme colors"> + <we-colorpicker title="Primary" data-customize-website-color="" data-color="o-color-1"/> + <we-colorpicker title="Secondary" data-customize-website-color="" data-color="o-color-2"/> + <we-colorpicker data-customize-website-color="" data-color="o-color-3"/> + <we-colorpicker data-customize-website-color="" data-color="o-color-4"/> + <we-colorpicker data-customize-website-color="" data-color="o-color-5"/> </we-row> <we-row string="Status Colors"> <we-colorpicker title="Success" data-customize-website-color="" data-color-type="theme" data-color="success"/> diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml index 8c6a5c0143b..1289b11512e 100644 --- a/addons/website_blog/views/website_blog_templates.xml +++ b/addons/website_blog/views/website_blog_templates.xml @@ -126,7 +126,7 @@ list of filtered posts (by date or tag). <div t-field="blog.subtitle" class="h4" placeholder="Subtitle"/> </t> <t t-else="first_post"> - <div t-if="not date and not tag" class="h4 mb-3 bg-gamma px-2 rounded-sm d-inline-block mr-auto">Latest</div> + <div t-if="not date and not tag" class="h4 mb-3 bg-o-color-3 px-2 rounded-sm d-inline-block mr-auto">Latest</div> <a t-attf-href="/blog/#{slug(first_post.blog_id)}/post/#{slug(first_post)}" t-field="first_post.name" class="h1 d-block" t-att-data-blog-id="first_post.id" placeholder="Blog Post Title"/> <div t-field="first_post.subtitle" class="h4" placeholder="Subtitle"/> @@ -161,7 +161,7 @@ list of filtered posts (by date or tag). <div class="container position-relative h-100 d-flex flex-column justify-content-around"> <div t-attf-class="o_wblog_post_title #{'js_tweet' if opt_blog_post_select_to_tweet else ''} #{'js_comment' if opt_blog_post_select_to_comment else ''}"> - <div t-if="not date and not tag and not blog" class="h4 bg-gamma px-2 d-inline-block rounded-sm">Latest</div> + <div t-if="not date and not tag and not blog" class="h4 bg-o-color-3 px-2 d-inline-block rounded-sm">Latest</div> <a t-if="not blog and first_post" t-attf-href="/blog/#{slug(first_post.blog_id)}/post/#{slug(first_post)}" t-att-title="first_post.name" class="text-white text-decoration-none"> <div t-field="first_post.name" id="o_wblog_post_name" t-att-data-blog-id="first_post.id" placeholder="Blog Post Title"/> <div t-field="first_post.subtitle" id="o_wblog_post_subtitle" placeholder="Subtitle"/> @@ -412,7 +412,7 @@ list of filtered posts (by date or tag). <hr/> <div class="d-flex text-right py-4"> <div class="flex-grow-1 pr-3"> - <span class="bg-gamma h6 d-inline-block py-1 px-2 rounded-sm">Read Next</span> + <span class="bg-o-color-3 h6 d-inline-block py-1 px-2 rounded-sm">Read Next</span> <a t-att-href="'/blog/' + slug(next_post.blog_id) + '/post/' + slug(next_post)" t-att-title="'Read next' + next_post.name"> <div t-field="next_post.name" id="o_wblog_post_name" t-att-data-blog-id="next_post.id" placeholder="Blog Post Title" class="h2"/> <div t-field="next_post.subtitle" id="o_wblog_post_subtitle" placeholder="Subtitle" class="lead"/> diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml index 20e3bfc301c..e94790873ee 100644 --- a/addons/website_forum/views/website_forum.xml +++ b/addons/website_forum/views/website_forum.xml @@ -1212,11 +1212,11 @@ <div id="post_reply" class="collapse answer_collapse" t-if="(not question.uid_has_answered or question.forum_id.mode == 'discussions')"> <t t-call="website_forum.post_answer"/> </div> - <div t-elif="uid and request.env.user.forum_waiting_posts_count" class="alert alert-gamma text-center"> + <div t-elif="uid and request.env.user.forum_waiting_posts_count" class="alert alert-info text-center"> <b class="d-block">You have a pending post</b> Please wait for a moderator to validate your previous post to be allowed replying questions. </div> - <div t-elif="not uid" class="alert alert-gamma text-center"> + <div t-elif="not uid" class="alert alert-info text-center"> <a class="btn btn-primary forum_register_url" href="/web/login">Sign in</a> to partecipate </div> </t> diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml index 84e8ab22824..025dab7925a 100644 --- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml +++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml @@ -383,7 +383,7 @@ <div> <h5>Our Product</h5> <p>Discover our products.</p> - <p><a href="/" class="btn btn-outline-alpha" target="_blank"><small><b>READ</b></small></a></p> + <p><a href="/" class="btn btn-primary" target="_blank"><small><b>READ</b></small></a></p> </div> </div> </div> |