From e7dcfc19298948b76caa4c214724c93854cf5f4c Mon Sep 17 00:00:00 2001 From: "Robin Lejeune (role)" Date: Wed, 27 Sep 2023 17:02:01 +0200 Subject: [PATCH] [IMP] website: allow varied default behaviors for header templates Currently, the template headers all have the same default behavior, you cannot define different default behaviors for header A and header B (e.g. have header A appear over the content and header B fixed). This commit allows to specify other behaviors than the default ones for each header template. It should be noted that, as it currently stands, most options trigger a reload of the page, which prevents simpler solutions like using `data-trigger` attributes to tie some options to the header selection. Specifically, this commit: - defines a header visibility for each header with `data-trigger`. This is actually the only option of the 3 concerned by this commit that could be handled that way, for the aforementioned reasons. Only the visibility of the `header_rounded_box` template is actually modified, but to allow switching back and forth between the different templates and still have the intended Odoo experience, a trigger is specified for each header choice (the other ones having the default visibility). - applies the "pills" link style for the `header_rounded_box` template and introduces a `customizeWebsiteVariables` public method to do so. This method, called through the `data-customize-website-variables` attribute, allows to specify additional variables that should be modified by selecting the option. It is as of now only used in that specific case, but could be used with a number of other options which are defined in a similar way, such as the scroll effect, alignment, font, logo height... - uses the default link style to apply it to each template by default through the use of `data-default-variables`. This is needed (1) to make sure that the `header_stretch` template can never have another style than the default one, as the option is hidden when it is selected, and (2) to go back to the default behavior when switching between headers. Both `data-customize-website-variables` and `data-default-variables` use the same syntax: a list of `variable: value` separated by a comma. e.g. `header-links-style: pills, header-scroll-effect: fixed` - removes the "Round corners" option field and border-radius for headers sales_one, sales_two, sales_three and sales_four, because the option does not play well with their layouts. task-3474743 Part-of: odoo/odoo#119650 --- .../static/src/js/editor/snippets.options.js | 16 +++++ addons/website/static/src/scss/website.scss | 4 ++ addons/website/views/snippets/snippets.xml | 58 ++++++++++++++----- addons/website/views/website_templates.xml | 12 ++-- 4 files changed, 73 insertions(+), 17 deletions(-) diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index eabc79f9c56..3d9183a6344 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -655,6 +655,12 @@ options.Class.include({ customizeWebsiteVariable: async function (previewMode, widgetValue, params) { await this._customizeWebsite(previewMode, widgetValue, params, 'variable'); }, + /** + * @see this.selectClass for parameters + */ + customizeWebsiteVariables: async function (previewMode, widgetValue, params) { + await this._customizeWebsite(previewMode, widgetValue, params, 'variables'); + }, /** * @see this.selectClass for parameters */ @@ -758,6 +764,16 @@ options.Class.include({ case 'variable': await this._customizeWebsiteVariable(widgetValue, params); break; + case "variables": + const defaultVariables = params.defaultVariables ? + Object.fromEntries(params.defaultVariables.split(",") + .map((variable) => variable.split(":").map(v => v.trim()))) : + {}; + const overriddenVariables = Object.fromEntries(widgetValue.split(",") + .map((variable) => variable.split(":").map(v => v.trim()))); + const variables = Object.assign(defaultVariables, overriddenVariables); + await this._customizeWebsiteVariables(variables, params.nullValue); + break; case 'color': await this._customizeWebsiteColor(widgetValue, params); break; diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index 88f1c193466..772495500b6 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -1108,6 +1108,10 @@ header { } border-radius: o-website-value('menu-border-radius') !important; box-shadow: o-website-value('menu-box-shadow') !important; + + &.o_header_force_no_radius { + border-radius: 0 !important; + } } // Prevent the color of the header to impact the color of the nav. &.o_header_is_scrolled, &.o_transitioning.o_header_affixed { diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index 20f5e0da8f1..28ede204aac 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -300,6 +300,7 @@ + +