[REF] *: BS5: Migrate tables

- avoid black border in table of BS5

In BS5 there is a new rule:
```css
.table > :not(:first-child) {
    border-top: 2px solid currentColor;
}
```
This rule generate unwanted border in our visual, so we change the color
to the old one we have in BS4 and in some case set the `border-top` to
´none´.

PS: another solution is to use the `table-borderless` class, but then
we have `tr` flickering for the height in list view (edit mode).

- table background-color :
  * BS4:
  the background color is set with the `background-color` property
  * BS5:
  it's set with a box shadow and the `--table-accent-bg` CSS variable

Task ID: 2766483

Part-of: odoo/odoo#95450
This commit is contained in:
Romeo Fragomeli
2022-07-07 13:30:19 +02:00
parent 9ea1351334
commit 68a3bd651f
9 changed files with 18 additions and 16 deletions
+1 -1
View File
@@ -84,7 +84,7 @@
<div t-name="mail.ActivityRenderer" class="o_activity_view" owl="1">
<t t-if="!props.activity_types.length" t-call="web.NoContentHelper"/>
<table t-else="" class="table-bordered mb-5">
<table t-else="" class="table table-bordered mb-5">
<t t-call="mail.ActivityViewHeader"/>
<t t-call="mail.ActivityViewBody"/>
<t t-call="mail.ActivityViewFooter"/>
+5 -5
View File
@@ -553,14 +553,14 @@
<template id="question_matrix" name="Question: matrix">
<t t-set="comment_line" t-value="answer_lines.filtered(lambda line: line.value_char_box)"/>
<table class="table table-hover o_survey_question_matrix text-white text-center mb-0"
<table class="table table-borderless o_survey_question_matrix text-white text-center mb-0"
t-att-data-name="question.id"
t-att-data-question-type="question.question_type"
t-att-data-sub-questions="question.matrix_row_ids.ids">
<thead>
<tr>
<th class="border-0"> </th>
<th class="border-0 font-weight-normal" t-foreach="question.suggested_answer_ids" t-as="col_label"><span t-field="col_label.value" /></th>
<th> </th>
<th class="font-weight-normal" t-foreach="question.suggested_answer_ids" t-as="col_label"><span t-field="col_label.value" /></th>
</tr>
</thead>
<tbody>
@@ -568,10 +568,10 @@
<!-- For matrix, we have an extra check because we have rows * columns total options -->
<t t-set="useKeySelection" t-value="useKeySelection and (len(question.suggested_answer_ids) * len(question.matrix_row_ids)) &lt; len(letters)" />
<tr class="bg-white text-white" t-foreach="question.matrix_row_ids" t-as="row_label" t-att-id="row_label.id">
<th class="border-0 font-weight-normal text-left"><span t-field="row_label.value" /></th>
<th class="font-weight-normal text-left"><span t-field="row_label.value" /></th>
<t t-foreach="question.suggested_answer_ids" t-as="col_label">
<t t-set="answer" t-value="answer_lines.filtered(lambda line: line.suggested_answer_id == col_label and line.matrix_row_id == row_label)"/>
<td t-att-class="'o_survey_matrix_btn text-primary border-0 position-relative %s'
<td t-att-class="'o_survey_matrix_btn text-primary position-relative %s'
% ('o_survey_selected' if answer else '')">
<input t-att-type="'checkbox' if question.matrix_subtype == 'multiple' else 'radio'"
t-att-name="'%s_%s' % (question.id, row_label.id)" t-att-value='col_label.id'
@@ -112,6 +112,7 @@ $headings-color: $o-main-headings-color !default;
$table-accent-bg: rgba($black, .01) !default;
$table-hover-bg: rgba($black, .04) !default;
$table-border-color: $gray-200 !default;
$table-group-separator-color: $gray-200 !default;
// Buttons
//
@@ -346,6 +346,7 @@
}
.o_optional_columns_dropdown_toggle {
border-top: none;
cursor: pointer;
padding: 0 5px;
text-align: center;
@@ -3,7 +3,7 @@
<t t-name="web.GraphRenderer.CustomTooltip" owl="1">
<div class="o_graph_custom_tooltip popover show p-2 o_debounce_disabled mw-100">
<table class="table table-sm overflow-hidden m-0">
<table class="table table-borderless table-sm overflow-hidden m-0">
<thead>
<tr>
<th class="o_measure align-baseline border-0" t-esc="measure" />
@@ -5,7 +5,7 @@
<div class="o_pivot table-responsive">
<table
class="table-hover table table-sm table-bordered bg-white"
class="table-hover table table-sm table-bordered table-borderless bg-white"
t-att-class="{
o_enable_linking: !model.metaData.disableLinking,
o_sample_data_disabled: model.useSampleModel,
@@ -119,11 +119,11 @@ $o-wsale-products-layout-grid-gutter-width: min($grid-gutter-width / 2, $o-wsale
}
}
.table-striped tbody tr:nth-of-type(even) {
background-color: rgba(0, 0, 0, 0.025);
.table-striped tbody tr td:nth-of-type(even) {
--table-accent-bg: rgba(0, 0, 0, 0.025);
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0);
.table-striped tbody tr td:nth-of-type(odd) {
--table-accent-bg: rgba(0, 0, 0, 0);
}
*:not(#product_attributes_simple) > .table-sm tbody td {
padding-top: 0.75rem;
+2 -2
View File
@@ -1880,8 +1880,8 @@
</td>
</tr>
<tr id="order_total">
<td class="text-right"><strong>Total:</strong></td>
<td class="text-xl-right">
<td class="text-right border-top border-bottom-0"><strong>Total:</strong></td>
<td class="text-xl-right border-top border-bottom-0">
<strong t-field="website_sale_order.amount_total" class="monetary_field"
t-options='{"widget": "monetary", "display_currency": website_sale_order.pricelist_id.currency_id}'/>
</td>
+2 -2
View File
@@ -108,10 +108,10 @@ SCSS_TEST = '''
.o_content > .o_list_view > .table-responsive > .table {
// List views always have the table-sm class, maybe we should remove
// it (and consider it does not exist) and change the default table paddings
@include o-list-view-full-width-padding($base: $table-cell-padding-sm, $ratio: 2);
@include o-list-view-full-width-padding($base-x: $table-cell-padding-x-sm, $base-y: $table-cell-padding-y-sm, $ratio: 2);
&:not(.o_list_table_grouped) {
@include media-breakpoint-up(xl) {
@include o-list-view-full-width-padding($base: $table-cell-padding-sm, $ratio: 2.5);
@include o-list-view-full-width-padding($base-x: $table-cell-padding-x-sm, $base-y: $table-cell-padding-y-sm, $ratio: 2.5);
}
}