[REF] *: BS4, adapt forms

The 'form-horizontal' class have been removed; the '.form-group'
elements must now use the 'row' class for an horizontal layout.

The 'control-label' class was renamed to 'col-form-label'.

The 'help-block' class was renamed to 'form-text'.

The 'has-error' and 'has-success' classes have been removed and
replaced by a new system using the :valid and :invalid pseudo-classes,
when a parent has the 'was-validated' class. While this system is great,
it is not straightforward to use it in Odoo. Fortunately, BS4 provides
the 'is-valid' and 'is-invalid' classes as fallback. This commit
replaces the 'has-error' and 'has-success' classes by 'o_has_error' and
'o_has_success' classes (for JS compatibility) and use the 'is-*'
fallback classes. (The 'has-warning' class has no equivalent but was
unused in Odoo anyway).

4 files changed, 52 insertions, 47 deletions

diff --git a/addons/web_editor/static/src/js/editor/translator.js b/addons/web_editor/static/src/js/editor/translator.js
index 0ec7d267f66..a24e438affc 100644
--- a/addons/web_editor/static/src/js/editor/translator.js
+++ b/addons/web_editor/static/src/js/editor/translator.js
@@ -63,7 +63,7 @@ var AttributeTranslateDialog = weWidgets.Dialog.extend({
         var $group = $('<div/>', {class: 'form-group'}).appendTo(this.$el);
         _.each(this.translation, function (node, attr) {
             var $node = $(node);
-            var $label = $('<label class="control-label"></label>').text(attr);
+            var $label = $('<label class="col-form-label"></label>').text(attr);
             var $input = $('<input class="form-control"/>').val($node.html());
             $input.on('change keyup', function () {
                 var value = $input.val();
diff --git a/addons/web_editor/static/src/js/widgets/widgets.js b/addons/web_editor/static/src/js/widgets/widgets.js
index e189726051d..4f2d952c6d8 100644
--- a/addons/web_editor/static/src/js/widgets/widgets.js
+++ b/addons/web_editor/static/src/js/widgets/widgets.js
@@ -450,7 +450,7 @@ var ImageWidget = MediaWidget.extend({
             .values()
             .value();
 
-        this.$('.help-block').empty();
+        this.$('.form-text').empty();
 
         this.$('.existing-attachments').replaceWith(QWeb.render('web_editor.dialog.image.existing.content', {rows: rows}));
 
@@ -538,7 +538,8 @@ var ImageWidget = MediaWidget.extend({
                     self._toggleImage(attachment, true);
                 } else {
                     $button.addClass('btn-danger');
-                    self.$el.addClass('has-error').find('.help-block').text(error);
+                    self.$el.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
+                    self.$el.find('.form-text').text(error);
                 }
 
                 if (!self.multiImages) {
@@ -576,7 +577,8 @@ var ImageWidget = MediaWidget.extend({
     _onImageSelection: function () {
         var $form = this.$('form');
         this.$el.addClass('nosave');
-        $form.removeClass('has-error').find('.help-block').empty();
+        $form.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
+        $form.find('.form-text').empty();
         this.$('.o_upload_image_button').removeClass('btn-danger btn-success');
         this._uploadImage();
     },
@@ -585,7 +587,7 @@ var ImageWidget = MediaWidget.extend({
      */
     _onRemoveClick: function (ev) {
         var self = this;
-        var $helpBlock = this.$('.help-block').empty();
+        var $helpBlock = this.$('.form-text').empty();
         var $a = $(ev.currentTarget);
         var id = parseInt($a.data('id'), 10);
         var attachment = _.findWhere(this.records, {id: id});
@@ -987,7 +989,7 @@ var VideoWidget = MediaWidget.extend({
     _updateVideo: function () {
         // Reset the feedback
         this.$content.empty();
-        this.$('#o_video_form_group').removeClass('has-error has-success');
+        this.$('#o_video_form_group').removeClass('o_has_error o_has_success').find('.form-control, .custom-select').removeClass('is-invalid is-valid');
         this.$('.o_video_dialog_options li').addClass('d-none');
 
         // Check video code
@@ -1019,7 +1021,10 @@ var VideoWidget = MediaWidget.extend({
         // Show / Hide preview elements
         this.$el.find('.o_video_dialog_preview_text, .media_iframe_video_size').add($opt_box).toggleClass('d-none', !query.$video);
         // Toggle validation classes
-        this.$el.find('#o_video_form_group').toggleClass('has-error', !query.$video).toggleClass('has-success', !!query.$video);
+        this.$el.find('#o_video_form_group')
+            .toggleClass('o_has_error', !query.$video).find('.form-control, .custom-select').toggleClass('is-invalid', !query.$video)
+            .end()
+            .toggleClass('o_has_success', !!query.$video).find('.form-control, .custom-select').toggleClass('is-valid', !!query.$video);
 
         // Individually show / hide options base on the video provider
         $opt_box.find('li.o_' + query.type + '_option').removeClass('d-none');
@@ -1470,7 +1475,7 @@ var LinkDialog = Dialog.extend({
         var data = this._getData();
         if (data === null) {
             var $url = this.$('input[name="url"]');
-            $url.closest('.form-group').addClass('has-error');
+            $url.closest('.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid');
             $url.focus();
             return $.Deferred().reject();
         }
@@ -1554,7 +1559,7 @@ var LinkDialog = Dialog.extend({
      * @private
      */
     _onURLInput: function (ev) {
-        $(ev.currentTarget).closest('.form-group').removeClass('has-error');
+        $(ev.currentTarget).closest('.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid');
         var isLink = $(ev.currentTarget).val().indexOf('@') < 0;
         this.$('input[name="is_new_window"]').closest('.form-group').toggleClass('d-none', !isLink);
     },
diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss
index eb872c432e3..34b921c49da 100644
--- a/addons/web_editor/static/src/scss/web_editor.ui.scss
+++ b/addons/web_editor/static/src/scss/web_editor.ui.scss
@@ -1462,10 +1462,10 @@ body .modal {
                                 display: none;
                             }
                         }
-                        &.has-error > .o_validate_feedback > .fa-exclamation-triangle {
+                        &.o_has_error > .o_validate_feedback > .fa-exclamation-triangle {
                             display: block;
                         }
-                        &.has-success > .o_validate_feedback > .fa-check {
+                        &.o_has_success > .o_validate_feedback > .fa-check {
                             display: block;
                         }
                     }
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 187c880d3ae..b5f4dff8a3f 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -29,15 +29,15 @@
     <!--=================-->
 
     <!-- Alt Dialog (allows to change alt and title of page images) -->
-    <form t-name="web_editor.dialog.alt" action="#" class="form-horizontal">
-        <div class="form-group">
-            <label class="col-md-3 control-label" for="alt">Description (alt tag)</label>
+    <form t-name="web_editor.dialog.alt" action="#">
+        <div class="form-group row">
+            <label class="col-md-3 col-form-label" for="alt">Description (alt tag)</label>
             <div class="col-md-8">
                 <input class="form-control" id="alt" required="required" t-att-value="widget.alt" type="text"/>
             </div>
         </div>
-        <div class="form-group">
-            <label class="col-md-3 control-label" for="title">Tooltip</label>
+        <div class="form-group row">
+            <label class="col-md-3 col-form-label" for="title">Tooltip</label>
             <div class="col-md-8">
                 <input class="form-control" id="title" required="required" t-att-value="widget.title" type="text"/>
             </div>
@@ -113,7 +113,7 @@
                     </div>
                 </div>
             </div>
-            <div class="help-block"/>
+            <div class="form-text"/>
             <div class="existing-attachments">
                 <t t-call="web_editor.dialog.image.existing"/>
             </div>
@@ -128,9 +128,9 @@
                         <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button>
                         <h3 class="modal-title">Select a Picture</h3>
                     </header>
-                    <main class="modal-body has-error">
+                    <main class="modal-body o_has_error">
                         <div class="existing-attachments"/>
-                        <div class="help-block"/>
+                        <div class="form-text"/>
                     </main>
                     <footer class="modal-footer">
                         <a data-dismiss="modal" href="#" aria-label="Discard">Discard</a>
@@ -151,7 +151,7 @@
         </div>
     </t>
     <t t-name="web_editor.dialog.image.existing.error">
-        <div class="help-block">
+        <div class="form-text">
             <p>The image could not be deleted because it is used in the
                following pages or views:</p>
             <ul t-as="view" t-foreach="views">
@@ -192,7 +192,7 @@
                 <div class="form-group" id="o_video_form_group">
                     <label class="mt8" for="o_video_text">Video code <small class="text-muted">(URL or Embed)</small></label>
                     <textarea class="form-control url" id="o_video_text" placeholder="Copy-paste your URL or embed code here"/>
-                    <label class="control-label o_validate_feedback" for="o_video_text"><i class="fa fa-check" role="img" aria-label="Checked" title="Checked"/><i class="fa fa-exclamation-triangle" role="img" aria-label="Attention" title="Attention"/></label>
+                    <label class="col-form-label o_validate_feedback" for="o_video_text"><i class="fa fa-check" role="img" aria-label="Checked" title="Checked"/><i class="fa fa-exclamation-triangle" role="img" aria-label="Attention" title="Attention"/></label>
                 </div>
                 <div class="text-right">
                     <small class="text-muted">Accepts <b><i>Youtube</i></b>, <b><i>Instagram</i></b>, <b><i>Vine.co</i></b>, <b><i>Vimeo</i></b>, <b><i>Dailymotion</i></b> and <b><i>Youku</i></b> videos</small>
@@ -237,21 +237,21 @@
     <!-- Link Dialog (allows to choose a style and content for a link on the page) -->
     <div t-name="web_editor.dialog.link" class="o_link_dialog">
         <div class="row">
-            <form class="col-lg-8 form-horizontal">
-                <div t-attf-class="form-group#{widget.needLabel ? '' : ' d-none'}">
-                    <label class="control-label col-md-3" for="o_link_dialog_label_input">Link Label</label>
+            <form class="col-lg-8">
+                <div t-attf-class="form-group row#{widget.needLabel ? '' : ' d-none'}">
+                    <label class="col-form-label col-md-3" for="o_link_dialog_label_input">Link Label</label>
                     <div class="col-md-9">
                         <input type="text" name="label" class="form-control" id="o_link_dialog_label_input" required="required" t-att-value="widget.data.text"/>
                     </div>
                 </div>
-                <div class="form-group">
-                    <label class="control-label col-md-3" for="o_link_dialog_url_input">URL or Email</label>
+                <div class="form-group row">
+                    <label class="col-form-label col-md-3" for="o_link_dialog_url_input">URL or Email</label>
                     <div class="col-md-9">
                         <input type="text" name="url" class="form-control" id="o_link_dialog_url_input" required="required"/>
                     </div>
                 </div>
-                <div class="form-group">
-                    <label class="control-label col-md-3">Size</label>
+                <div class="form-group row">
+                    <label class="col-form-label col-md-3">Size</label>
                     <div class="col-md-9">
                         <select name="link_style_size" class="form-control col-md-3 link-style">
                             <option value="xs">Extra Small</option>
@@ -261,8 +261,8 @@
                         </select>
                     </div>
                 </div>
-                <div class="form-group">
-                    <label class="control-label col-md-3">Color</label>
+                <div class="form-group row">
+                    <label class="col-form-label col-md-3">Color</label>
                     <div class="col-md-9">
                         <div class="o_link_dialog_color">
                             <label role="button" t-attf-class="o_link_dialog_color_item o_btn_preview btn btn-link text-center" data-color="">
@@ -279,7 +279,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="form-group">
+                <div class="form-group row">
                     <div class="offset-md-3 col-md-9">
                         <label class="o_switch">
                             <input type="checkbox" name="is_new_window" t-att-checked="widget.data.isNewWindow ? 'checked' : undefined"/>
@@ -366,9 +366,9 @@
             </div>
         </div>
         <div class="o_bg_img_opt" data-value="contain">
-            <form class="form-horizontal">
-                <div class="form-group">
-                    <label class="col-md-2 control-label" for="repeatInput">Repeat</label>
+            <form>
+                <div class="form-group row">
+                    <label class="col-md-2 col-form-label" for="repeatInput">Repeat</label>
                     <div class="col-md-5">
                         <div class="checkbox">
                             <label>
@@ -379,26 +379,26 @@
                 </div>
             </form>
         </div>
-        <form class="o_bg_img_opt form-horizontal" data-value="custom">
+        <form class="o_bg_img_opt" data-value="custom">
             <fieldset>
                 <legend>Background size</legend>
                 <p>Sets the width and height of the background image in percent of the parent element.</p>
-                <div class="form-group">
-                    <label class="col-md-3 control-label" for="o_bg_img_opt_custom_size_x">Background width</label>
+                <div class="form-group row">
+                    <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_size_x">Background width</label>
                     <div class="col-md-5">
                         <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_x" placeholder="auto"/>
+                            <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_size_x" placeholder="auto"/>
                             <div class="input-group-append">
                                 <div class="input-group-text">%</div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="form-group">
-                    <label class="col-md-3 control-label" for="o_bg_img_opt_custom_size_y">Background height</label>
+                <div class="form-group row">
+                    <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_size_y">Background height</label>
                     <div class="col-md-5">
                         <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_size_y" placeholder="auto"/>
+                            <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_size_y" placeholder="auto"/>
                             <div class="input-group-append">
                                 <div class="input-group-text">%</div>
                             </div>
@@ -409,22 +409,22 @@
             <fieldset>
                 <legend>Background position</legend>
                 <p>Set the starting position of the background image.</p>
-                <div class="form-group">
-                    <label class="col-md-3 control-label" for="o_bg_img_opt_custom_pos_x">Horizontal</label>
+                <div class="form-group row">
+                    <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_pos_x">Horizontal</label>
                     <div class="col-md-5">
                         <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_x" placeholder="auto"/>
+                            <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_pos_x" placeholder="auto"/>
                             <div class="input-group-append">
                                 <div class="input-group-text">%</div>
                             </div>
                         </div>
                     </div>
                 </div>
-                <div class="form-group">
-                    <label class="col-md-3 control-label" for="o_bg_img_opt_custom_pos_y">Vertical</label>
+                <div class="form-group row">
+                    <label class="col-md-3 col-form-label" for="o_bg_img_opt_custom_pos_y">Vertical</label>
                     <div class="col-md-5">
                         <div class="input-group">
-                            <input type="number" min="0" max="100" class="form-control input-sm" id="o_bg_img_opt_custom_pos_y" placeholder="auto"/>
+                            <input type="number" min="0" max="100" class="form-control form-control-sm" id="o_bg_img_opt_custom_pos_y" placeholder="auto"/>
                             <div class="input-group-append">
                                 <div class="input-group-text">%</div>
                             </div>