From 7647151b786a44397dead7cbdda221f52848b617 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Thu, 6 Aug 2020 13:07:53 +0000 Subject: [PATCH] [IMP] website: implement body image as a SCSS variable This is unfortunately replacing old hacks by new ones but using SCSS variables for this is more consistent with the rest of our website customization possibilities. The hack here is for the UI which is controlling two SCSS variables at the same time (body-image and body-image-type). This has to be improved. closes odoo/odoo#56496 X-original-commit: 6b400c433b352d7dbba0d3770600857df4872c50 Signed-off-by: Quentin Smetz (qsm) --- .../static/src/js/editor/snippets.options.js | 54 +++++++------------ .../layout/option_custom_body_pattern.scss | 5 -- .../static/src/scss/primary_variables.scss | 3 ++ addons/website/static/src/scss/website.scss | 16 ++++-- addons/website/views/snippets/snippets.xml | 13 +++-- addons/website/views/website_templates.xml | 14 ----- 6 files changed, 40 insertions(+), 65 deletions(-) delete mode 100644 addons/website/static/src/scss/options/layout/option_custom_body_pattern.scss diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 548172fd0a1..6b4c5414fe1 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -782,43 +782,25 @@ options.registry.OptionsTab = options.Class.extend({ }); }, /** - * @todo use scss customization instead (like for user colors) * @see this.selectClass for parameters */ - async customizeBodyBg(previewMode, widgetValue, params) { - const xmlID = 'website.option_custom_body_image'; - if (widgetValue) { - await this._rpc({ - model: 'ir.model.data', - method: 'get_object_reference', - args: xmlID.split('.'), - }).then(data => { - return this._rpc({ - model: 'ir.ui.view', - method: 'save', - args: [ - data[1], - `#wrapwrap { background-image: url("${widgetValue}"); }`, - '//style', - ], - }); - }); - } else { - await this._customizeWebsiteViews('', {possibleValues: ['', xmlID]}); + async customizeBodyBgType(previewMode, widgetValue, params) { + if (widgetValue === 'NONE') { + this.bodyImageType = 'image'; + return this.customizeBodyBg(previewMode, '', params); } - - await this._reloadBundles(); + // TODO improve: hack to click on external image picker + this.bodyImageType = widgetValue; + const widget = this._requestUserValueWidgets(params.imagepicker)[0]; + widget.$el.click(); }, /** - * @see this.selectClass for parameters + * @override */ - async enableImagepicker(previewMode, widgetValue, params) { - if (widgetValue) { - // TODO improve: here we make a hack so that a hidden imagepicker - // widget opens... - const widget = this._requestUserValueWidgets(widgetValue)[0]; - widget.$el.click(); - } + async customizeBodyBg(previewMode, widgetValue, params) { + // TODO improve: customize two variables at the same time... + await this.customizeWebsiteVariable(previewMode, this.bodyImageType, {variable: 'body-image-type'}); + await this.customizeWebsiteVariable(previewMode, widgetValue ? `'${widgetValue}'` : '', {variable: 'body-image'}); }, /** * @see this.selectClass for parameters @@ -940,10 +922,12 @@ options.registry.OptionsTab = options.Class.extend({ * @override */ async _computeWidgetState(methodName, params) { - if (methodName === 'customizeBodyBg') { - const bgURL = $('#wrapwrap').css('background-image'); - const srcValueWrapper = /url\(['"]*|['"]*\)|^none$/g; - return bgURL && bgURL.replace(srcValueWrapper, '') || ''; + if (methodName === 'customizeBodyBgType') { + const bgImage = $('#wrapwrap').css('background-image'); + if (bgImage === 'none') { + return "NONE"; + } + return weUtils.getCSSVariableValue('body-image-type'); } return this._super(...arguments); }, diff --git a/addons/website/static/src/scss/options/layout/option_custom_body_pattern.scss b/addons/website/static/src/scss/options/layout/option_custom_body_pattern.scss deleted file mode 100644 index 1e75db342be..00000000000 --- a/addons/website/static/src/scss/options/layout/option_custom_body_pattern.scss +++ /dev/null @@ -1,5 +0,0 @@ - -#wrapwrap { - background-size: auto; - background-repeat: repeat; -} diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss index 3351c9da5ec..c4c6d80a446 100644 --- a/addons/website/static/src/scss/primary_variables.scss +++ b/addons/website/static/src/scss/primary_variables.scss @@ -244,6 +244,9 @@ $o-base-website-values-palette: ( 'font-size-base': 1rem, // Need a set value as the value is used in bootstrap_overridden files 'google-fonts': null, + 'body-image': null, + 'body-image-type': 'image', // 'image' or 'pattern' + 'color-palettes-number': null, // Default to the individual variables for each color palette type 'btn-primary-outline': false, diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index 6b2421d3b4f..a4c517cb1b3 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -59,10 +59,18 @@ $-seen-urls: (); } #wrapwrap { - background-size: cover; - background-repeat: no-repeat; - background-position: center; - background-attachment: fixed; + @if o-website-value('body-image') { + background-image: url("/#{str-slice(o-website-value('body-image'), 2)}"); + background-position: center; + background-attachment: fixed; + @if o-website-value('body-image-type') == 'pattern' { + background-size: auto; + background-repeat: repeat; + } @else { + background-size: cover; + background-repeat: no-repeat; + } + } @if ($o-theme-layout == 'boxed') { @include media-breakpoint-up(md) { diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index ff1be534de8..d49d03291e8 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -886,18 +886,17 @@ - + + data-customize-body-bg-type="'image'"> + data-customize-body-bg-type="'pattern'"> + data-customize-body-bg-type="NONE"> - + - - - -