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

[IMP] website: reorganize header options UI + implement shadow & borders

Browse Source 
Also change the default behavior of all shadow options: now switching
inset / outset resets to default bootstrap values.

Part of https://github.com/odoo/odoo/pull/56427
task-2264627

X-original-commit: eb34a7841978aea5c3f2d04121fd0e6adda94e3b
Co-authored-by: Cocographique <nmi@odoo.com>
This commit is contained in:
qsm-odoo
2020-08-28 08:19:43 +00:00
committed by Xavier-Do
co-authored by Cocographique
parent 3c05896c8f
commit 438158eaf6
5 changed files with 167 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/js/editor/snippets.options.js
+77 -8
View File
@@ -1766,7 +1766,7 @@ options.registry.collapse = options.Class.extend({
},
});
options.registry.Header = options.Class.extend({
options.registry.HeaderLogo = options.Class.extend({
//--------------------------------------------------------------------------
// Private
@@ -1785,6 +1785,14 @@ options.registry.Header = options.Class.extend({
}
return this._super(...arguments);
},
});
options.registry.HeaderTemplate = options.Class.extend({
//--------------------------------------------------------------------------
// Private
//--------------------------------------------------------------------------
/**
* @override
*/
@@ -2141,12 +2149,12 @@ options.registry.Box = options.Class.extend({
*/
setShadow(previewMode, widgetValue, params) {
this.$target.toggleClass(params.shadowClass, !!widgetValue);
if (widgetValue) {
const inset = widgetValue === 'inset' ? widgetValue : '';
const values = this.$target.css('box-shadow').replace('inset', '') + ` ${inset}`;
this.$target[0].style.setProperty('box-shadow', values, 'important');
} else {
this.$target.css('box-shadow', '');
const defaultShadow = this._getDefaultShadow(widgetValue, params.shadowClass);
console.log(defaultShadow);
this.$target[0].style.setProperty('box-shadow', defaultShadow, 'important');
if (widgetValue === 'outset') {
// In this case, the shadowClass is enough
this.$target[0].style.setProperty('box-shadow', '');
}
},
@@ -2159,7 +2167,8 @@ options.registry.Box = options.Class.extend({
*/
_computeWidgetState(methodName, params) {
if (methodName === 'setShadow') {
if (!this.$target[0].classList.contains(params.shadowClass)) {
const shadowValue = this.$target.css('box-shadow');
if (!shadowValue || shadowValue === 'none') {
return '';
}
return this.$target.css('box-shadow').includes('inset') ? 'inset' : 'outset';
@@ -2175,6 +2184,66 @@ options.registry.Box = options.Class.extend({
}
return this._super(...arguments);
},
/**
* @private
* @param {string} type
* @param {string} shadowClass
* @returns {string}
*/
_getDefaultShadow(type, shadowClass) {
const el = document.createElement('div');
if (type) {
el.classList.add(shadowClass);
}
document.body.appendChild(el);
switch (type) {
case 'outset': {
return $(el).css('box-shadow');
}
case 'inset': {
return $(el).css('box-shadow') + ' inset';
}
}
el.remove();
return '';
}
});
options.registry.HeaderBox = options.registry.Box.extend({
//--------------------------------------------------------------------------
// Options
//--------------------------------------------------------------------------
/**
* @override
*/
async selectStyle(previewMode, widgetValue, params) {
if ((params.variable || params.color)
&& ['border-width', 'border-style', 'border-color', 'border-radius', 'box-shadow'].includes(params.cssProperty)) {
if (previewMode) {
return;
}
if (params.cssProperty === 'border-color') {
return this.customizeWebsiteColor(previewMode, widgetValue, params);
}
return this.customizeWebsiteVariable(previewMode, widgetValue, params);
}
return this._super(...arguments);
},
/**
* @override
*/
async setShadow(previewMode, widgetValue, params) {
if (params.variable) {
if (previewMode) {
return;
}
const defaultShadow = this._getDefaultShadow(widgetValue, params.shadowClass);
return this.customizeWebsiteVariable(previewMode, defaultShadow || 'none', params);
}
return this._super(...arguments);
},
});
options.registry.CookiesBar = options.registry.SnippetPopup.extend({
addons/website/static/src/scss/primary_variables.scss
+5
View File
@@ -6,6 +6,7 @@
$o-base-color-palette: map-merge($o-base-color-palette, (
'body': $o-portal-default-body-bg,
'menu': 1, // o_cc1
'menu-border-color': null, // Default to classes used on the template
'header-boxed': '200',
'footer': 5, // o_cc5
'copyright': 'black-15',
@@ -267,6 +268,10 @@ $o-base-website-values-palette: (
'logo-height': null, // Default to navbar height (see portal)
'hamburger-type': 'default', // 'default' / 'off-canvas'
'hamburger-position': 'left', // 'left' / 'center' / 'right'
'menu-border-width': null, // Default to classes used on the template
'menu-border-style': solid, // Default to classes used on the template
'menu-border-radius': null, // Default to classes used on the template
'menu-box-shadow': null, // Default to classes used on the template
'sidebar-width': 18.75rem, // 300px
'footer-template': 'default',
addons/website/static/src/scss/website.scss
+8
View File
@@ -819,6 +819,14 @@ header {
direction: if($-hamburger-left, ltr, rtl);
}
}
nav.navbar {
@if o-website-value('menu-border-width') {
border: o-website-value('menu-border-width') o-website-value('menu-border-style') o-color('menu-border-color') !important;
}
border-radius: o-website-value('menu-border-radius') !important;
box-shadow: o-website-value('menu-box-shadow') !important;
}
}
@if $-off-canvas-hamburger {
addons/website/views/snippets/snippets.xml
+77 -48
View File
@@ -249,10 +249,12 @@
data-select-style="0"
t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}width"
data-unit="px"
t-att-data-extra-class="with_bs_class and 'border'"/>
t-att-data-extra-class="with_bs_class and 'border'"
t-att-data-variable="width_variable"/>
<we-select t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}style"
data-dependencies="border_width_opt"
t-att-data-apply-to="apply_to">
t-att-data-apply-to="apply_to"
t-att-data-variable="style_variable">
<we-button title="Solid" data-select-style="solid"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/></we-button>
<we-button title="Dashed" data-select-style="dashed"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/></we-button>
<we-button title="Dotted" data-select-style="dotted"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/></we-button>
@@ -262,7 +264,8 @@
t-att-data-apply-to="apply_to"
data-select-style="true"
t-attf-data-css-property="border-#{direction and ('%s-' % direction) or ''}color"
data-color-prefix="border-"/>
data-color-prefix="border-"
t-att-data-color="color_variable"/>
</we-row>
</template>
@@ -275,11 +278,12 @@
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"
data-unit="px" data-extra-class="rounded"/>
data-unit="px" data-extra-class="rounded"
t-att-data-variable="radius_variable"/>
</template>
<template id="snippet_options_shadow_widgets">
<we-button-group string="Shadow" data-shadow-class="shadow">
<we-button-group string="Shadow" data-shadow-class="shadow" t-att-data-variable="shadow_variable">
<we-button data-set-shadow="">None</we-button>
<we-button data-set-shadow="outset"
data-img="/website/static/src/img/snippets_options/shadow_out.svg"
@@ -290,7 +294,7 @@
data-name="shadow_inset_opt"
title="Inset"/>
</we-button-group>
<we-multi data-css-property="box-shadow" data-dependencies="shadow_active_opt, shadow_inset_opt">
<we-multi data-css-property="box-shadow" data-dependencies="shadow_active_opt, shadow_inset_opt" t-att-data-variable="shadow_variable">
<we-colorpicker string="⌙ Color" data-select-style="" data-css-compatible=""/>
<we-row string="⌙ Offset (X, Y)">
<we-input data-select-style="" data-unit="px"/>
@@ -523,48 +527,10 @@
data-selector="[data-oe-expression='res_company.partner_id']"
data-no-check="true"/>
<div data-js="Header"
id="so_header_theme"
<div data-js="HeaderTemplate"
data-selector="#wrapwrap > header"
data-no-check="true"
groups="website.group_website_designer">
<we-checkbox string="Sign In" data-customize-website-views="portal.user_sign_in" data-reload="/"/>
<we-row string="Colors">
<we-colorpicker data-customize-website-color="" data-color="menu"
data-with-combinations="true"/>
<we-colorpicker data-dependencies="header_boxed_opt"
data-customize-website-color="" data-color="header-boxed"
data-with-combinations="true"/>
</we-row>
<we-checkbox id="option_header_shadow" string="Shadow"
data-customize-website-views="website.header_shadow"
data-select-class="shadow"
data-no-preview="true"/>
<we-select string="Brand" data-reload="/">
<we-button data-customize-website-views="" data-name="option_header_brand_none">None</we-button>
<we-button data-customize-website-views="website.option_header_brand_name">Text</we-button>
<we-button data-customize-website-views="website.option_header_brand_logo">Image</we-button>
</we-select>
<we-input string="⌙ Height"
data-dependencies="!option_header_brand_none"
data-customize-website-variable="null"
data-variable="logo-height"
data-unit="px"
data-save-unit="rem"/>
<we-input string="⌙ Height (Scrolled)"
data-name="option_logo_height_scrolled"
data-customize-website-variable="null"
data-variable="fixed-logo-height"
data-unit="px"
data-save-unit="rem"
data-dependencies="!header_effect_scroll_opt"/>
<we-row string="Font">
<we-fontfamilypicker data-variable="navbar-font"/>
<we-input data-customize-website-variable="null" data-variable="header-font-size" data-unit="px" data-save-unit="rem"/>
</we-row>
<we-select string="Template" data-variable="header-template" data-reload="/">
<we-button title="Default"
data-name="header_default_opt"
@@ -646,7 +612,64 @@
<we-button data-customize-website-views="website.option_header_off_canvas_logo_show">Image</we-button>
</we-select>
<we-select id="header_visibilities_list" string="Header Visibility" data-dependencies="!header_sidebar_opt">
<we-row string="Font">
<we-fontfamilypicker data-variable="navbar-font"/>
<we-input data-customize-website-variable="null" data-variable="header-font-size" data-unit="px" data-save-unit="rem"/>
</we-row>
<we-row string="Colors">
<we-colorpicker data-customize-website-color="" data-color="menu"
data-with-combinations="true"/>
<we-colorpicker data-dependencies="header_boxed_opt"
data-customize-website-color="" data-color="header-boxed"
data-with-combinations="true"/>
</we-row>
</div>
<!-- Header - Borders & Shadows -->
<div data-js="HeaderBox"
id="option_header_shadow"
data-selector="#wrapwrap > header"
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>
</div>
<div data-js="HeaderLogo"
data-selector="#wrapwrap > header"
data-no-check="true"
groups="website.group_website_designer">
<we-select string="Logo" data-reload="/">
<we-button data-customize-website-views="" data-name="option_header_brand_none">None</we-button>
<we-button data-customize-website-views="website.option_header_brand_name">Text</we-button>
<we-button data-customize-website-views="website.option_header_brand_logo">Image</we-button>
</we-select>
<we-input string="⌙ Height"
data-dependencies="!option_header_brand_none"
data-customize-website-variable="null"
data-variable="logo-height"
data-unit="px"
data-save-unit="rem"/>
<we-input string="⌙ Height (Scrolled)"
data-name="option_logo_height_scrolled"
data-customize-website-variable="null"
data-variable="fixed-logo-height"
data-unit="px"
data-save-unit="rem"
data-dependencies="!header_effect_scroll_opt"/>
<we-select id="header_visibilities_list" string="Scroll Effect" data-dependencies="!header_sidebar_opt">
<we-button id="option_header_visibility_standard"
data-name="header_visibility_standard_opt"
data-select-class="o_header_standard"
@@ -674,7 +697,7 @@
string="Fade Out"/>
</we-select>
<we-select string="Navbar Links Style" data-variable="header-links-style" data-reload="/">
<we-select string="Menu Style" data-variable="header-links-style" data-reload="/">
<we-button data-name="option_header_navbar_links_default"
data-customize-website-views=""
data-customize-website-variable="'default'">Default</we-button>
@@ -705,7 +728,7 @@
<div data-js="TopMenuVisibility"
data-selector="[data-main-object^='website.page('] #wrapwrap > header"
data-no-check="true">
<we-select string="Visibility (On This Page)" id="option_header_visibility" data-no-preview="true">
<we-select string="Page Visibility" id="option_header_visibility" data-no-preview="true">
<we-button data-name="regular_header_visibility_opt"
data-visibility="regular">Regular</we-button>
<we-button data-visibility="transparent">Transparent</we-button>
@@ -724,6 +747,12 @@
data-excluded="theme, common, custom"/>
</div>
<div data-selector="#wrapwrap > header"
data-no-check="true"
groups="website.group_website_designer">
<we-checkbox string="Sign In" data-customize-website-views="portal.user_sign_in" data-reload="/"/>
</div>
<!-- Footer - Colors & Layouts -->
<div data-selector="#wrapwrap > footer"
data-no-check="true"
addons/website/views/website_templates.xml
-6
View File
@@ -1272,12 +1272,6 @@
</xpath>
</template>
<template id="header_shadow" inherit_id="website.layout" name="Header Shadow" active="False">
<xpath expr="//header" position="attributes">
<attribute name="t-attf-class" add="shadow" separator=" "/>
</xpath>
</template>
<template id="header_hoverable_dropdown" inherit_id="website.layout" name="Header Hoverable Dropdown" active="False">
<xpath expr="//header" position="attributes">
<attribute name="t-attf-class" add="o_hoverable_dropdown" separator=" "/>