From 438158eaf68543ee9074ed5f8add709e68650071 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Thu, 20 Aug 2020 16:06:07 +0000 Subject: [PATCH] [IMP] website: reorganize header options UI + implement shadow & borders 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 --- .../static/src/js/editor/snippets.options.js | 85 ++++++++++-- .../static/src/scss/primary_variables.scss | 5 + addons/website/static/src/scss/website.scss | 8 ++ addons/website/views/snippets/snippets.xml | 125 +++++++++++------- addons/website/views/website_templates.xml | 6 - 5 files changed, 167 insertions(+), 62 deletions(-) diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 68efd1500e4..028bbdb4963 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -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({ diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss index d7ef22b4da0..dd24b665c95 100644 --- a/addons/website/static/src/scss/primary_variables.scss +++ b/addons/website/static/src/scss/primary_variables.scss @@ -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', diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index 0d5fb8a161d..22b621e4ad6 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -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 { diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index d44311b3a7b..147c3a46192 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -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"/> + t-att-data-apply-to="apply_to" + t-att-data-variable="style_variable">
@@ -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"/> @@ -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"/> - -