[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:
+1
-1
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user