pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] web: form: checkbox with optional field on mobile

Browse Source 
This commit adds a class to be able to show/hide
other fields depending on a checkbox status.

This class is needed to have this behavior on desktop but also
on mobile.

Related task-ID: 1929043
This commit is contained in:
Adrien Dieudonne
2021-02-16 09:41:12 +00:00
parent 21e2676b7a
commit df1d279cbc
2 changed files with 33 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/scss/form_view.scss
+25 -6
View File
@@ -23,12 +23,18 @@
margin-right: -$o-horizontal-padding*2;
}
}
@mixin o-form-nosheet-negative-margin {
margin-left: -$o-horizontal-padding;
margin-right: -$o-horizontal-padding;
}
@mixin o-td-label-style {
width: 0%;
padding: 0 15px 0 0;
min-width: 150px;
}
$o-form-label-margin-right: 0px;
.o_form_view {
background-color: $o-view-background-color;
@@ -546,9 +552,7 @@
> tbody > tr > td {
&.o_td_label {
width: 0%;
padding: 0 15px 0 0;
min-width: 150px;
@include o-td-label-style;
}
vertical-align: top;
@@ -590,7 +594,22 @@
.o_td_label .o_form_label {
font-weight: bold;
margin-right: 0px;
margin-right: $o-form-label-margin-right;
}
}
.o_checkbox_optional_field {
display: flex;
@include media-breakpoint-down(sm) {
flex-wrap: wrap;
justify-content: space-between;
}
> .o_form_label {
@include o-td-label-style;
margin-right: $o-form-label-margin-right;
font-weight: bold;
}
}
@@ -630,7 +649,7 @@
margin-bottom: 0px;
}
}
td.o_td_label .o_form_label:not(.o_status) {
.o_td_label .o_form_label:not(.o_status), .o_checkbox_optional_field > .o_form_label {
min-height: 33px;
}
td:not(.o_field_cell) .o_form_uri > span:first-child {
addons/web/static/src/scss/form_view_extra.scss
+8 -2
View File
@@ -1,3 +1,5 @@
$o-td-label-padding-right: 8px;
.o_form_view {
$sheet-min-width: 650px;
$sheet-padding: 16px;
@@ -60,12 +62,16 @@
// Groups
.o_group {
.o_td_label {
.o_td_label, .o_checkbox_optional_field > .o_form_label {
border-right: 1px solid #ddd;
}
.o_td_label + td {
padding: 0px 36px 0px 8px;
padding: 0px 36px 0px $o-td-label-padding-right;
}
.o_checkbox_optional_field > .o_form_label {
margin-right: $o-td-label-padding-right;
}
.o_field_widget.o_text_overflow {
width: 1px!important; // hack to make the table layout believe it is a small element (so that the table does not grow too much) ...
min-width: 100%; // ... but in fact it takes the whole table space