From c59380bac5bbd47bc7dcd92b38049af29a62c3d1 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Mon, 16 Jul 2018 16:48:59 +0200
Subject: [REF] *: BS4, rename btn-default to btn-secondary

BS4 "btn-default" class was replaced with "btn-secondary", which makes
more sense.
---
 addons/web/static/src/js/fields/relational_fields.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'addons/web/static/src/js/fields')

diff --git a/addons/web/static/src/js/fields/relational_fields.js b/addons/web/static/src/js/fields/relational_fields.js
index c1c458d1935..73bcc1f1f35 100644
--- a/addons/web/static/src/js/fields/relational_fields.js
+++ b/addons/web/static/src/js/fields/relational_fields.js
@@ -968,7 +968,7 @@ var FieldX2Many = AbstractField.extend({
     _renderButtons: function () {
         if (!this.isReadonly && this.view.arch.tag === 'kanban') {
             this.$buttons = $(qweb.render('KanbanView.buttons', {
-                btnClass: 'btn-default',
+                btnClass: 'btn-secondary',
                 create_text: this.nodeOptions.create_text,
             }));
             this.$buttons.on('click', 'button.o-kanban-button-new', this._onAddRecord.bind(this));
-- 
cgit v1.2.3


From 1c1c0897e8eca607c7f1b96b68a06c026c543e6a Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 14 Mar 2018 16:21:14 +0100
Subject: [REF] *: BS4, adapt dropdowns and carets

- The dropdown structure was simplified, allowing to get rid of the
  3-levels structure induced by <ul/> elements and dropdowns can now
  contain anything. The class 'dropdown-item' is now mandatory for
  each dropdown clickable element. The class 'dropdown-item-text' can
  be used to add same padding and style but without making the element
  have a clickable look.

- Dividers now use the class 'dropdown-divider'

- The way dropdowns are opened and hidden also changed (before the
  'open' class was added on the `.dropdown-menu` parent, now the
  'show' class is added on both the `.dropdown-menu` parent and the
  `.dropdown-menu` itself).

- JS-wise, no click event handlers can be put on `.dropdown-toggle`
  elements anymore (instead, use handlers for dropdown events).

- Carets are automatically put on `.dropdown-toggle` elements, so this
  commit replaces the `.caret` elements with this. This feature was
  possible to disable but would prevent us from adding a caret with
  scss. Also, this simplifies the DOM. The 'o-no-caret' class was also
  introduced to allow using the 'dropdown-toggle' class on non-caret
  elements.

- Also adapt the scss to use $caret-width instead of $caret-width-base
---
 addons/web/static/src/js/fields/basic_fields.js | 18 +++++++-----------
 1 file changed, 7 insertions(+), 11 deletions(-)

(limited to 'addons/web/static/src/js/fields')

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 51816220c9f..00092073d6a 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -1612,10 +1612,7 @@ var AttachmentImage = AbstractField.extend({
 var StateSelectionWidget = AbstractField.extend({
     template: 'FormSelection',
     events: {
-        'click a': function (e) {
-            e.preventDefault();
-        },
-        'click li': '_setSelection'
+        'click .dropdown-item': '_setSelection',
     },
     supportedFieldTypes: ['selection'],
 
@@ -1696,13 +1693,12 @@ var StateSelectionWidget = AbstractField.extend({
      * @param {MouseEvent} ev
      */
     _setSelection: function (ev) {
-        var li = $(ev.target).closest('li');
-        if (li.length) {
-            var value = String(li.data('value'));
-            this._setValue(value);
-            if (this.mode === 'edit') {
-                this._render();
-            }
+        ev.preventDefault();
+        var $item = $(ev.currentTarget);
+        var value = String($item.data('value'));
+        this._setValue(value);
+        if (this.mode === 'edit') {
+            this._render();
         }
     },
 });
-- 
cgit v1.2.3


From de214e37429213fe9f329ff3f11885fee3e271c4 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Thu, 15 Mar 2018 14:06:31 +0100
Subject: [REF] *: BS4, 'img-responsive' -> 'img-fluid'

---
 addons/web/static/src/js/fields/basic_fields.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'addons/web/static/src/js/fields')

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 00092073d6a..707a944a727 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -2691,7 +2691,7 @@ var ImageSelection = AbstractField.extend({
         _.each(this.nodeOptions, function (val, key) {
             var $container = $('<div>').addClass('col-xs-3 text-center');
             var $img = $('<img>')
-                .addClass('img img-responsive img-thumbnail ml16')
+                .addClass('img img-fluid img-thumbnail ml16')
                 .toggleClass('btn-info', key === self.value)
                 .attr('src', val.image_link)
                 .data('key', key);
-- 
cgit v1.2.3


From ed1b18f10348244ce26b8b27edbd59d91cee7772 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Wed, 16 May 2018 12:24:30 +0200
Subject: [REF] *: BS4, adapt col-related classes

col-lg-* -> col-xl-*
col-md-* -> col-lg-*
col-sm-* -> col-md-*
col-xs-* -> col-*

col-lg-offset-* -> offset-xl-*
col-md-offset-* -> offset-lg-*
col-sm-offset-* -> offset-md-*
col-xs-offset-* -> offset-*

col-lg-pull-* -> order-xl-1
col-md-pull-* -> order-lg-1
col-sm-pull-* -> order-md-1
col-xs-pull-* -> order-1

col-lg-push-* -> order-xl-2
col-md-push-* -> order-lg-2
col-sm-push-* -> order-md-2
col-xs-push-* -> order-2
---
 addons/web/static/src/js/fields/basic_fields.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'addons/web/static/src/js/fields')

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index 707a944a727..b48ea9022f9 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -2689,7 +2689,7 @@ var ImageSelection = AbstractField.extend({
         var self = this;
         this.$el.empty();
         _.each(this.nodeOptions, function (val, key) {
-            var $container = $('<div>').addClass('col-xs-3 text-center');
+            var $container = $('<div>').addClass('col-3 text-center');
             var $img = $('<img>')
                 .addClass('img img-fluid img-thumbnail ml16')
                 .toggleClass('btn-info', key === self.value)
-- 
cgit v1.2.3


From f4fbaf1efae11e8bd3b1a2938ab765d391764a1b Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Thu, 24 May 2018 16:56:42 +0200
Subject: [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)
---
 addons/web/static/src/js/fields/abstract_field.js    | 12 +++++++++---
 addons/web/static/src/js/fields/basic_fields.js      | 13 +++++++++++--
 addons/web/static/src/js/fields/relational_fields.js |  4 ++--
 3 files changed, 22 insertions(+), 7 deletions(-)

(limited to 'addons/web/static/src/js/fields')

diff --git a/addons/web/static/src/js/fields/abstract_field.js b/addons/web/static/src/js/fields/abstract_field.js
index eab0093ed50..7cf72791be5 100644
--- a/addons/web/static/src/js/fields/abstract_field.js
+++ b/addons/web/static/src/js/fields/abstract_field.js
@@ -304,7 +304,6 @@ var AbstractField = Widget.extend({
         this._reset(record, event);
         return this._render() || $.when();
     },
-
     /**
      * Remove the invalid class on a field
      */
@@ -312,7 +311,15 @@ var AbstractField = Widget.extend({
         this.$el.removeClass('o_field_invalid');
         this.$el.removeAttr('aria-invalid');
     },
-
+    /**
+     * Sets the given id on the focusable element of the field and as 'for'
+     * attribute of potential internal labels.
+     *
+     * @param {string} id
+     */
+    setIDForLabel: function (id) {
+        this.getFocusableElement().attr('id', id);
+    },
     /**
      * add the invalid class on a field
      */
@@ -320,7 +327,6 @@ var AbstractField = Widget.extend({
         this.$el.addClass('o_field_invalid');
         this.$el.attr('aria-invalid', 'true');
     },
-
     /**
      * Update the modifiers with the newest value.
      * Now this.attrs.modifiersValue can be used consistantly even with
diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index b48ea9022f9..edea04e0e48 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -701,8 +701,8 @@ var FieldBoolean = AbstractField.extend({
         // The formatValue of boolean fields renders HTML elements similar to
         // the one rendered by the widget itself. Even though the event might
         // have been fired on the non-widget version of this field, we can still
-        // test the presence of its o_checkbox class.
-        if (activated && options && options.event && $(options.event.target).parents('.o_checkbox').length) {
+        // test the presence of its custom class.
+        if (activated && options && options.event && $(options.event.target).closest('.custom-control.custom-checkbox').length) {
             this._setValue(!this.value);  // Toggle the checkbox
         }
         return activated;
@@ -737,6 +737,15 @@ var FieldBoolean = AbstractField.extend({
         }
         return rendered;
     },
+    /**
+     * Associates the 'for' attribute of the internal label.
+     *
+     * @override
+     */
+    setIDForLabel: function (id) {
+        this._super.apply(this, arguments);
+        this.$('.custom-control-label').attr('for', id);
+    },
 
     //--------------------------------------------------------------------------
     // Private
diff --git a/addons/web/static/src/js/fields/relational_fields.js b/addons/web/static/src/js/fields/relational_fields.js
index 73bcc1f1f35..ba83de415e7 100644
--- a/addons/web/static/src/js/fields/relational_fields.js
+++ b/addons/web/static/src/js/fields/relational_fields.js
@@ -1887,7 +1887,7 @@ var FormFieldMany2ManyTags = FieldMany2ManyTags.extend({
             this.$color_picker.dropdown('toggle');
             this.$color_picker.attr("tabindex", 1).focus();
             if (!tagColor) {
-                this.$('.o_checkbox input').prop('checked', true);
+                this.$('.custom-checkbox input').prop('checked', true);
             }
         }
     },
@@ -1909,7 +1909,7 @@ var FormFieldMany2ManyTags = FieldMany2ManyTags.extend({
         var changes = {};
 
         if ($target.is('.o_hide_in_kanban')) {
-            var $checkbox = $('.o_hide_in_kanban .o_checkbox input');
+            var $checkbox = $('.o_hide_in_kanban .custom-checkbox input');
             $checkbox.prop('checked', !$checkbox.prop('checked')); // toggle checkbox
             this.prevColors = this.prevColors ? this.prevColors : {};
             if ($checkbox.is(':checked')) {
-- 
cgit v1.2.3


From ee65b44d9e51f380e1b6978485e466b5720df215 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Fri, 25 May 2018 17:43:04 +0200
Subject: [REF] *: BS4, adapt the label component structure

The '.label' elements have been replaced by '.badge' elements without
the 'badge-pill' class.
---
 addons/web/static/src/js/fields/basic_fields.js   | 2 +-
 addons/web/static/src/js/fields/upgrade_fields.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'addons/web/static/src/js/fields')

diff --git a/addons/web/static/src/js/fields/basic_fields.js b/addons/web/static/src/js/fields/basic_fields.js
index edea04e0e48..bd13305df0c 100644
--- a/addons/web/static/src/js/fields/basic_fields.js
+++ b/addons/web/static/src/js/fields/basic_fields.js
@@ -1783,7 +1783,7 @@ var LabelSelection = AbstractField.extend({
     _render: function () {
         this.classes = this.nodeOptions && this.nodeOptions.classes || {};
         var labelClass = this.classes[this.value] || 'primary';
-        this.$el.addClass('label label-' + labelClass).text(this._formatValue(this.value));
+        this.$el.addClass('badge badge-' + labelClass).text(this._formatValue(this.value));
     },
 });
 
diff --git a/addons/web/static/src/js/fields/upgrade_fields.js b/addons/web/static/src/js/fields/upgrade_fields.js
index 119a64881e3..dd91ca2efc2 100644
--- a/addons/web/static/src/js/fields/upgrade_fields.js
+++ b/addons/web/static/src/js/fields/upgrade_fields.js
@@ -94,7 +94,7 @@ var AbstractFieldUpgrade = {
         this._super.apply(this, arguments);
         this._insertEnterpriseLabel($("<span>", {
             text: "Enterprise",
-            'class': "label label-primary oe_inline o_enterprise_label"
+            'class': "badge badge-primary oe_inline o_enterprise_label"
         }));
     },
     /**
-- 
cgit v1.2.3