[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).

1 files changed, 36 insertions, 36 deletions

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>