[IMP] web: improve renderCheckbox to be re-usable in front end

Before this commit, the label was into a display block that add a return line
between the cehckbox and the label.

It was not visible in backend, because label by defaut is displayed without
renderCheckbox. (no options.text provided)

Now renderCheckbox render correctly with the same code in frontend and backend

3 files changed, 20 insertions, 11 deletions

diff --git a/addons/web/static/src/js/core/dom.js b/addons/web/static/src/js/core/dom.js
index 6ca13f18e4e..da125aa72af 100644
--- a/addons/web/static/src/js/core/dom.js
+++ b/addons/web/static/src/js/core/dom.js
@@ -265,19 +265,19 @@ return {
      * @returns {jQuery}
      */
     renderCheckbox: function (options) {
-        var $container = $('<div class="o_checkbox"><input type="checkbox"/><span/></div>');
+        var $container = $('<div class="checkbox o_checkbox"><label><input type="checkbox"/><span/></label></div>');
         if (options && options.prop) {
-            $container.children('input').prop(options.prop);
+            $container.find('input').prop(options.prop);
         }
         if (options && options.text) {
-            $container = $('<label/>').append(
-                $container,
+            $container.find('label').append(
                 $('<span/>', {
-                    class: 'ml8',
                     text: options.text,
+                    class: 'o_checkbox_label',
                 })
             );
         }
+
         return $container;
     },
     /**
diff --git a/addons/web/static/src/less/webclient_extra.less b/addons/web/static/src/less/webclient_extra.less
index 7c337352618..2f4e03e9479 100644
--- a/addons/web/static/src/less/webclient_extra.less
+++ b/addons/web/static/src/less/webclient_extra.less
@@ -4,8 +4,17 @@
 div.o_checkbox {
     display: inline-block;
     vertical-align: sub;
-    > input + span {
-        display: none;
+    margin-top: 0px;
+    margin-bottom: 0px;
+    input[type="checkbox"] {
+        position: inherit;
+        margin-left: 0;
+    }
+    > label {
+        padding-left: 0px;
+        > input + span {
+            display: none;
+        }
     }
 }
 
diff --git a/addons/web/static/tests/views/form_tests.js b/addons/web/static/tests/views/form_tests.js
index 6a3fdb0fbea..16370559aad 100644
--- a/addons/web/static/tests/views/form_tests.js
+++ b/addons/web/static/tests/views/form_tests.js
@@ -1741,10 +1741,10 @@ QUnit.module('Views', {
             res_id: 1,
         });
 
-        assert.strictEqual(form.$("label").length, 2, "should have rendered only two label");
-        assert.strictEqual(form.$("label").first().text(), "Product",
+        assert.strictEqual(form.$("label:not(.o_checkbox label)").length, 2, "should have rendered only two label");
+        assert.strictEqual(form.$("label:not(.o_checkbox label)").first().text(), "Product",
             "one should be the one for the product field");
-        assert.strictEqual(form.$("label").eq(1).text(), "Bar",
+        assert.strictEqual(form.$("label:not(.o_checkbox label)").eq(1).text(), "Bar",
             "one should be the one for the bar field");
 
         assert.strictEqual(form.$('.firstgroup td').first().attr('colspan'), undefined,
@@ -3787,7 +3787,7 @@ QUnit.module('Views', {
             "button box should contain two children");
         assert.strictEqual(form.$('.oe_button_box .oe_stat_button').length, 1,
             "button box should only contain one button");
-        assert.strictEqual(form.$('.oe_button_box label').length, 1,
+        assert.strictEqual(form.$('.oe_button_box label:not(.o_checkbox label)').length, 1,
             "button box should only contain one label");
 
         form.destroy();