[FIX] web: checkboxes design & consistency

The main objective of this commit is to make checkboxes consistent
and fix their spacing issues.

Prior to these changes, the checkboxes on the `product_view` were
too close to their neighboring option labels, making it difficult to
know which checkbox to tick.

The new changes fixes inconsistencies in general such as undesired
hovering effects and the cursor behaviors on disabled inputs.

This commit also removes the margin in the checkbox template since the
padding from the checkbox wrapper compensates for the spacing between
the checkboxes and their respective labels.

Tweaking the selector in `settings_form_view.scss` to ignore boolean
field inputs allows us to get rid of max-width and margin overrides
introduced in commit b90059e.

Most checkboxes were already falling under their labels on mobile, but
this change impacted those that were not. To address this issue, we
decided to consistently change the position of the checkboxes left to
their labels for small devices in form view.
This required slight adjustments to the `form_group.xml` template.

Still in form_view, for some of the specific checkboxes such as
`o_checkbox_optional_field` the changes in `form_controller.scss` are
made to mimic the new behavior for mobile sized screen.

However, if they are using the form_group template, their behavior
is unchanged at the moment.

Finally, even if these changes makes it better for most of them, some
checkboxes in `settings` still require some minor adjustments and will
be addressed in task-3113372.

task-3094083

closes odoo#107520

Related: odoo/enterprise#37773
Signed-off-by: Adrien Dieudonné (adr) <adr@odoo.com>

Author: mano-odoo

addons/product/views/product_views.xml

@@ -48,12 +48,6 @@
                             </div>
                         </h1>
                     </div>
-                    <style>
-                        div[name="options"] .o_field_boolean > div {
-                            margin-left: 10px;
-                            margin-right: 0px;
-                        }
-                    </style>
                     <div name="options">
                         <span class="d-inline-block">
                             <field name="sale_ok"/>

addons/web/static/src/legacy/scss/utils.scss

@@ -147,14 +147,12 @@
 
 @mixin o-field-pointer() {
     // Force `pointer`cursor on  inputs and labels
-    &:not(:disabled):not(.disabled) {
-        &, input, label {
-            cursor: pointer;
-        }
+    .form-check-input:not(:disabled), .form-check-input:not(:disabled) + label {
+        cursor: pointer;
+    }
 
-        &:hover, &:hover .form-check-input {
-            border-color: $form-check-input-checked-border-color;
-        }
+    &:hover, &:hover .form-check-input:not(:disabled) {
+        border-color: $form-check-input-checked-border-color;
     }
 }
 

addons/web/static/src/views/fields/boolean/boolean_field.xml

@@ -2,7 +2,7 @@
 <templates xml:space="preserve">
 
     <t t-name="web.BooleanField" owl="1">
-        <CheckBox id="props.id" value="props.value or false" className="'d-inline-block me-2'" disabled="isReadonly" onChange.bind="onChange" />
+        <CheckBox id="props.id" value="props.value or false" className="'d-inline-block'" disabled="isReadonly" onChange.bind="onChange" />
     </t>
 
 </templates>

addons/web/static/src/views/form/form_controller.scss

@@ -42,9 +42,12 @@
             }
 
             .o_field_widget {
-                width: 100%;
                 margin-bottom: $o-form-spacing-unit * 2;
 
+                &:not(.o_field_boolean){
+                    width: 100%;
+                }
+
                 > .o_field_widget {
                     margin-bottom: 0;
                 }
@@ -487,9 +490,14 @@
     .o_checkbox_optional_field {
         display: flex;
 
-        @include media-breakpoint-down(md) {
+        @include media-breakpoint-down(sm) {
             flex-wrap: wrap;
-            justify-content: space-between;
+            .o_field_boolean {
+                order: -1;
+            }
+            .o_field_boolean + div {
+                width: 100%;
+            }
         }
 
         > .o_form_label {
@@ -863,11 +871,9 @@
         }
     }
 
-    // Boolean
-    .o_field_boolean {
-        margin-right: $o-form-spacing-unit;
-        max-width: 40px !important;
-        padding-right: 0 !important;
+    // Boolean 
+    .o_field_boolean + .o_form_label {
+        margin-right: $o-form-spacing-unit * 3;
     }
 
     // Timezone widget warning

addons/web/static/src/views/form/form_group/form_group.xml

@@ -39,15 +39,27 @@
 </t>
 
 <t t-name="web.Form.InnerGroup.ItemComponent" owl="1">
-    <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
-        <t t-component="cell.Component" t-if="cell.isVisible" t-props="cell.props"/>
-    </div>
-    <div
+    <t t-if="cell.props.fieldInfo.FieldComponent.name !== 'BooleanField'">
+        <div class="o_cell o_wrap_label flex-grow-1 flex-sm-grow-0 w-100 text-break text-900">
+            <t t-component="cell.Component" t-if="cell.isVisible" t-props="cell.props"/>
+        </div>
+        <div
         class="o_cell o_wrap_input flex-grow-1 flex-sm-grow-0"
-        t-attf-style="{{ cell.itemSpan -1 > 1 ? 'grid-column: span ' + (cell.itemSpan -1) + ';' : '' }}{{ cell.width ? 'width: ' + cell.width + '%' + ';' : '' }}"
-    >
-        <t t-slot="{{ cell.name }}" />
-    </div>
+        t-attf-style="{{ cell.itemSpan -1 > 1 ? 'grid-column: span ' + (cell.itemSpan -1) + ';' : '' }}{{ cell.width ? 'width: ' + cell.width + '%' + ';' : '' }}">
+            <t t-slot="{{ cell.name }}"/>
+        </div>
+    </t>
+    <t t-else="">
+        <div class="o_wrap_field_boolean d-flex flex-wrap d-sm-contents flex-sm-nowrap">
+            <div class="o_cell o_wrap_label flex-sm-grow-0 text-break text-900">
+                <t t-component="cell.Component" t-if="cell.isVisible" t-props="cell.props"/>
+            </div>
+            <div class="o_cell o_wrap_input order-first flex-sm-grow-0 order-sm-0"
+                t-attf-style="{{ cell.itemSpan -1 > 1 ? 'grid-column: span ' + (cell.itemSpan -1) + ';' : '' }}">
+                <t t-slot="{{ cell.name }}" />
+            </div>
+        </div>
+    </t>
 </t>
 
 </templates>

addons/web/static/src/webclient/settings_form_view/settings_form_view.scss

@@ -31,7 +31,7 @@
       width: 100%;
    }
 
-   .o_field_widget {
+   .o_field_widget:not(.o_field_boolean) {
       @include media-breakpoint-up(md) {
          width: 50%;
       }

addons/web/static/tests/views/form/form_view_tests.js

@@ -8548,7 +8548,7 @@ QUnit.module("Views", (hooks) => {
         // Verify .field_group content
         var $fieldGroupRows = $fieldGroup.find("> .o_wrap_field");
         assert.strictEqual($fieldGroupRows.length, 5, "there should be 5 rows in .o_wrap_field");
-        var $fieldGroupFirstRowTds = $fieldGroupRows.eq(0).children(".o_cell");
+        var $fieldGroupFirstRowTds = $fieldGroupRows.eq(0).find(".o_cell");
         assert.strictEqual(
             $fieldGroupFirstRowTds.length,
             2,
@@ -8580,7 +8580,7 @@ QUnit.module("Views", (hooks) => {
             "width: 33",
             "second cell colspan should be default one (no style) and be 33.3333%"
         );
-        var $fieldGroupThirdRowTds = $fieldGroupRows.eq(2).children(".o_cell"); // new row as label/field pair colspan is greater than remaining space
+        var $fieldGroupThirdRowTds = $fieldGroupRows.eq(2).find(".o_cell"); // new row as label/field pair colspan is greater than remaining space
         assert.strictEqual(
             $fieldGroupThirdRowTds.length,
             2,
@@ -8607,7 +8607,7 @@ QUnit.module("Views", (hooks) => {
             "grid-column: span 3;width: 100",
             "the cell should have a colspan equal to 3 and have 100% width"
         );
-        var $fieldGroupFifthRowTds = $fieldGroupRows.eq(4).children(".o_cell"); // label/field pair can be put after the 1-colspan span
+        var $fieldGroupFifthRowTds = $fieldGroupRows.eq(4).find(".o_cell"); // label/field pair can be put after the 1-colspan span
         assert.strictEqual(
             $fieldGroupFifthRowTds.length,
             3,
@@ -8796,7 +8796,7 @@ QUnit.module("Views", (hooks) => {
         );
         assert.containsN(
             target,
-            ".main_inner_group > .o_wrap_field:last > .o_wrap_label",
+            ".main_inner_group > .o_wrap_field:last .o_wrap_label",
             2,
             "there should be two labels in the second row"
         );