From e08184103c42eaf7f6bfb70655cb90b51e79913a Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Thu, 25 Mar 2021 14:36:51 +0000 Subject: [PATCH] [IMP] website: add technical improvement for gray customization Improvement of [1]. Allows to not have to save the gray-hue and gray-extra-saturation server-side at all, and thus better allow to use a fully customized gray palette in theme should a theme need it. [1]: https://github.com/odoo/odoo/commit/35d27a6c1d3dab621de7f059565d7619ae004412 Merged with https://github.com/odoo/odoo/pull/67488 --- .../static/src/js/editor/snippets.options.js | 51 ++++++++++--------- .../static/src/scss/primary_variables.scss | 5 -- addons/website/views/snippets/snippets.xml | 8 +-- 3 files changed, 31 insertions(+), 33 deletions(-) diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index c112f400d43..69e20b248bd 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -809,8 +809,6 @@ options.registry.BackgroundVideo = options.Class.extend({ }); options.registry.OptionsTab = options.Class.extend({ - GRAY_PARAMS: ['gray-hue', 'gray-extra-saturation'], - /** * @override */ @@ -845,22 +843,16 @@ options.registry.OptionsTab = options.Class.extend({ /** * @override */ - async customizeWebsiteVariable(previewMode, widgetValue, params) { - await this._super(...arguments); - if (!this.GRAY_PARAMS.includes(params.variable)) { - return; - } + async customizeGray(previewMode, widgetValue, params) { + // Gray parameters are used *on the JS side* to compute the grays that + // will be saved in the database. We indeed need those grays to be + // computed here for faster previews so this allows to not duplicate + // most of the logic. Also, this gives flexibility to maybe allow full + // customization of grays in custo and themes. Also, this allows to ease + // migration if the computation here was to change: the user grays would + // still be unchanged as saved in the database. - // Difference with other "normal" variable: gray parameters are used - // *on the JS side* to compute the grays that will be saved in the - // database. We indeed need those grays to be computed here for faster - // previews so this allows to not duplicate most of the logic. Also, - // this gives flexibility to maybe allow full customization of grays in - // customizations and themes. Also, this allows to ease migration if the - // computation here was to change: the user grays would still be - // unchanged as saved in the database. - - this.grayParams[params.variable] = parseInt(widgetValue); + this.grayParams[params.param] = parseInt(widgetValue); for (let i = 1; i < 10; i++) { const key = (100 * i).toString(); this.grays[key] = this._buildGray(key); @@ -1054,13 +1046,24 @@ options.registry.OptionsTab = options.Class.extend({ } return weUtils.getCSSVariableValue('body-image-type'); } - if (methodName === 'customizeWebsiteVariable' - && this.GRAY_PARAMS.includes(params.variable)) { - // Small hack to save the initially returned value to be able to - // compute the grays - const value = await this._super(...arguments); - this.grayParams[params.variable] = parseInt(value); - return value; + if (methodName === 'customizeGray') { + // If the gray palette has been generated by Odoo standard option, + // the hue of all gray is the same and the saturation has been + // increased/decreased by the same amount for all grays in + // comparaison with BS grays. However the system supports any + // gray palette so we base our hue and extra saturation displayed + // values on one gray, let's say the middle one: gray-500. + const gray = weUtils.getCSSVariableValue('500'); + const grayRGB = ColorpickerWidget.convertCSSColorToRgba(gray); + const hsl = ColorpickerWidget.convertRgbToHsl(grayRGB.red, grayRGB.green, grayRGB.blue); + + const baseGray = weUtils.getCSSVariableValue('base-500'); + const baseGrayRGB = ColorpickerWidget.convertCSSColorToRgba(baseGray); + const baseHSL = ColorpickerWidget.convertRgbToHsl(baseGrayRGB.red, baseGrayRGB.green, baseGrayRGB.blue); + + this.grayParams['gray-hue'] = hsl.hue; + this.grayParams['gray-extra-saturation'] = hsl.saturation - baseHSL.saturation; + return this.grayParams[params.param]; } return this._super(...arguments); }, diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss index 75d71ace0b5..73d549e7d71 100644 --- a/addons/website/static/src/scss/primary_variables.scss +++ b/addons/website/static/src/scss/primary_variables.scss @@ -256,11 +256,6 @@ $o-base-website-values-palette: ( 'layout': 'full', // 'full' / 'boxed' 'color-palettes-number': null, // Default to the individual variables for each color palette type - // Gray configuration values which are used to generate the customized grays - // on the JavaScript side. - 'gray-hue': 210, - 'gray-extra-saturation': 0, - 'btn-primary-outline': false, 'btn-secondary-outline': false, 'link-underline': 'hover', // 'never' / 'hover' / 'always' diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index 512c24f07bb..fee74313d7c 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -1223,10 +1223,10 @@ t-attf-class="o_we_user_value_widget o_we_gray_preview bg-#{grayCode}"/> - - + +