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

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)

1 files changed, 20 insertions, 13 deletions

diff --git a/addons/web/static/src/xml/web_calendar.xml b/addons/web/static/src/xml/web_calendar.xml
index b406e03d760..85b7a168e49 100644
--- a/addons/web/static/src/xml/web_calendar.xml
+++ b/addons/web/static/src/xml/web_calendar.xml
@@ -40,22 +40,29 @@
             <h3 t-if="widget.title"><t t-esc="widget.title"/></h3>
             <div class="o_calendar_filter_items">
                 <div t-foreach="widget.filters" t-as="filter" t-if="filter.display == null || filter.display" class="o_calendar_filter_item" t-att-data-value="filter.value" t-att-data-id="filter.id">
-                    <div class="o_checkbox">
-                        <input type="checkbox" name="selection" t-att-checked="(filter.active ? true : undefined)"/><span/>
+                    <div class="custom-control custom-checkbox">
+                        <input type="checkbox"
+                            t-attf-id="o_calendar_filter_item_#{filter_index}"
+                            name="selection"
+                            class="custom-control-input"
+                            t-att-checked="(filter.active ? true : undefined)"/>
+                        <label t-attf-for="o_calendar_filter_item_#{filter_index}"
+                            class="custom-control-label">
+                            <t t-if="filter.value == 'all'">
+                                <span><i class="fa fa-users fa-fw o_cal_avatar" role="img" aria-label="Avatar" title="Avatar"/></span>
+                            </t>
+                            <t t-if="widget.avatar_field &amp;&amp; (filter.value != 'all')">
+                                <img t-attf-src="/web/image/#{widget.avatar_model}/#{filter.value}/#{widget.avatar_field}" class="o_cal_avatar" alt="Avatar"/>
+                            </t>
+                            <t t-set="color" t-value="widget.getColor(filter.color_index)"/>
+                            <span t-if="typeof color === 'number'" t-attf-class="color_filter o_underline_color_#{widget.getColor(filter.color_index)}"><t t-esc="filter.label"/></span>
+                            <span t-elif="color" t-attf-style="border-bottom: 4px solid #{color};"><t t-esc="filter.label"/></span>
+                            <span t-else=""><t t-esc="filter.label"/></span>
+                        </label>
                     </div>
-                    <t t-if="filter.value == 'all'">
-                        <span><i class="fa fa-users fa-fw o_cal_avatar" role="img" aria-label="Avatar" title="Avatar"/></span>
-                    </t>
-                    <t t-if="widget.avatar_field &amp;&amp; (filter.value != 'all')">
-                        <img t-attf-src="/web/image/#{widget.avatar_model}/#{filter.value}/#{widget.avatar_field}" class="o_cal_avatar" alt="Avatar"/>
-                    </t>
-                    <t t-set="color" t-value="widget.getColor(filter.color_index)"/>
-                    <span t-if="typeof color === 'number'" t-attf-class="color_filter o_underline_color_#{widget.getColor(filter.color_index)}"><t t-esc="filter.label"/></span>
-                    <span t-elif="color" t-attf-style="border-bottom: 4px solid #{color};"><t t-esc="filter.label"/></span>
-                    <span t-else=""><t t-esc="filter.label"/></span>
                     <t t-if="filter.id">
                         <span class="o_remove fa fa-times" title="Remove this favorite from the list" role="img" aria-label="Remove this favorite from the list"/>
-                   </t>
+                    </t>
                 </div>
             </div>
         </div>