Skip to content

Conversation

@alap-odoo
Copy link
Contributor

@alap-odoo alap-odoo commented Nov 2, 2025

Steps to reproduce:

  1. Go to website and click edit.
  2. Switch to the Theme tab and click on Color Presets.
  3. Click on first color preset, then open the background color picker.
  4. Switch to gradient tab, select any gradient, and adjust the opacity.
  5. Now, click on second color preset, open the background color picker.
  6. Switch to the custom tab, select any color, and adjust its opacity.

Issue:
When a gradient is selected (first color preset), the color preset preview area correctly displays a checkered background to indicate transparency. However, when a plain custom color is selected (second color preset), the checkered transparency background is missing from the color preset preview area.

Fix:
Set the value of --PreviewAlphaBg-background-size variable as 32px. Moreover, extended the %o-preview-alpha-background placeholder in the color_picker.scss file to ensure the checkered background is consistently applied for both gradient and custom color selections.

Before After
image image

task-5226064

@robodoo
Copy link
Contributor

robodoo commented Nov 2, 2025

Pull request status dashboard

@alap-odoo alap-odoo force-pushed the saas-18.4-fix-colorpicker-transparency-display-alap branch 3 times, most recently from 03f2114 to 692fc83 Compare November 3, 2025 08:08
@shsa-odoo shsa-odoo marked this pull request as ready for review November 3, 2025 08:54
@shsa-odoo
Copy link
Contributor

PS: The file has changed from v19 so it will later needs adaptation. Good Work. 😉

@C3POdoo C3POdoo requested review from a team, BastienFafchamps and aab-odoo and removed request for a team November 3, 2025 08:56
@alap-odoo alap-odoo changed the title [FIX] web: checkered background display in the color presets [FIX] web, website: checkered background display in the color presets Nov 3, 2025
@alap-odoo alap-odoo force-pushed the saas-18.4-fix-colorpicker-transparency-display-alap branch 3 times, most recently from 87cc8ca to 146edb8 Compare November 4, 2025 09:00
Steps to reproduce:
1. Go to website and click edit.
2. Switch to the "Theme" tab and click on "Color Presets".
3. Click on first color preset, then open the background color picker.
4. Switch to gradient tab, select any gradient, and adjust the opacity.
5. Now, click on second color preset, open the background color picker.
6. Switch to the custom tab, select any color, and adjust its opacity.

Issue:
When a gradient is selected (first color preset), the color preset
preview area correctly displays a checkered background to indicate
transparency. However, when a plain custom color is selected
(second color preset), the checkered transparency background is missing
from the color preset preview area.

Fix:
Set the value of "--PreviewAlphaBg-background-size" variable as 32px.
Moreover, extended the "%o-preview-alpha-background" placeholder in the
"color_picker.scss" file to ensure the checkered background is
consistently applied for both gradient and custom color selections.

task-5226064
@alap-odoo alap-odoo force-pushed the saas-18.4-fix-colorpicker-transparency-display-alap branch from 146edb8 to 9a8746f Compare November 5, 2025 07:01
@FrancoisGe
Copy link
Contributor

@robodoo delegate=bvr-odoo

@bvr-odoo
Copy link
Contributor

bvr-odoo commented Dec 1, 2025

@robodoo r+

robodoo pushed a commit that referenced this pull request Dec 1, 2025
Steps to reproduce:
1. Go to website and click edit.
2. Switch to the "Theme" tab and click on "Color Presets".
3. Click on first color preset, then open the background color picker.
4. Switch to gradient tab, select any gradient, and adjust the opacity.
5. Now, click on second color preset, open the background color picker.
6. Switch to the custom tab, select any color, and adjust its opacity.

Issue:
When a gradient is selected (first color preset), the color preset
preview area correctly displays a checkered background to indicate
transparency. However, when a plain custom color is selected
(second color preset), the checkered transparency background is missing
from the color preset preview area.

Fix:
Set the value of "--PreviewAlphaBg-background-size" variable as 32px.
Moreover, extended the "%o-preview-alpha-background" placeholder in the
"color_picker.scss" file to ensure the checkered background is
consistently applied for both gradient and custom color selections.

task-5226064

closes #234083

Signed-off-by: Benjamin Vray (bvr) <bvr@odoo.com>
@robodoo robodoo closed this Dec 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants