pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website: allow varied default behaviors for header templates

Browse Source 
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
This commit is contained in:
Robin Lejeune (role)
2023-10-25 11:37:12 +00:00
committed by qsm-odoo
parent 143d475c3a
commit e7dcfc1929
4 changed files with 73 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/editor/snippets.options.js
+16
View File
@@ -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;
addons/website/static/src/scss/website.scss
+4
View File
@@ -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 {
addons/website/views/snippets/snippets.xml
+45 -13
View File
@@ -300,6 +300,7 @@
<t t-set="with_bs_class" t-value="True"/>
</t>
<we-input string="Round Corners"
t-if="not no_border_radius"
t-att-data-apply-to="apply_to"
t-att-data-dependencies="not so_rounded_no_dependencies and 'border_width_opt,bg_color_opt'"
data-select-style="0" data-css-property="border-radius"
@@ -333,6 +334,20 @@
</we-multi>
</template>
<template id="snippet_options_header_box">
<t t-call="website.snippet_options_border_widgets">
<t t-set="so_rounded_no_dependencies" t-value="True"/>
<t t-set="width_variable" t-value="'menu-border-width'"/>
<t t-set="style_variable" t-value="'menu-border-style'"/>
<t t-set="color_variable" t-value="'menu-border-color'"/>
<t t-set="radius_variable" t-value="'menu-border-radius'"/>
<t t-set="no_border_radius" t-value="_no_border_radius"/>
</t>
<t t-call="website.snippet_options_shadow_widgets">
<t t-set="shadow_variable" t-value="'menu-box-shadow'"/>
</t>
</template>
<template id="snippet_options_conditional_visibility">
<we-select t-att-string="option_name" class="o_we_sublevel_1"
data-dependencies="visibility_conditional"
@@ -735,59 +750,73 @@
data-selector="#wrapwrap > header"
data-no-check="true"
groups="website.group_website_designer">
<we-select string="Template" data-variable="header-template" data-reload="/" data-no-preview="true">
<we-select string="Template" data-variable="header-template"
data-default-variables="header-links-style: default"
data-reload="/" data-no-preview="true">
<we-button title="Default"
data-name="header_default_opt"
data-trigger="regular_header_visibility_opt"
data-customize-website-views="website.template_header_default"
data-customize-website-variable="'default'"
data-img="/website/static/src/img/snippets_options/header_template_default.svg"/>
<we-button title="Hamburger menu"
data-name="header_hamburger_opt"
data-trigger="regular_header_visibility_opt"
data-customize-website-views="website.template_header_hamburger, website.no_autohide_menu"
data-customize-website-variable="'hamburger'"
data-img="/website/static/src/img/snippets_options/header_template_hamburger.svg"/>
<we-button title="Rounded box menu"
data-name="header_boxed_opt"
data-customize-website-views="website.template_header_boxed"
data-trigger="over_content_header_visibility_opt"
data-customize-website-views="website.header_navbar_pills_style,website.template_header_boxed"
data-customize-website-variable="'boxed'"
data-customize-website-variables="header-links-style: pills"
data-img="/website/static/src/img/snippets_options/header_template_boxed.svg"/>
<we-button title="Stretch menu"
data-name="header_stretch_opt"
data-trigger="regular_header_visibility_opt"
data-customize-website-views="website.template_header_stretch"
data-customize-website-variable="'stretch'"
data-img="/website/static/src/img/snippets_options/header_template_stretch.svg"/>
<we-button title="Vertical"
data-name="header_vertical_opt"
data-trigger="regular_header_visibility_opt"
data-customize-website-views="website.template_header_vertical"
data-customize-website-variable="'vertical'"
data-img="/website/static/src/img/snippets_options/header_template_vertical.svg"/>
<we-button title="Menu with Search bar"
data-name="header_search_opt"
data-trigger="regular_header_visibility_opt"
data-customize-website-views="website.template_header_search"
data-customize-website-variable="'search'"
data-img="/website/static/src/img/snippets_options/header_template_search.svg"/>
<we-button title="Menu - Sales 1"
data-name="header_sales_one_opt"
data-trigger="regular_header_visibility_opt"
data-customize-website-views="website.template_header_sales_one"
data-customize-website-variable="'sales_one'"
data-img="/website/static/src/img/snippets_options/header_template_sales_one.svg"/>
<we-button title="Menu - Sales 2"
data-name="header_sales_two_opt"
data-trigger="regular_header_visibility_opt"
data-customize-website-views="website.template_header_sales_two"
data-customize-website-variable="'sales_two'"
data-img="/website/static/src/img/snippets_options/header_template_sales_two.svg"/>
<we-button title="Menu - Sales 3"
data-name="header_sales_three_opt"
data-trigger="regular_header_visibility_opt"
data-customize-website-views="website.template_header_sales_three"
data-customize-website-variable="'sales_three'"
data-img="/website/static/src/img/snippets_options/header_template_sales_three.svg"/>
<we-button title="Menu - Sales 4"
data-name="header_sales_four_opt"
data-trigger="regular_header_visibility_opt"
data-customize-website-views="website.template_header_sales_four"
data-customize-website-variable="'sales_four'"
data-img="/website/static/src/img/snippets_options/header_template_sales_four.svg"/>
<we-button title="Sidebar"
data-name="header_sidebar_opt"
data-trigger="regular_header_visibility_opt"
data-customize-website-views="website.template_header_sidebar, website.no_autohide_menu"
data-customize-website-variable="'sidebar'"
data-img="/website/static/src/img/snippets_options/header_template_sidebar.svg"/>
@@ -843,19 +872,21 @@
<!-- Header - Borders & Shadows -->
<div data-js="HeaderBox"
id="option_header_shadow"
data-selector="#wrapwrap > header"
data-selector="#wrapwrap > header:not(:has(.o_header_force_no_radius))"
data-target="nav"
data-no-check="true"
groups="website.group_website_designer">
<t t-call="website.snippet_options_border_widgets">
<t t-set="so_rounded_no_dependencies" t-value="True"/>
<t t-set="width_variable" t-value="'menu-border-width'"/>
<t t-set="style_variable" t-value="'menu-border-style'"/>
<t t-set="color_variable" t-value="'menu-border-color'"/>
<t t-set="radius_variable" t-value="'menu-border-radius'"/>
</t>
<t t-call="website.snippet_options_shadow_widgets">
<t t-set="shadow_variable" t-value="'menu-box-shadow'"/>
<t t-call="website.snippet_options_header_box"/>
</div>
<div data-js="HeaderBox"
id="option_header_shadow"
data-selector="#wrapwrap > header:has(.o_header_force_no_radius)"
data-target="nav"
data-no-check="true"
groups="website.group_website_designer">
<t t-call="website.snippet_options_header_box">
<t t-set="_no_border_radius" t-value="True"/>
</t>
</div>
@@ -927,7 +958,8 @@
data-no-check="true">
<we-select string="Header Position" data-no-preview="true"
data-dependencies="!header_sidebar_opt">
<we-button data-visibility="transparent">Over The Content</we-button>
<we-button data-name="over_content_header_visibility_opt"
data-visibility="transparent">Over The Content</we-button>
<we-button data-name="regular_header_visibility_opt"
data-visibility="regular">Regular</we-button>
<we-button data-visibility="hidden">Hidden</we-button>
addons/website/views/website_templates.xml
+8 -4
View File
@@ -899,7 +899,7 @@
<template id="template_header_sales_one" inherit_id="website.layout" name="Template Header Sale 1" active="False">
<xpath expr="//header//nav" position="replace">
<t t-call="website.navbar">
<t t-set="_navbar_classes" t-valuef="d-none d-lg-block p-0 shadow-sm"/>
<t t-set="_navbar_classes" t-valuef="o_header_force_no_radius d-none d-lg-block p-0 shadow-sm"/>
<div id="o_main_nav">
<div aria-label="Top" class="container d-flex justify-content-between py-3">
@@ -967,6 +967,7 @@
</t>
<t t-call="website.template_header_mobile">
<t t-set="_txt_elt_content" t-valuef="list"/>
<t t-set="_extra_navbar_classes" t-valuef="o_header_force_no_radius"/>
</t>
</xpath>
</template>
@@ -990,7 +991,7 @@
<template id="template_header_sales_two" inherit_id="website.layout" name="Template Header Sale 2" active="False">
<xpath expr="//header//nav" position="replace">
<t t-call="website.navbar">
<t t-set="_navbar_classes" t-valuef="d-none d-lg-block p-0 shadow-sm"/>
<t t-set="_navbar_classes" t-valuef="o_header_force_no_radius d-none d-lg-block p-0 shadow-sm"/>
<div id="o_main_nav">
<div class="o_header_hide_on_scroll">
@@ -1073,6 +1074,7 @@
</t>
<t t-call="website.template_header_mobile">
<t t-set="_txt_elt_content" t-valuef="sentence"/>
<t t-set="_extra_navbar_classes" t-valuef="o_header_force_no_radius"/>
</t>
</xpath>
</template>
@@ -1093,7 +1095,7 @@
<template id="template_header_sales_three" inherit_id="website.layout" name="Template Header Sale 3" active="False">
<xpath expr="//header//nav" position="replace">
<t t-call="website.navbar">
<t t-set="_navbar_classes" t-valuef="d-none d-lg-block p-0 shadow-sm"/>
<t t-set="_navbar_classes" t-valuef="o_header_force_no_radius d-none d-lg-block p-0 shadow-sm rounded-0"/>
<div id="o_main_nav">
<div aria-label="Top" t-if="is_view_active('website.header_text_element') or is_view_active('website.header_social_links') or is_view_active('website.header_search_box') or is_view_active('website.header_call_to_action')"
@@ -1169,6 +1171,7 @@
</t>
<t t-call="website.template_header_mobile">
<t t-set="_txt_elt_content" t-valuef="list"/>
<t t-set="_extra_navbar_classes" t-valuef="o_header_force_no_radius"/>
</t>
</xpath>
</template>
@@ -1177,7 +1180,7 @@
<template id="template_header_sales_four" inherit_id="website.layout" name="Template Header Sale 4" active="False">
<xpath expr="//header//nav" position="replace">
<t t-call="website.navbar">
<t t-set="_navbar_classes" t-valuef="o_header_sales_four_top d-none d-lg-block p-0 shadow-sm z-index-1"/>
<t t-set="_navbar_classes" t-valuef="o_header_sales_four_top o_header_force_no_radius d-none d-lg-block p-0 shadow-sm z-index-1"/>
<div id="o_main_nav">
<div aria-label="Top" class="container d-flex">
@@ -1258,6 +1261,7 @@
</t>
<t t-call="website.template_header_mobile">
<t t-set="_txt_elt_content" t-valuef="mail"/>
<t t-set="_extra_navbar_classes" t-valuef="o_header_force_no_radius"/>
</t>
</xpath>
</template>