[FIX] web: ListRenderer hover & focus states

Since Bootstrap 5.1 cell background color is controlled by CSS variables
in order to effectively handle mixed scenarios (eg. "selected + :hover +
table-info" combined).

Commit https://github.com/odoo/odoo/commit/1d4145dfda1f8a95c3f386ae01fb0e29ddd4be48 forced bg-colors for :hover and :focus states, achieving the
desired result in a simple scenario but inadvertently breaking the
behavior for complex combination and/or different color schemes
(eg. dark-mode).

This commit restore the default BS mechanics for `:hover`, and uses BS
variables to handle `:focus`.

task-3012970

closes odoo/odoo#103118

X-original-commit: 1978a5bfa08a534487d7a70921105f8b5c3a5d30
Related: odoo/enterprise#32740
Signed-off-by: Pierre Paridans (app) <app@odoo.com>
This commit is contained in:
stefanorigano (SRI)
2022-10-12 11:29:55 +02:00
parent 8acfa3c3c5
commit feb4b8c2ad
3 changed files with 7 additions and 9 deletions
+1 -1
View File
@@ -139,7 +139,7 @@ $headings-color: $o-main-headings-color !default;
$table-striped-color: inherit !default;
$table-striped-bg-factor: .01 !default;
$table-hover-bg-factor: .075 !default;
$table-hover-bg-factor: .055 !default;
$table-border-color: $gray-200 !default;
$table-group-separator-color: $gray-200 !default;
$table-cell-padding-x: .75rem !default;
@@ -394,13 +394,11 @@
// 1. we set the global separator (gray line) of the table on the row (bottom) and not on the cell (bottom)
.o_data_row {
border-bottom-width: 1px;
&:not(.o_selected_row) {
&:focus-within {
background-color: lighten($o-form-lightsecondary, 10%);
}
&:hover {
background-color: lighten($o-form-lightsecondary, 16%);
}
&:not(.o_selected_row):not(.o_data_row_selected):focus-within > * {
$-focus-bg: mix($table-color, $table-bg, percentage($table-hover-bg-factor + 0.1));
--#{$variable-prefix}table-accent-bg: #{$-focus-bg};
}
}
@@ -12,7 +12,7 @@
<t t-if="showNoContentHelper" t-call="web.ActionHelper">
<t t-set="noContentHelp" t-value="props.noContentHelp"/>
</t>
<table t-if="showTable" t-attf-class="o_list_table table table-sm position-relative mb-0 {{props.list.isGrouped ? 'o_list_table_grouped' : 'o_list_table_ungrouped table-striped'}}" t-ref="table">
<table t-if="showTable" t-attf-class="o_list_table table table-sm table-hover position-relative mb-0 {{props.list.isGrouped ? 'o_list_table_grouped' : 'o_list_table_ungrouped table-striped'}}" t-ref="table">
<thead>
<tr>
<th t-if="hasSelectors" class="o_list_record_selector o_list_controller align-middle pe-1 cursor-pointer" tabindex="-1" t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)" t-on-click.stop="toggleSelection">