[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:
@@ -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"/>
|
||||
|
||||
@@ -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)) < 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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user