From ed4f856c5a550cb01ff1a7daf2bf222005da9d12 Mon Sep 17 00:00:00 2001 From: Serhii Rubanskyi - seru Date: Fri, 16 May 2025 13:47:25 +0200 Subject: [PATCH 1/3] Use only "color" tabs in countdown and item product color picker options --- .../static/src/builder/plugins/options/countdown_option.xml | 6 +++--- .../static/src/temp/website_sale/products_item_option.xml | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/addons/website/static/src/builder/plugins/options/countdown_option.xml b/addons/website/static/src/builder/plugins/options/countdown_option.xml index 5132fd4806935..6660b90cf77b4 100644 --- a/addons/website/static/src/builder/plugins/options/countdown_option.xml +++ b/addons/website/static/src/builder/plugins/options/countdown_option.xml @@ -41,7 +41,7 @@ - + @@ -62,7 +62,7 @@ - + @@ -82,7 +82,7 @@ - + diff --git a/addons/website/static/src/temp/website_sale/products_item_option.xml b/addons/website/static/src/temp/website_sale/products_item_option.xml index 270b82d9b0390..d43e65c9c184f 100644 --- a/addons/website/static/src/temp/website_sale/products_item_option.xml +++ b/addons/website/static/src/temp/website_sale/products_item_option.xml @@ -52,10 +52,10 @@ - + - + From d2b6aba3a749a8642d54e2dbd41a20cdb111d479 Mon Sep 17 00:00:00 2001 From: Serhii Rubanskyi - seru Date: Mon, 19 May 2025 17:28:28 +0200 Subject: [PATCH 2/3] fix color picker --- .../core/building_blocks/builder_colorpicker.js | 9 ++++++--- .../src/core/core_builder_action_plugin.js | 16 +++++++++++++--- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/addons/html_builder/static/src/core/building_blocks/builder_colorpicker.js b/addons/html_builder/static/src/core/building_blocks/builder_colorpicker.js index f37090a3568b4..935a76f6a5a47 100644 --- a/addons/html_builder/static/src/core/building_blocks/builder_colorpicker.js +++ b/addons/html_builder/static/src/core/building_blocks/builder_colorpicker.js @@ -1,3 +1,4 @@ +import { getCSSVariableValue } from "@html_builder/utils/utils_css"; import { ColorSelector } from "@html_editor/main/font/color_selector"; import { Component, useComponent, useRef } from "@odoo/owl"; import { useColorPicker } from "@web/core/color_picker/color_picker"; @@ -53,9 +54,11 @@ export function useColorPickerBuilderComponent() { }; } function getColor(colorValue) { - return colorValue.startsWith("color-prefix-") - ? `var(${colorValue.replace("color-prefix-", "--")})` - : colorValue; + if (colorValue.startsWith("color-prefix-")) { + const cssVariableColor = getCSSVariableValue(colorValue.replace("color-prefix-", "")); + return cssVariableColor ? cssVariableColor : colorValue.replace("color-prefix-", ""); + } + return colorValue; } function onApply(colorValue) { diff --git a/addons/html_builder/static/src/core/core_builder_action_plugin.js b/addons/html_builder/static/src/core/core_builder_action_plugin.js index b300b9a62a758..e340e6642568d 100644 --- a/addons/html_builder/static/src/core/core_builder_action_plugin.js +++ b/addons/html_builder/static/src/core/core_builder_action_plugin.js @@ -1,5 +1,10 @@ import { Plugin } from "@html_editor/plugin"; -import { CSS_SHORTHANDS, applyNeededCss, areCssValuesEqual } from "@html_builder/utils/utils_css"; +import { + CSS_SHORTHANDS, + applyNeededCss, + areCssValuesEqual, + normalizeColor, +} from "@html_builder/utils/utils_css"; export function withoutTransition(editingElement, callback) { if (editingElement.classList.contains("o_we_force_no_transition")) { @@ -263,8 +268,13 @@ const attributeAction = { }; const dataAttributeAction = { - getValue: ({ editingElement, params: { mainParam: attributeName } = {} }) => - editingElement.dataset[attributeName], + getValue: ({ editingElement, params: { mainParam: attributeName } = {} }) => { + if (!/(^color|Color)($|(?=[A-Z]))/.test(attributeName)) { + return editingElement.dataset[attributeName]; + } + const color = normalizeColor(editingElement.dataset[attributeName]); + return color; + }, isApplied: ({ editingElement, params: { mainParam: attributeName } = {}, value }) => { if (value) { return editingElement.dataset[attributeName] === value; From 3ac7cc1db407ca6b9a070acceebedbd4b95b8441 Mon Sep 17 00:00:00 2001 From: Serhii Rubanskyi - seru Date: Tue, 20 May 2025 09:40:04 +0200 Subject: [PATCH 3/3] add support for compact hex colors (e.g. #fff) --- addons/web/static/src/core/utils/colors.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/addons/web/static/src/core/utils/colors.js b/addons/web/static/src/core/utils/colors.js index e18306eabbc3e..6dca83f3d6c15 100644 --- a/addons/web/static/src/core/utils/colors.js +++ b/addons/web/static/src/core/utils/colors.js @@ -217,6 +217,16 @@ export function convertCSSColorToRgba(cssColor) { } // Otherwise, check if cssColor is an hexadecimal code color + // first check if it's in its compact form (e.g. #FFF) + if (/^#([0-9a-f]{3})$/i.test(cssColor)) { + return { + red: parseInt(cssColor[1] + cssColor[1], 16), + green: parseInt(cssColor[2] + cssColor[2], 16), + blue: parseInt(cssColor[3] + cssColor[3], 16), + opacity: 100, + }; + } + if (/^#([0-9A-F]{6}|[0-9A-F]{8})$/i.test(cssColor)) { return { red: parseInt(cssColor.substr(1, 2), 16),