[ADD] web_checkbox_contrast: visible border on unchecked backend checkboxes
Odoo 18 draws the unchecked checkboxes, radios and switches of the backend with the separator gray (`--border-color`, gray-300): 1.3:1 on white, and 1.1:1 on readonly fields and list cells, which are dimmed to 50% on top. CSS-only addon that redefines `--border-color` on `.form-check-input`: gray-600 (4.7:1) when editable, gray-900 (3.1:1 after the dimming) when disabled. Bootstrap reads the property only in the base border of the control, so the checked, indeterminate, focus and hover states keep their stock colours whatever the load order. Closes #20 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
8a029464eb
commit
1d6f95bdb7
12 changed files with 188 additions and 0 deletions
4
.github/copilot-instructions.md
vendored
4
.github/copilot-instructions.md
vendored
|
|
@ -193,6 +193,7 @@ addons-cm/
|
||||||
├── account_banking_mandate_batch/ # Crear/validar mandatos SEPA en bloque desde contactos
|
├── account_banking_mandate_batch/ # Crear/validar mandatos SEPA en bloque desde contactos
|
||||||
├── l10n_es_edi_tbai_reagyp_recibidas/ # Fix TicketBAI REAGYP facturas recibidas (19 → 02)
|
├── l10n_es_edi_tbai_reagyp_recibidas/ # Fix TicketBAI REAGYP facturas recibidas (19 → 02)
|
||||||
├── # --- UI de backend ---
|
├── # --- UI de backend ---
|
||||||
|
├── web_checkbox_contrast/ # Borde visible en las casillas sin marcar del backend (sólo CSS)
|
||||||
└── web_list_striped/ # Efecto cebra en todas las listas del backend (sólo CSS)
|
└── web_list_striped/ # Efecto cebra en todas las listas del backend (sólo CSS)
|
||||||
|
|
||||||
````
|
````
|
||||||
|
|
@ -237,6 +238,7 @@ addons-cm/
|
||||||
|
|
||||||
- [stock_picking_batch_collect](../stock_picking_batch_collect/README.rst) - Columnas extra, resumen por producto y vista operario para batch picking; checks de recogido también en albaranes sueltos, cantidad pedida en venta e informe con todos los albaranes del lote
|
- [stock_picking_batch_collect](../stock_picking_batch_collect/README.rst) - Columnas extra, resumen por producto y vista operario para batch picking; checks de recogido también en albaranes sueltos, cantidad pedida en venta e informe con todos los albaranes del lote
|
||||||
- [web_list_striped](../web_list_striped/README.rst) - Efecto cebra en todas las listas del backend (sólo CSS)
|
- [web_list_striped](../web_list_striped/README.rst) - Efecto cebra en todas las listas del backend (sólo CSS)
|
||||||
|
- [web_checkbox_contrast](../web_checkbox_contrast/README.rst) - Borde visible en casillas, radios e interruptores sin marcar del backend (sólo CSS)
|
||||||
- [account_banking_mandate_batch](../account_banking_mandate_batch/README.rst) - Creación masiva de mandatos SEPA desde contactos
|
- [account_banking_mandate_batch](../account_banking_mandate_batch/README.rst) - Creación masiva de mandatos SEPA desde contactos
|
||||||
- [l10n_es_edi_tbai_reagyp_recibidas](../l10n_es_edi_tbai_reagyp_recibidas/README.rst) - Fix TicketBAI REAGYP en facturas recibidas (clave régimen 19 → 02)
|
- [l10n_es_edi_tbai_reagyp_recibidas](../l10n_es_edi_tbai_reagyp_recibidas/README.rst) - Fix TicketBAI REAGYP en facturas recibidas (clave régimen 19 → 02)
|
||||||
|
|
||||||
|
|
@ -761,6 +763,8 @@ last_purchase_price_compute_type != "manual_update" # Para auto-cálculo
|
||||||
`product_pricelist_total_margin`, `product_origin_char`, `l10n_es_edi_tbai_reagyp_recibidas`.
|
`product_pricelist_total_margin`, `product_origin_char`, `l10n_es_edi_tbai_reagyp_recibidas`.
|
||||||
`product_origin` (OCA) sustituido por `product_origin_char` (custom).
|
`product_origin` (OCA) sustituido por `product_origin_char` (custom).
|
||||||
- **2026-06-04**: `product_sale_price_from_pricelist` aplica descuentos de proveedor desde `supplierinfo`.
|
- **2026-06-04**: `product_sale_price_from_pricelist` aplica descuentos de proveedor desde `supplierinfo`.
|
||||||
|
- **2026-10-10**: nuevo addon `web_checkbox_contrast` (v18.0.1.0.0) — sólo CSS: borde visible
|
||||||
|
en casillas, radios e interruptores sin marcar del backend (issue #20).
|
||||||
- **2026-10-10**: `stock_picking_batch_collect` (v18.0.2.2.0) — columna de cantidad demandada en
|
- **2026-10-10**: `stock_picking_batch_collect` (v18.0.2.2.0) — columna de cantidad demandada en
|
||||||
las listas de líneas de movimiento (operaciones detalladas de lote y albarán, vista operario).
|
las listas de líneas de movimiento (operaciones detalladas de lote y albarán, vista operario).
|
||||||
- **2026-10-04**: `stock_picking_batch_collect` (v18.0.2.1.0) — checks de recogido en albaranes
|
- **2026-10-04**: `stock_picking_batch_collect` (v18.0.2.1.0) — checks de recogido en albaranes
|
||||||
|
|
|
||||||
|
|
@ -28,6 +28,7 @@ Addons desarrollados por Criptomart para necesidades específicas del proyecto.
|
||||||
| [product_pricelist_total_margin](product_pricelist_total_margin/) | 18.0.1.2.0 | Margen aditivo (no compuesto) en tarifas encadenadas, con límites globales |
|
| [product_pricelist_total_margin](product_pricelist_total_margin/) | 18.0.1.2.0 | Margen aditivo (no compuesto) en tarifas encadenadas, con límites globales |
|
||||||
| [product_sale_price_from_pricelist](product_sale_price_from_pricelist/) | 18.0.2.7.0 | Calcula precio de venta desde último precio de compra vía tarifa configurable |
|
| [product_sale_price_from_pricelist](product_sale_price_from_pricelist/) | 18.0.2.7.0 | Calcula precio de venta desde último precio de compra vía tarifa configurable |
|
||||||
| [stock_picking_batch_collect](stock_picking_batch_collect/) | 18.0.2.0.0 | Montaje de cestas en lotes: columnas extra, resumen por producto y vista operario |
|
| [stock_picking_batch_collect](stock_picking_batch_collect/) | 18.0.2.0.0 | Montaje de cestas en lotes: columnas extra, resumen por producto y vista operario |
|
||||||
|
| [web_checkbox_contrast](web_checkbox_contrast/) | 18.0.1.0.0 | Borde visible en casillas, radios e interruptores sin marcar del backend (sólo CSS) |
|
||||||
| [web_list_striped](web_list_striped/) | 18.0.1.0.0 | Efecto cebra y hover suave en todas las listas del backend (sólo CSS) |
|
| [web_list_striped](web_list_striped/) | 18.0.1.0.0 | Efecto cebra y hover suave en todas las listas del backend (sólo CSS) |
|
||||||
| [website_sale_aplicoop](website_sale_aplicoop/) | 18.0.1.17.0 | Sistema de pedidos colaborativos para grupos de consumo (reemplazo de Aplicoop) |
|
| [website_sale_aplicoop](website_sale_aplicoop/) | 18.0.1.17.0 | Sistema de pedidos colaborativos para grupos de consumo (reemplazo de Aplicoop) |
|
||||||
|
|
||||||
|
|
|
||||||
76
web_checkbox_contrast/README.rst
Normal file
76
web_checkbox_contrast/README.rst
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
=====================
|
||||||
|
Web Checkbox Contrast
|
||||||
|
=====================
|
||||||
|
|
||||||
|
Visión general
|
||||||
|
==============
|
||||||
|
|
||||||
|
Oscurece el borde de las casillas de verificación, los botones de opción y los
|
||||||
|
interruptores **sin marcar** en todo el backend de Odoo.
|
||||||
|
|
||||||
|
En Odoo 18 ese borde se pinta con el gris claro de los separadores
|
||||||
|
(``--border-color``, ``#dee2e6``), que sobre fondo blanco da un contraste de
|
||||||
|
1,3:1: una casilla sin marcar casi no se ve, y menos aún en un campo de sólo
|
||||||
|
lectura o en una celda de lista, que Odoo atenúa además al 50 %. WCAG 1.4.11
|
||||||
|
pide 3:1 para el contorno de un control.
|
||||||
|
|
||||||
|
Con el módulo instalado:
|
||||||
|
|
||||||
|
* casilla editable sin marcar: gris ``--gray-600``, contraste 4,7:1;
|
||||||
|
* casilla de sólo lectura sin marcar: ``--gray-900`` atenuado al 50 %, 3,1:1.
|
||||||
|
|
||||||
|
Los estados marcado, indeterminado, foco y hover conservan los colores de Odoo.
|
||||||
|
|
||||||
|
El alcance global es intencionado: es justamente lo que hace este módulo. Es un
|
||||||
|
módulo de sólo CSS: no define modelos, campos ni vistas. Para volver al aspecto
|
||||||
|
estándar de Odoo basta con desinstalarlo.
|
||||||
|
|
||||||
|
Sólo afecta al backend (``web.assets_backend``): ni el sitio web, ni el portal,
|
||||||
|
ni el TPV cambian.
|
||||||
|
|
||||||
|
Nota técnica: no se sobrescribe ``border-color`` sino la propiedad
|
||||||
|
personalizada ``--border-color`` sobre el propio ``.form-check-input``.
|
||||||
|
Bootstrap sólo la lee en el ``border`` base del control; el resto de estados
|
||||||
|
fijan ``border-color`` de forma explícita, así que ganan siempre, sin depender
|
||||||
|
de la especificidad ni del orden de carga de los assets.
|
||||||
|
|
||||||
|
Instalación
|
||||||
|
===========
|
||||||
|
|
||||||
|
Instalar el módulo:
|
||||||
|
|
||||||
|
::
|
||||||
|
|
||||||
|
docker-compose run --rm odoo odoo -d odoo --stop-after-init -i web_checkbox_contrast
|
||||||
|
|
||||||
|
No tiene más dependencias que ``web``, así que se puede instalar y desinstalar
|
||||||
|
en cualquier momento sin afectar a datos.
|
||||||
|
|
||||||
|
Configuración
|
||||||
|
=============
|
||||||
|
|
||||||
|
No requiere configuración. El efecto se aplica al instalar el módulo y
|
||||||
|
desaparece al desinstalarlo.
|
||||||
|
|
||||||
|
Para cambiar la intensidad del borde, edita los dos valores de
|
||||||
|
``--border-color`` en ``static/src/css/web_checkbox_contrast.css``.
|
||||||
|
|
||||||
|
Uso
|
||||||
|
===
|
||||||
|
|
||||||
|
No hay nada que usar: una vez instalado, cualquier casilla, botón de opción o
|
||||||
|
interruptor sin marcar del backend (formularios, columnas booleanas de las
|
||||||
|
listas, ajustes, filtros...) muestra un borde bien visible.
|
||||||
|
|
||||||
|
Contribuidores
|
||||||
|
==============
|
||||||
|
|
||||||
|
* Criptomart
|
||||||
|
|
||||||
|
Créditos
|
||||||
|
========
|
||||||
|
|
||||||
|
Autor
|
||||||
|
-----
|
||||||
|
|
||||||
|
* Criptomart
|
||||||
0
web_checkbox_contrast/__init__.py
Normal file
0
web_checkbox_contrast/__init__.py
Normal file
18
web_checkbox_contrast/__manifest__.py
Normal file
18
web_checkbox_contrast/__manifest__.py
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
# Copyright 2026 Criptomart
|
||||||
|
# License AGPL-3.0 or later (http://www.gnu.org/licenses/agpl).
|
||||||
|
{ # noqa: B018
|
||||||
|
"name": "Web Checkbox Contrast",
|
||||||
|
"version": "18.0.1.0.0",
|
||||||
|
"category": "Technical",
|
||||||
|
"summary": "Visible border on unchecked backend checkboxes, radios and switches",
|
||||||
|
"author": "Odoo Community Association (OCA), Criptomart",
|
||||||
|
"maintainers": ["Criptomart"],
|
||||||
|
"website": "https://git.criptomart.net/criptomart/addons-cm",
|
||||||
|
"license": "AGPL-3",
|
||||||
|
"depends": ["web"],
|
||||||
|
"assets": {
|
||||||
|
"web.assets_backend": [
|
||||||
|
"web_checkbox_contrast/static/src/css/web_checkbox_contrast.css",
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
8
web_checkbox_contrast/readme/CONFIGURE.rst
Normal file
8
web_checkbox_contrast/readme/CONFIGURE.rst
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
Configuración
|
||||||
|
=============
|
||||||
|
|
||||||
|
No requiere configuración. El efecto se aplica al instalar el módulo y
|
||||||
|
desaparece al desinstalarlo.
|
||||||
|
|
||||||
|
Para cambiar la intensidad del borde, edita los dos valores de
|
||||||
|
``--border-color`` en ``static/src/css/web_checkbox_contrast.css``.
|
||||||
4
web_checkbox_contrast/readme/CONTRIBUTORS.rst
Normal file
4
web_checkbox_contrast/readme/CONTRIBUTORS.rst
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
Contribuidores
|
||||||
|
==============
|
||||||
|
|
||||||
|
* Criptomart
|
||||||
7
web_checkbox_contrast/readme/CREDITS.rst
Normal file
7
web_checkbox_contrast/readme/CREDITS.rst
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
Créditos
|
||||||
|
========
|
||||||
|
|
||||||
|
Autor
|
||||||
|
-----
|
||||||
|
|
||||||
|
* Criptomart
|
||||||
28
web_checkbox_contrast/readme/DESCRIPTION.rst
Normal file
28
web_checkbox_contrast/readme/DESCRIPTION.rst
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
Oscurece el borde de las casillas de verificación, los botones de opción y los
|
||||||
|
interruptores **sin marcar** en todo el backend de Odoo.
|
||||||
|
|
||||||
|
En Odoo 18 ese borde se pinta con el gris claro de los separadores
|
||||||
|
(``--border-color``, ``#dee2e6``), que sobre fondo blanco da un contraste de
|
||||||
|
1,3:1: una casilla sin marcar casi no se ve, y menos aún en un campo de sólo
|
||||||
|
lectura o en una celda de lista, que Odoo atenúa además al 50 %. WCAG 1.4.11
|
||||||
|
pide 3:1 para el contorno de un control.
|
||||||
|
|
||||||
|
Con el módulo instalado:
|
||||||
|
|
||||||
|
* casilla editable sin marcar: gris ``--gray-600``, contraste 4,7:1;
|
||||||
|
* casilla de sólo lectura sin marcar: ``--gray-900`` atenuado al 50 %, 3,1:1.
|
||||||
|
|
||||||
|
Los estados marcado, indeterminado, foco y hover conservan los colores de Odoo.
|
||||||
|
|
||||||
|
El alcance global es intencionado: es justamente lo que hace este módulo. Es un
|
||||||
|
módulo de sólo CSS: no define modelos, campos ni vistas. Para volver al aspecto
|
||||||
|
estándar de Odoo basta con desinstalarlo.
|
||||||
|
|
||||||
|
Sólo afecta al backend (``web.assets_backend``): ni el sitio web, ni el portal,
|
||||||
|
ni el TPV cambian.
|
||||||
|
|
||||||
|
Nota técnica: no se sobrescribe ``border-color`` sino la propiedad
|
||||||
|
personalizada ``--border-color`` sobre el propio ``.form-check-input``.
|
||||||
|
Bootstrap sólo la lee en el ``border`` base del control; el resto de estados
|
||||||
|
fijan ``border-color`` de forma explícita, así que ganan siempre, sin depender
|
||||||
|
de la especificidad ni del orden de carga de los assets.
|
||||||
11
web_checkbox_contrast/readme/INSTALL.rst
Normal file
11
web_checkbox_contrast/readme/INSTALL.rst
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
Instalación
|
||||||
|
===========
|
||||||
|
|
||||||
|
Instalar el módulo:
|
||||||
|
|
||||||
|
::
|
||||||
|
|
||||||
|
docker-compose run --rm odoo odoo -d odoo --stop-after-init -i web_checkbox_contrast
|
||||||
|
|
||||||
|
No tiene más dependencias que ``web``, así que se puede instalar y desinstalar
|
||||||
|
en cualquier momento sin afectar a datos.
|
||||||
6
web_checkbox_contrast/readme/USAGE.rst
Normal file
6
web_checkbox_contrast/readme/USAGE.rst
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
Uso
|
||||||
|
===
|
||||||
|
|
||||||
|
No hay nada que usar: una vez instalado, cualquier casilla, botón de opción o
|
||||||
|
interruptor sin marcar del backend (formularios, columnas booleanas de las
|
||||||
|
listas, ajustes, filtros...) muestra un borde bien visible.
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
/* Visible border on the unchecked checkboxes, radios and switches of the backend.
|
||||||
|
*
|
||||||
|
* Stock Odoo 18 draws them with `var(--border-color)` (gray-300), a 1.3:1
|
||||||
|
* contrast on white: an unchecked box is close to invisible. WCAG 1.4.11 asks
|
||||||
|
* for 3:1 on the boundary of a control.
|
||||||
|
*
|
||||||
|
* Only the custom property is redefined, on the input itself. Bootstrap reads it
|
||||||
|
* in a single place, the base `border` of `.form-check-input`; the checked,
|
||||||
|
* indeterminate, focus, hover and validation states all set `border-color`
|
||||||
|
* explicitly, so they keep their stock colour whatever the load order.
|
||||||
|
*
|
||||||
|
* The reach is global on purpose: that is what this addon is for. Uninstall it
|
||||||
|
* to get the stock Odoo look back.
|
||||||
|
*/
|
||||||
|
|
||||||
|
/* gray-600 on white: 4.7:1 */
|
||||||
|
.form-check-input {
|
||||||
|
--border-color: var(--gray-600, #6c757d);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Readonly fields and list cells are disabled inputs, dimmed to 50% opacity by
|
||||||
|
* Odoo: gray-900 is what it takes to still land on 3:1 after the dimming. */
|
||||||
|
.form-check-input:disabled {
|
||||||
|
--border-color: var(--gray-900, #212529);
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue