pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] web, website_sale: fix text color of modals if dark body background

Browse Source 
Before this commit, if the text color of the body was light (e.g., due
to a dark body background), the text in certain modals (for example, in
the "Alternative products" modal displayed when adding a product to a
cart on a product page) was also light, making it not visible on the
white modal background.

Steps to reproduce the bug:
- Install the e-commerce on your website.
- Go to the "Customizable Desk" product page.
- Click on "Edit" to go in edit mode.
- Click on the "Theme" tab.
- Click on the 4th color of the theme colors and choose "black".
- Save the page to leave edit mode.
- Click on the "Add to cart" button.
- Bug: The text in the the modal is not visible because both text and
background are white and the input elements have their background the
same color as the body.

After this commit, we now verify that there is sufficient contrast
between the text color of the body and the background color of the
modals. If this condition is not met, we apply an alternative color
("$color-contrast-dark" or "$color-contrast-light") to the text of the
modal to ensure visibility.

opw-3570774

closes odoo/odoo#151346

X-original-commit: ffd2f2363f20b88ec05c153c57057b538c3885d2
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
This commit is contained in:
Benjamin Vray
2024-01-31 13:47:11 +00:00
parent 49e55546c2
commit ab0e0f4bef
2 changed files with 79 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/scss/bootstrap_review_frontend.scss
Vendored
+65
View File
@@ -102,3 +102,68 @@ $o-navbar-nav-pills-link-border-radius: $nav-pills-border-radius !default;
// Ensure circle for one digit numbers
font-variant-numeric: tabular-nums;
}
// Modal
.modal-content {
// If the text color of the body (used for the text color in modals) is not
// visible due to insufficient contrast with the modal background, we adjust
// the text color in the modal using the following code. For example, if the
// user sets a black background for its website and the text color of the
// body is white, the text will not be visible on modals with a white
// background.
// Check if the body text color is light.
$-is-body-text-light: color-contrast($body-color) == $color-contrast-dark;
@if $modal-content-color == null {
color: if(
$-is-body-text-light,
color-contrast($modal-content-bg, $body-color, $color-contrast-dark),
color-contrast($modal-content-bg, $color-contrast-light, $body-color)
);
// This prevents these elements from taking their colors from the body
// inside a modal.
// We need to exclude 'oe_structure' that are areas containing editable
// snippets. Indeed, this code was added in a stable version, and we are
// doing everything not to alter the content edited by users. For
// example in Website, without this 'not', the 's_website_form' snippets
// with a black background in modals and on websites with a black
// background would have their input background changing from black to
// white.
// TODO: In Master, find a more consistent way to define the background
// color of 's_website_form' snippet inputs inside a modal.
&:where(:not(.oe_structure)) {
@if ($input-bg == $body-bg) {
.form-control {
background-color: $modal-content-bg;
color: color-contrast($modal-content-bg);
}
}
@if ($form-select-bg == $body-bg) {
.form-select {
background-color: $modal-content-bg;
color: color-contrast($modal-content-bg);;
}
}
@if $form-check-input-bg == $body-bg {
.form-check-input:not(:checked) {
background-color: $modal-content-bg;
}
}
}
}
@if $-is-body-text-light {
.text-muted {
color: color-contrast($modal-content-bg, $text-muted, mute-color($color-contrast-dark)) !important;
}
}
}
// Form
.form-check-input {
// Without this line, the border of the checkboxes is not visible when the
// body is dark. This is due to the fact that the borders are defined based
// on the 'currentColor' of the inputs.
color: inherit;
}
addons/website_sale/static/src/scss/product_configurator.scss
+14 -1
View File
@@ -77,13 +77,26 @@ option.css_not_available {
color: #ccc;
}
$-arrow-url: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='175' height='100' fill='#000'><polygon points='0,0 100,0 50,50'/></svg>");
select.form-select.css_attribute_select {
background-image: str-replace(url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='175' height='100' fill='#{$input-color}'><polygon points='0,0 100,0 50,50'/></svg>"), "#", "%23") ;
background-image: str-replace($-arrow-url, "#000", str-replace(#{$input-color}, "#", "%23"));
background-size: 20px;
background-position: 100% 65%;
background-repeat: no-repeat;
max-width: 400px;
}
// In the case of a modal, we cannot rely on '$input-color' to define the color
// of the select arrow because '$input-color' is set based on the background
// color of the body. In modals, the input color is adjusted based on the
// modal's background color (see 'bootstrap_review_frontend.scss').
@if ($modal-content-color == null) and ($form-select-bg == $body-bg) {
.modal-content {
select.form-select.css_attribute_select {
background-image: str-replace($-arrow-url, "#000", str-replace(#{color-contrast($modal-content-bg)}, "#", "%23"));
}
}
}
label, .o_variant_pills {
&.css_not_available {