diff options
Diffstat (limited to 'addons/website/static/src')
5 files changed, 46 insertions, 17 deletions
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> |