[FIX] website_form, *: add submit btn position option

* = website_crm, website_hr_recruitment, website_sale

It is now possible to change the position of the submit button via
the left panel. Indeed switching to a non-horizontal form left the
submit button aligned with the labels which thus appeared broken.

Part of https://github.com/odoo/odoo/pull/44907
task-2191409

X-original-commit: 60b4c8d04006736be573189accd0dccaafafa651

7 files changed, 46 insertions, 49 deletions

diff --git a/addons/website_crm/views/website_crm_templates.xml b/addons/website_crm/views/website_crm_templates.xml
index b32f87af001..47330ca521a 100644
--- a/addons/website_crm/views/website_crm_templates.xml
+++ b/addons/website_crm/views/website_crm_templates.xml
@@ -65,14 +65,10 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <div class="form-group col-12 s_website_form_submit">
-                                        <div class="row s_col_no_resize s_col_no_bgcolor">
-                                            <div style="width: 200px" class="col-sm-auto s_website_form_label"/>
-                                            <div class="col-sm">
-                                                <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
-                                                <span id="s_website_form_result"></span>
-                                            </div>
-                                        </div>
+                                    <div class="form-group col-12 s_website_form_submit" data-name="Submit Button">
+                                        <div style="width: 200px;" class="s_website_form_label"/>
+                                        <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
+                                        <span id="s_website_form_result"></span>
                                     </div>
                                 </div>
                             </form>
diff --git a/addons/website_form/static/src/snippets/s_website_form/001.scss b/addons/website_form/static/src/snippets/s_website_form/001.scss
index 561ac208543..cb0ad2e2c2b 100644
--- a/addons/website_form/static/src/snippets/s_website_form/001.scss
+++ b/addons/website_form/static/src/snippets/s_website_form/001.scss
@@ -38,4 +38,16 @@
         padding-top: 0.5rem;
         padding-bottom: 0.5rem;
     }
+
+    .s_website_form_submit {
+        .s_website_form_label {
+            float: left;
+            height: 1px;
+        }
+        &.s_website_form_no_submit_label {
+            .s_website_form_label {
+                display: none;
+            }
+        }
+    }
 }
diff --git a/addons/website_form/static/src/snippets/s_website_form/options.js b/addons/website_form/static/src/snippets/s_website_form/options.js
index 4bd19093345..13416ee38ae 100644
--- a/addons/website_form/static/src/snippets/s_website_form/options.js
+++ b/addons/website_form/static/src/snippets/s_website_form/options.js
@@ -33,13 +33,10 @@ const FormEditor = options.Class.extend({
         }
         // Set selection as records to avoid added conplexity
         if (field.type === 'selection') {
-            field.records = [];
-            field.selection.forEach(el => {
-                field.records.push({
-                    id: el[0],
-                    display_name: el[1],
-                });
-            });
+            field.records = field.selection.map(el => ({
+                id: el[0],
+                display_name: el[1],
+            }));
         } else if (field.relation && field.relation !== 'ir.attachment') {
             field.records = await this._rpc({
                 model: field.relation,
@@ -86,9 +83,8 @@ const FormEditor = options.Class.extend({
      * @returns {Object}
      */
     _getDefaultFormat: function () {
-        const formOptions = this.el.closest('.o_we_customize_panel');
         return {
-            labelWidth: formOptions && formOptions.querySelector('we-customizeblock-options [data-select-style] input').value + 'px',
+            labelWidth: this.$target[0].querySelector('.s_website_form_label').style.width,
             labelPosition: 'left',
             multiPosition: 'horizontal',
             requiredMark: this._isRequiredMark(),
diff --git a/addons/website_form/views/snippets/s_website_form.xml b/addons/website_form/views/snippets/s_website_form.xml
index 5f0544f8e1a..0ab817313ae 100644
--- a/addons/website_form/views/snippets/s_website_form.xml
+++ b/addons/website_form/views/snippets/s_website_form.xml
@@ -6,14 +6,10 @@
         <div class="container">
             <form action="/website_form/" method="post" enctype="multipart/form-data" class="o_mark_required" data-mark="*">
                 <div class="s_website_form_rows row s_col_no_bgcolor">
-                    <div class="form-group col-12 s_website_form_submit">
-                        <div class="row s_col_no_resize s_col_no_bgcolor">
-                            <div style="width: 200px" class="col-sm-auto s_website_form_label"/>
-                            <div class="col-sm">
-                                <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
-                                <span id="s_website_form_result"></span>
-                            </div>
-                        </div>
+                    <div class="form-group col-12 s_website_form_submit" data-name="Submit Button">
+                        <div style="width: 200px;" class="s_website_form_label"/>
+                        <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
+                        <span id="s_website_form_result"></span>
                     </div>
                 </div>
             </form>
@@ -96,6 +92,15 @@
                 data-select-class="s_website_form_field_hidden"/>
         </div>
 
+        <div data-js="WebsiteFormSubmit" data-selector=".s_website_form_submit" data-exclude=".s_website_form_no_submit_options">
+            <we-select string="Button Position">
+                <we-button data-select-class="text-left s_website_form_no_submit_label">Left</we-button>
+                <we-button data-select-class="text-center s_website_form_no_submit_label">Center</we-button>
+                <we-button data-select-class="text-right s_website_form_no_submit_label">Right</we-button>
+                <we-button data-select-class="">Input Aligned</we-button>
+            </we-select>
+        </div>
+
         <!-- Remove the duplicate option of model fields -->
         <div data-js="WebsiteFormFieldModel" data-selector=".s_website_form .s_website_form_field:not(.s_website_form_custom)"/>
 
diff --git a/addons/website_form/views/website_form_templates.xml b/addons/website_form/views/website_form_templates.xml
index d991956ea29..f919f697fd7 100644
--- a/addons/website_form/views/website_form_templates.xml
+++ b/addons/website_form/views/website_form_templates.xml
@@ -65,14 +65,10 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="form-group col-12 s_website_form_submit">
-                                    <div class="row s_col_no_resize s_col_no_bgcolor">
-                                        <div style="width: 200px" class="col-sm-auto s_website_form_label"/>
-                                        <div class="col-sm">
-                                            <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
-                                            <span id="s_website_form_result"></span>
-                                        </div>
-                                    </div>
+                                <div class="form-group col-12 s_website_form_submit" data-name="Submit Button">
+                                    <div style="width: 200px;" class="s_website_form_label"/>
+                                    <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
+                                    <span id="s_website_form_result"></span>
                                 </div>
                             </div>
                         </form>
diff --git a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
index 01adeeb47d7..b7367dfd77f 100644
--- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
+++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml
@@ -196,14 +196,10 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="form-group col-12 s_website_form_submit">
-                                    <div class="row s_col_no_resize s_col_no_bgcolor">
-                                        <div style="width: 200px" class="col-sm-auto s_website_form_label"/>
-                                        <div class="col-sm">
-                                            <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
-                                            <span id="s_website_form_result"></span>
-                                        </div>
-                                    </div>
+                                <div class="form-group col-12 s_website_form_submit" data-name="Submit Button">
+                                    <div style="width: 200px;" class="s_website_form_label"/>
+                                    <a href="#" role="button" class="btn btn-primary btn-lg s_website_form_send">Submit</a>
+                                    <span id="s_website_form_result"></span>
                                 </div>
                             </div>
                         </form>
diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml
index c39a0777f1e..c8a27c5d48c 100644
--- a/addons/website_sale/views/templates.xml
+++ b/addons/website_sale/views/templates.xml
@@ -774,14 +774,10 @@
                                                     </div>
                                                 </div>
                                             </div>
-                                            <div class="form-group col-12 s_website_form_submit">
-                                                <div class="row s_col_no_resize s_col_no_bgcolor">
-                                                    <div style="width: 200px" class="col-sm-auto s_website_form_label"/>
-                                                    <div class="col-sm">
-                                                        <a role="button" href="/shop/checkout" class="btn btn-secondary float-left"><span class="fa fa-chevron-left"/> Previous</a>
-                                                        <a role="button" class="btn btn-primary float-right s_website_form_send" href="/shop/confirm_order">Next <span class="fa fa-chevron-right" /></a>
-                                                    </div>
-                                                </div>
+                                            <div class="form-group col-12 s_website_form_submit s_website_form_no_submit_options">
+                                                <div style="width: 200px;" class="s_website_form_label"/>
+                                                <a role="button" href="/shop/checkout" class="btn btn-secondary float-left"><span class="fa fa-chevron-left"/> Previous</a>
+                                                <a role="button" class="btn btn-primary float-right s_website_form_send" href="/shop/confirm_order">Next <span class="fa fa-chevron-right" /></a>
                                             </div>
                                         </div>
                                     </form>