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

[REF] web, *: BS4, use custom BS4 checkbox everywhere

Browse Source 
Before this commit, Odoo used checkboxes in three different ways:

- A simple <input type="checkbox"/>, mainly in the frontend. The style
  is browser dependant.

- Same as above but with the BS3, checkbox structure. The style is still
  the same, but the alignement is supposed to be better (which is not
  always the case).

- The Odoo official structure:
	```
	<div class="o_checkbox">
	    <input type="checkbox"/>
	    <span/>
	</div>
	```
  which allows to have a cross-browser checkbox style and correct
  alignements.

The goal after this commit is to only use the BS4 *custom* checkbox
structure to achieve the same goal as our official structure (and
remove that one):

```
<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">...</label>
</div>
```

/!\ Labels are now required (use a zero-width space if necessary)
This commit is contained in:
qsm-odoo
2018-07-27 12:36:54 +02:00
parent 6e223b9273
commit f4fbaf1efa
22 changed files with 192 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/tests/fields/basic_fields_tests.js
+22 -22
View File
@@ -233,12 +233,12 @@ QUnit.module('basic_fields', {
"checkbox should now be unchecked");
// check the checkbox by clicking on label
form.$('label').click();
form.$('label:first').click();
assert.strictEqual(form.$('.o_field_boolean input:checked').length, 1,
"checkbox should now be checked");
// uncheck it back
form.$('label').click();
form.$('label:first').click();
assert.strictEqual(form.$('.o_field_boolean input:checked').length, 0,
"checkbox should now be unchecked");
@@ -273,52 +273,52 @@ QUnit.module('basic_fields', {
arch: '<tree editable="bottom"><field name="bar"/></tree>',
});
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .o_checkbox input').length, 5,
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input').length, 5,
"should have 5 checkboxes");
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .o_checkbox input:checked').length, 4,
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input:checked').length, 4,
"should have 4 checked input");
// Edit a line
var $cell = list.$('tr.o_data_row:has(.o_checkbox input:checked) td:not(.o_list_record_selector)').first();
assert.ok($cell.find('.o_checkbox input:checked').prop('disabled'),
var $cell = list.$('tr.o_data_row:has(.custom-checkbox input:checked) td:not(.o_list_record_selector)').first();
assert.ok($cell.find('.custom-checkbox input:checked').prop('disabled'),
"input should be disabled in readonly mode");
$cell.click();
assert.ok(!$cell.find('.o_checkbox input:checked').prop('disabled'),
assert.ok(!$cell.find('.custom-checkbox input:checked').prop('disabled'),
"input should not have the disabled property in edit mode");
$cell.find('.o_checkbox input:checked').click();
$cell.find('.custom-checkbox input:checked').click();
// save
list.$buttons.find('.o_list_button_save').click();
$cell = list.$('tr.o_data_row:has(.o_checkbox input:not(:checked)) td:not(.o_list_record_selector)').first();
assert.ok($cell.find('.o_checkbox input:not(:checked)').prop('disabled'),
$cell = list.$('tr.o_data_row:has(.custom-checkbox input:not(:checked)) td:not(.o_list_record_selector)').first();
assert.ok($cell.find('.custom-checkbox input:not(:checked)').prop('disabled'),
"input should be disabled again");
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .o_checkbox input').length, 5,
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input').length, 5,
"should still have 5 checkboxes");
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .o_checkbox input:checked').length, 3,
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input:checked').length, 3,
"should now have only 3 checked input");
// Re-Edit the line and fake-check the checkbox
$cell.click();
$cell.find('.o_checkbox input').click(); // Change the checkbox
$cell.find('.o_checkbox input').click(); // Undo the change
$cell.find('.custom-checkbox input').click(); // Change the checkbox
$cell.find('.custom-checkbox input').click(); // Undo the change
// Save
list.$buttons.find('.o_list_button_save').click();
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .o_checkbox input').length, 5,
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input').length, 5,
"should still have 5 checkboxes");
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .o_checkbox input:checked').length, 3,
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input:checked').length, 3,
"should still have only 3 checked input");
// Re-Edit the line to check the checkbox back but this time click on
// the checkbox directly in readonly mode !
$cell = list.$('tr.o_data_row:has(.o_checkbox input:not(:checked)) td:not(.o_list_record_selector)').first();
$cell.find('.o_checkbox span').click();
$cell = list.$('tr.o_data_row:has(.custom-checkbox input:not(:checked)) td:not(.o_list_record_selector)').first();
$cell.find('.custom-checkbox .custom-control-label').click();
// save
list.$buttons.find('.o_form_button_save').click();
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .o_checkbox input').length, 5,
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input').length, 5,
"should still have 5 checkboxes");
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .o_checkbox input:checked').length, 4,
assert.strictEqual(list.$('tbody td:not(.o_list_record_selector) .custom-checkbox input:checked').length, 4,
"should now have 4 checked input back");
list.destroy();
});
@@ -370,8 +370,8 @@ QUnit.module('basic_fields', {
res_id: 2,
});
assert.strictEqual(form.$(".o_checkbox.o_boolean_toggle").length, 1, "Boolean toggle widget applied to boolean field");
assert.strictEqual(form.$(".o_checkbox.o_boolean_toggle").find(".slider").length, 1, "Boolean toggle contains slider to toggle");
assert.strictEqual(form.$(".custom-checkbox.o_boolean_toggle").length, 1, "Boolean toggle widget applied to boolean field");
assert.strictEqual(form.$(".custom-checkbox.o_boolean_toggle").find(".slider").length, 1, "Boolean toggle contains slider to toggle");
form.destroy();
});