From df1d279cbcf5ac8b44a1baf458fc83dcda3caae8 Mon Sep 17 00:00:00 2001
From: Adrien Dieudonne <adr@odoo.com>
Date: Fri, 15 Jan 2021 15:26:27 +0000
Subject: [PATCH] [IMP] web: form: checkbox with optional field on mobile

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
---
 addons/web/static/src/scss/form_view.scss     | 31 +++++++++++++++----
 .../web/static/src/scss/form_view_extra.scss  | 10 ++++--
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss
index 4f0810c0ad2..8b20a0c7927 100644
--- a/addons/web/static/src/scss/form_view.scss
+++ b/addons/web/static/src/scss/form_view.scss
@@ -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 {
diff --git a/addons/web/static/src/scss/form_view_extra.scss b/addons/web/static/src/scss/form_view_extra.scss
index f6b8b2fa095..4260cf6a40f 100644
--- a/addons/web/static/src/scss/form_view_extra.scss
+++ b/addons/web/static/src/scss/form_view_extra.scss
@@ -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