diff options
12 files changed, 137 insertions, 46 deletions
diff --git a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss index 19ced6c9d8f..e69de29bb2d 100644 --- a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss +++ b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss @@ -1,3 +0,0 @@ - -$black: black; -$white: white; diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js index 7b02703260b..3ccba2da261 100644 --- a/addons/web_editor/static/src/js/widgets/widgets.js +++ b/addons/web_editor/static/src/js/widgets/widgets.js @@ -1164,7 +1164,7 @@ var MediaDialog = Dialog.extend({ self.$media = self.$media.parent(); self.media = self.$media[0]; tabToShow = 'video'; - } + } self.$('[href="#editor-media-' + tabToShow + '"]').tab('show'); }); @@ -1457,6 +1457,21 @@ var LinkDialog = Dialog.extend({ this.$('input[name="url"]').val(match ? match[1] : this.data.url); } + // Hide the duplicate color buttons (most of the times, primary = alpha + // and secondary = beta for example but this may depend on the theme) + this.opened().then(function () { + var colors = []; + _.each(self.$('.o_btn_preview'), function (btn) { + var $btn = $(btn); + var color = $btn.css('background-color'); + if (_.contains(colors, color)) { + $btn.remove(); + } else { + colors.push(color); + } + }); + }); + this._adaptPreview(); this.$('input:visible:first').focus(); diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss index 15309f4de7f..2a0b900b10c 100644 --- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss +++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss @@ -1,3 +1,5 @@ +// Hacky way to detect if its the backend or not +$-is-backend: variable-exists('primary'); // Automatically update bootstrap colors map (unused by BS itself) $-palette: nth($o-color-palettes, $o-color-palette-number); @@ -6,28 +8,75 @@ $colors: map-merge($-palette, $colors); // Automatically extend bootstrap to create theme background/text/button classes $-palette: nth($o-theme-color-palettes, $o-theme-color-palette-number); -$-main-color: map-get($-palette, 'primary'); +$-main-color: map-get($-palette, 'alpha'); $-main-color-lightness: lightness($-main-color); -$-palette: map-merge($-palette, ( - // Compatibility: alpha and beta color exist but will now always be - // equal to primary and secondary colors - alpha: $-main-color, - beta: map-get($-palette, 'secondary'), +$-palette: map-merge(( + // alpha and beta colors 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($-palette, 'beta'), // 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 - // very dark version of a desaturate version of the primary color + // very dark version of a desaturate version of the primary color light: lighten(desaturate($-main-color, 40%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness dark: darken(desaturate($-main-color, 40%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness -)); +), $-palette); +@if $-is-backend { + $-palette: map-remove($-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'); +} $theme-colors: () !default; $theme-colors: map-merge($-palette, $theme-colors); // Extend grays with transparent ones (for some reason, BS4 create black-50 and -// white-50 but does not allow overridding that with variables). Also add black -// and white ones too as they were also not added by BS4... +// white-50 but does not allow overridding that with variables), also use the +// theme gray palette (which is supposed to at least declare white and black). +$-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number); +$-palette: map-merge($o-transparent-grays, $-palette); +@if $-is-backend { + $-palette: map-remove($-palette, '100', '200', '300', '400', '500', '600', '700', '800', '900'); +} $grays: () !default; -$grays: map-merge(map-merge($o-transparent-grays, ( - black: $black, // Note: those two needs to be redefined before bootstrap, - white: $white, // otherwise they do not exist yet -)), $grays); +$grays: map-merge($-palette, $grays); + +// Bootstrap use standard variables to define individual colors which are then +// placed into a map which is then used to get the value of each individual +// color. As BS4 allows to extend the map a priori to define our own colors, +// it does not take care of making the standard variables match the values in +// the user's map. The problem is that, at least for grays, bootstrap uses the +// standard variables in its _variables.scss file, so if: +// +// User file: +// $grays: ( +// '100': blue, +// ); +// +// BS4: +// $gray-100: gray !default; +// $grays: () !default; +// $grays: map-merge(( +// '100': $gray-100, +// ), $grays); +// +// -> Here gray('100') is blue but $gray-100 is still gray... so BS4 is not +// correctly generated as BS4 uses $gray-100 in _variables.scss +$primary: theme-color('primary') !default; +$secondary: theme-color('secondary') !default; +$success: theme-color('success') !default; +$info: theme-color('info') !default; +$warning: theme-color('warning') !default; +$danger: theme-color('danger') !default; +$light: theme-color('light') !default; +$dark: theme-color('dark') !default; + +$white: gray('white') !default; +$gray-100: gray('100') !default; +$gray-200: gray('200') !default; +$gray-300: gray('300') !default; +$gray-400: gray('400') !default; +$gray-500: gray('500') !default; +$gray-600: gray('600') !default; +$gray-700: gray('700') !default; +$gray-800: gray('800') !default; +$gray-900: gray('900') !default; +$black: gray('black') !default; diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss b/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss deleted file mode 100644 index 114d49c8dd4..00000000000 --- a/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss +++ /dev/null @@ -1,4 +0,0 @@ - -// Hacky way to prevent our web_editor/website themes to affect the backend UI but -// still allow to define extra colors for backend HTML editors -$theme-colors: map-remove($theme-colors, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'); 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 eff996bea20..730041fbb5f 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -230,8 +230,8 @@ $o-color-palette-number: 1; // Theme colors $o-theme-color-palettes: ( ( - primary: $o-enterprise-primary-color, - secondary: $o-enterprise-color, + alpha: $o-enterprise-primary-color, + beta: $o-enterprise-color, gamma: #5C5B80, delta: #5B899E, epsilon: #E46F78, @@ -248,7 +248,13 @@ $o-transparent-grays: ( white-50: rgba(white, 0.5), white-75: rgba(white, 0.75), ) !default; - +$o-gray-color-palettes: ( + ( + 'white': #FFFFFF, // Those two will enforce the creation of bg-white + 'black': #000000, // and bg-black classes. + ), +) !default; +$o-gray-color-palette-number: 1; // Translations $o-we-content-to-translate-color: rgb(255, 255, 90) !default; diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml index b3d1763ca71..fe51450dac9 100644 --- a/addons/web_editor/static/src/xml/editor.xml +++ b/addons/web_editor/static/src/xml/editor.xml @@ -278,7 +278,7 @@ <input class="d-none link-style" name="link_style_color" type="radio" value=""/> <i class="fa"/> </label> - <t t-foreach="['primary', 'secondary', 'gamma', 'delta', 'epsilon', 'success', 'info', 'warning', 'danger']" t-as="color"> + <t t-foreach="['alpha', 'beta', 'gamma', 'delta', 'epsilon', 'primary', 'secondary', 'success', 'info', 'warning', 'danger']" t-as="color"> <label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-#{color}" t-attf-aria-label="Color for #{color}" t-attf-title="Color for #{color}"> <input type="radio" name="link_style_color" class="d-none link-style" t-att-value="color"/> <i class="fa"/> diff --git a/addons/web_editor/views/editor.xml b/addons/web_editor/views/editor.xml index c9a3ddfccd0..9cd1a34bd4d 100644 --- a/addons/web_editor/views/editor.xml +++ b/addons/web_editor/views/editor.xml @@ -69,7 +69,6 @@ <template id="_assets_backend_helpers" inherit_id="web._assets_backend_helpers"> <xpath expr="//link[last()]" position="after"> <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden.scss"/> - <link rel="stylesheet" type="text/scss" href="/web_editor/static/src/scss/bootstrap_overridden_backend.scss"/> </xpath> </template> @@ -154,8 +153,8 @@ <template id="web_editor.colorpicker" name="Color-Picker"> <colorpicker> <div class="o_colorpicker_section" data-name="theme" data-display="Theme Colors" data-icon-class="fa fa-flask"> - <button data-color="primary"></button> - <button data-color="secondary"></button> + <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> diff --git a/addons/website/static/src/js/tours/customize.js b/addons/website/static/src/js/tours/customize.js index 510b9f12975..c1e1f185f2c 100644 --- a/addons/website/static/src/js/tours/customize.js +++ b/addons/website/static/src/js/tours/customize.js @@ -11,7 +11,7 @@ tour.register('theme_customize', { url: '/', wait_for: base.ready(), }, [{ - trigger: 'button.o_theme_customize_color_primary', + trigger: 'button.o_theme_customize_color_primary, button.o_theme_customize_color_alpha', content: _t("Click here to choose your main branding color.<br/>It will recompute the palette with suggested matching colors."), position: 'bottom', }]); diff --git a/addons/website/static/src/js/widgets/theme.js b/addons/website/static/src/js/widgets/theme.js index ce73fd35d3d..e2879fb25c6 100644 --- a/addons/website/static/src/js/widgets/theme.js +++ b/addons/website/static/src/js/widgets/theme.js @@ -62,6 +62,27 @@ var ThemeCustomizeDialog = Dialog.extend({ var $tabs = this.$('[data-toggle="tab"]'); this.opened().then(function () { $tabs.eq(self.defaultTab).tab('show'); + + var $colorPreview = self.$('.o_theme_customize_color_previews:visible'); + var $primary = $colorPreview.find('.o_theme_customize_color[data-color="primary"]'); + var $alpha = $colorPreview.find('.o_theme_customize_color[data-color="alpha"]'); + var $secondary = $colorPreview.find('.o_theme_customize_color[data-color="secondary"]'); + var $beta = $colorPreview.find('.o_theme_customize_color[data-color="beta"]'); + var sameAlphaPrimary = $primary.find('.o_color_preview').css('background-color') === $alpha.find('.o_color_preview').css('background-color'); + var sameBetaSecondary = $secondary.find('.o_color_preview').css('background-color') === $beta.find('.o_color_preview').css('background-color'); + if (!sameAlphaPrimary) { + $alpha.find('.o_color_name').text(_t("Extra Color")); + $primary.removeClass('d-none').addClass('d-flex'); + } + if (!sameBetaSecondary) { + $beta.find('.o_color_name').text(_t("Extra Color")); + $secondary.removeClass('d-none').addClass('d-flex'); + } + if (!sameAlphaPrimary && sameBetaSecondary) { + $beta.insertBefore($alpha); + } else if (sameAlphaPrimary && !sameBetaSecondary) { + $secondary.insertAfter($alpha); + } }); // Hide the tab navigation if only one tab @@ -153,6 +174,9 @@ var ThemeCustomizeDialog = Dialog.extend({ reload: $item.data('reload'), })); + $multiChoiceLabel.find('.o_theme_customize_color[data-color="primary"]').addClass('d-none').removeClass('d-flex'); + $multiChoiceLabel.find('.o_theme_customize_color[data-color="secondary"]').addClass('d-none').removeClass('d-flex'); + if ($container.hasClass('form-row')) { var $col = $('<div/>', {class: (icon ? 'col-4' : (colorPalette ? 'col-12' : 'col-6'))}); $col.append($multiChoiceLabel); @@ -214,8 +238,8 @@ var ThemeCustomizeDialog = Dialog.extend({ params: { xml_ids: this._getXMLIDs(this.$inputs), }, - }).done(function (data) { - self.$inputs.prop('checked', false); + }).done(function (data) { + self.$inputs.prop('checked', false); _.each(self.$inputs.filter('[data-xmlid]:not([data-xmlid=""])'), function (input) { var $input = $(input); if (!_.difference(self._getXMLIDs($input), data[0]).length) { @@ -454,7 +478,7 @@ var ThemeCustomizeDialog = Dialog.extend({ var colorType = $color.data('colorType'); var colorpicker = new ColorpickerDialog(this, { - defaultColor: $color.find('span').css('background-color'), + defaultColor: $color.find('.o_color_preview').css('background-color'), }); colorpicker.on('colorpicker:saved', this, function (ev) { ev.stopPropagation(); @@ -551,4 +575,4 @@ var ThemeCustomizeMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({ websiteNavbarData.websiteNavbarRegistry.add(ThemeCustomizeMenu, '#theme_customize'); return ThemeCustomizeDialog; -});
\ No newline at end of file +}); diff --git a/addons/website/static/src/scss/options/colors/user_theme_color_palette.scss b/addons/website/static/src/scss/options/colors/user_theme_color_palette.scss index dc57b44bd5d..88c0847ae04 100644 --- a/addons/website/static/src/scss/options/colors/user_theme_color_palette.scss +++ b/addons/website/static/src/scss/options/colors/user_theme_color_palette.scss @@ -1,15 +1,20 @@ $o-user-theme-color-palette: map-merge(( // Theme colors - primary: null, - secondary: null, + alpha: null, + beta: null, gamma: null, epsilon: null, delta: null, + // Depending on the theme, alpha and beta may not be equal to + // primary and secondary + primary: null, + secondary: null, + // BS state colors success: null, info: null, warning: null, - danger: null, + danger: null, ), o-map-omit($o-user-theme-color-palette)); diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss index 06b19ce4090..762b498b75e 100644 --- a/addons/website/static/src/scss/secondary_variables.scss +++ b/addons/website/static/src/scss/secondary_variables.scss @@ -8,14 +8,14 @@ $-palette-1: nth($o-color-palettes, 1); $o-color-palettes: append($o-color-palettes, map-merge($-palette-1, o-map-omit($o-user-color-palette))); -// Generate default theme color scheme if primary is set -$-primary: map-get($o-user-theme-color-palette, 'primary'); -@if ($-primary) { +// 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($o-user-theme-color-palette, map-merge(( - secondary: lighten(desaturate($-primary, 60%), 30%), - gamma: desaturate(adjust-hue($-primary, -45deg), 10%), - delta: desaturate(adjust-hue($-primary, 45deg), 10%), - epsilon: desaturate(adjust-hue($-primary, 180deg), 10%), + beta: lighten(desaturate($-alpha, 60%), 30%), + gamma: desaturate(adjust-hue($-alpha, -45deg), 10%), + delta: desaturate(adjust-hue($-alpha, 45deg), 10%), + epsilon: desaturate(adjust-hue($-alpha, 180deg), 10%), ), o-map-omit($o-user-theme-color-palette))); } diff --git a/addons/website/static/src/xml/website.editor.xml b/addons/website/static/src/xml/website.editor.xml index 15baaa1f514..56cac3b3feb 100644 --- a/addons/website/static/src/xml/website.editor.xml +++ b/addons/website/static/src/xml/website.editor.xml @@ -29,7 +29,7 @@ <div t-if="colorPalette" class="o_theme_customize_color_previews" t-att-data-depends="id"> <div> <h6>Main colors</h6> - <t t-foreach="{'primary': _t('Primary'), 'secondary': _t('Secondary'), 'gamma': _t('Extra Color 1'), 'delta': _t('Extra Color 2'), 'epsilon': _t('Extra Color 3')}" t-as="color"> + <t t-foreach="{'primary': _t('Primary'), 'secondary': _t('Secondary'), 'alpha': _t('Primary'), 'beta': _t('Secondary'), 'gamma': _t('Extra Color'), 'delta': _t('Extra Color'), 'epsilon': _t('Extra Color')}" t-as="color"> <t t-call="website.theme_customize_color_palette_button"> <t t-set="color_type" t-value="'theme'"/> </t> @@ -66,7 +66,7 @@ t-attf-class="btn btn-sm btn-secondary d-flex align-items-center w-100 mt-2 justify-content-between o_theme_customize_color o_theme_customize_color_#{color}" t-att-data-color="color" t-att-data-color-type="color_type"> - <t t-esc="color_value"/> + <span class="o_color_name"><t t-esc="color_value"/></span> <span t-attf-class="o_color_preview bg-#{color}"/> </button> </t> |