From c755fb125785c75e319332acd9cc5579fd414415 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Fri, 25 Oct 2019 07:14:58 +0000
Subject: [PATCH 1/5] [IMP] website_form: focus the first input / footer button
 of modal

This commit focuses the first form input on the opened modal (or footer
button in case there's no form input).

This behavior will enable users to navigate through the modal using
keyboard right away (without having to click on input).

Part of https://github.com/odoo/odoo/pull/30595
task-1874350

Co-authored-by: Dharmraj Jhala <dja@odoo.com>
---
 addons/website_form/static/src/js/website_form_editor.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/addons/website_form/static/src/js/website_form_editor.js b/addons/website_form/static/src/js/website_form_editor.js
index fad1472820e..2e110c42e65 100644
--- a/addons/website_form/static/src/js/website_form_editor.js
+++ b/addons/website_form/static/src/js/website_form_editor.js
@@ -32,6 +32,10 @@ odoo.define('website_form_editor', function (require) {
                     close: true
                 }],
             }, options));
+
+            this.opened(() => {
+                this.$modal.find('.o_website_form_input, .modal-footer .btn').first().focus();
+            });
         },
 
         //----------------------------------------------------------------------

From 655bd95f6de70b9d38ad9031156a416303f4efe5 Mon Sep 17 00:00:00 2001
From: Dharmraj Jhala <dja@odoo.com>
Date: Tue, 5 Nov 2019 10:50:03 +0000
Subject: [PATCH 2/5] [IMP] website_form: improve radio/checkbox behavior and
 layout

This commit implements following changes:

- aligns radio / checkboxes with their label
- adds an option on radio buttons and checkboxes to
  display them horizontally or vertically

Part of https://github.com/odoo/odoo/pull/30595
task-1874350
---
 .../static/src/js/website_form_editor.js      | 28 +++++++++++++++++++
 .../static/src/scss/website_form.scss         | 27 ++++++++++--------
 .../static/src/xml/website_form_editor.xml    | 24 ++++++++--------
 .../static/tests/tours/website_form_editor.js |  9 ++++++
 addons/website_form/views/snippets.xml        | 11 ++++++++
 5 files changed, 76 insertions(+), 23 deletions(-)

diff --git a/addons/website_form/static/src/js/website_form_editor.js b/addons/website_form/static/src/js/website_form_editor.js
index 2e110c42e65..ae723594402 100644
--- a/addons/website_form/static/src/js/website_form_editor.js
+++ b/addons/website_form/static/src/js/website_form_editor.js
@@ -438,6 +438,34 @@ odoo.define('website_form_editor', function (require) {
         }
     });
 
+    // radio / checkboxes field option to display them horizontally or vertically
+    options.registry['website_form_editor_choice_field_display'] = options.Class.extend({
+        xmlDependencies: ['/website_form/static/src/xml/website_form_editor.xml'],
+
+        /**
+         * @see this.selectClass for parameters
+         */
+        website_form_choice_field_display: function (previewMode, value, $opt) {
+            this.$target.toggleClass('o_website_form_flex_fw', value === 'vertical');
+            this.$target[0].dataset.display = value;
+        },
+
+        //----------------------------------------------------------------------
+        // Private
+        //----------------------------------------------------------------------
+
+        /**
+         * @override
+         */
+        _setActive: function () {
+            this._super(...arguments);
+            this.$el.find('[data-website_form_choice_field_display]')
+                .removeClass('active')
+                .filter('[data-website_form_choice_field_display=' + this.$target.attr('data-display') + ']')
+                .addClass('active');
+        },
+    });
+
     // Generic custom field options
     options.registry['website_form_editor_field'] = options.Class.extend({
         xmlDependencies: ['/website_form/static/src/xml/website_form_editor.xml'],
diff --git a/addons/website_form/static/src/scss/website_form.scss b/addons/website_form/static/src/scss/website_form.scss
index b423adcaa74..936edad2715 100644
--- a/addons/website_form/static/src/scss/website_form.scss
+++ b/addons/website_form/static/src/scss/website_form.scss
@@ -2,21 +2,24 @@
 .o_website_form_flex {
     display: flex;
     flex-wrap: wrap;
-}
 
-.o_website_form_flex_item {
-    // col-lg-4
-    flex-basis: 33%;
-
-    // col-md-6
-    @include media-breakpoint-down(md) {
-        flex-basis: 50%;
-    }
-
-    // col-12
-    @include media-breakpoint-down(sm) {
+    &.o_website_form_flex_fw > .o_website_form_flex_item {
         flex-basis: 100%;
     }
+    &:not(.o_website_form_flex_fw) > .o_website_form_flex_item {
+        // col-lg-4
+        flex-basis: 33%;
+
+        // col-md-6
+        @include media-breakpoint-down(md) {
+            flex-basis: 50%;
+        }
+
+        // col-12
+        @include media-breakpoint-down(sm) {
+            flex-basis: 100%;
+        }
+    }
 }
 
 // Hidden field is only partially hidden in editor
diff --git a/addons/website_form/static/src/xml/website_form_editor.xml b/addons/website_form/static/src/xml/website_form_editor.xml
index 5de949e3bea..f8690b4bfa9 100644
--- a/addons/website_form/static/src/xml/website_form_editor.xml
+++ b/addons/website_form/static/src/xml/website_form_editor.xml
@@ -115,23 +115,25 @@
     <!-- Boolean Field -->
     <t t-name="website_form.field_boolean">
         <t t-call="website_form.field">
-            <input
-                type="checkbox"
-                value="Yes"
-                class="o_website_form_input"
-                t-att-name="field.name"
-                t-att-required="field.required"
-            />
+            <div class="col-form-label">
+                <input
+                    type="checkbox"
+                    value="Yes"
+                    class="o_website_form_input"
+                    t-att-name="field.name"
+                    t-att-required="field.required"
+                />
+            </div>
         </t>
     </t>
 
     <!-- Selection Field -->
     <t t-name="website_form.field_selection">
         <t t-call="website_form.field">
-            <div class="o_website_form_flex">
+            <div class="o_website_form_flex" data-display="horizontal">
                 <t t-foreach="field.selection" t-as="option">
                     <div class="radio o_website_form_flex_item">
-                        <label>
+                        <label class="col-form-label">
                             <input
                                 type="radio"
                                 class="o_website_form_input"
@@ -180,7 +182,7 @@
         <!-- Generic one2many -->
         <t t-if="field.relation != 'ir.attachment'">
             <t t-call="website_form.field">
-                <div class="o_website_form_flex">
+                <div class="o_website_form_flex" data-display="horizontal">
                     <t t-if="!field.records">
                         <input
                             class="o_website_form_input"
@@ -192,7 +194,7 @@
                     </t>
                     <t t-foreach="field.records" t-as="record">
                         <div class="checkbox o_website_form_flex_item">
-                            <label>
+                            <label class="col-form-label">
                                 <input
                                     type="checkbox"
                                     class="o_website_form_input"
diff --git a/addons/website_form/static/tests/tours/website_form_editor.js b/addons/website_form/static/tests/tours/website_form_editor.js
index 735016c34b3..b37c7626777 100644
--- a/addons/website_form/static/tests/tours/website_form_editor.js
+++ b/addons/website_form/static/tests/tours/website_form_editor.js
@@ -240,10 +240,19 @@ odoo.define('website_form_editor.tour', function(require) {
             content:  "Click on Required",
             trigger:  "[data-website_form_field_require]"
         },
+        {
+            content:  "Click on first Check Box",
+            trigger:  "label:contains('Iphone') span",
+        },
+        {
+            content:  "Click on 'Vertical' in menu 'Display'",
+            trigger:  "we-button:contains('Vertical')",
+        },
         {
             content:  "Check the resulting field",
             trigger:  ".form-field.o_website_form_custom.o_website_form_required_custom" +
                             ":has(.col-form-label:contains('Products'))" +
+                            ":has(.o_website_form_flex[data-display='vertical'])" +
                             ":has(.checkbox label:contains('Iphone'):has(input[type='checkbox'][required]))" +
                             ":has(.checkbox label:contains('Galaxy S'):has(input[type='checkbox'][required]))" +
                             ":has(.checkbox label:contains('Xperia'):has(input[type='checkbox'][required]))" +
diff --git a/addons/website_form/views/snippets.xml b/addons/website_form/views/snippets.xml
index c485b64d8c3..8bb416b1957 100644
--- a/addons/website_form/views/snippets.xml
+++ b/addons/website_form/views/snippets.xml
@@ -55,6 +55,17 @@
                     <we-button data-toggle-class="o_website_form_field_hidden" data-no-preview="true">Hidden</we-button>
               </div>
 
+              <!-- Add an option to display radio buttons / checkboxes horizontally or vertically -->
+              <div data-js='website_form_editor_choice_field_display' data-selector=".o_website_form_flex">
+                  <we-collapse-area>
+                      <we-toggler>Display</we-toggler>
+                      <we-collapse data-no-preview="true">
+                          <we-button data-website_form_choice_field_display="horizontal">Horizontal</we-button>
+                          <we-button data-website_form_choice_field_display="vertical">Vertical</we-button>
+                      </we-collapse>
+                  </we-collapse-area>
+               </div>
+
               <!-- Add move, duplicate and remove controllers to checkboxes and radio buttons -->
               <div data-selector=".o_website_form_flex_item" data-drop-near=".o_website_form_flex_item"/>
 

From 03425f13061cd9da238ed640229302340cb643d4 Mon Sep 17 00:00:00 2001
From: Dharmraj Jhala <dja@odoo.com>
Date: Wed, 30 Oct 2019 11:04:43 +0000
Subject: [PATCH 3/5] [IMP] website_form: add new 'email' type of field in
 custom fields

This commit adds possibility to add 'email' type of custom field using
form builder.

Part of https://github.com/odoo/odoo/pull/30595
task-1874350
---
 .../static/src/xml/website_form_editor.xml           | 12 ++++++++++++
 addons/website_form/views/snippets.xml               |  1 +
 2 files changed, 13 insertions(+)

diff --git a/addons/website_form/static/src/xml/website_form_editor.xml b/addons/website_form/static/src/xml/website_form_editor.xml
index f8690b4bfa9..5c64b727161 100644
--- a/addons/website_form/static/src/xml/website_form_editor.xml
+++ b/addons/website_form/static/src/xml/website_form_editor.xml
@@ -39,6 +39,18 @@
         </t>
     </t>
 
+    <!-- Email Field -->
+    <t t-name="website_form.field_email">
+        <t t-call="website_form.field">
+            <input
+                type="email"
+                class="form-control o_website_form_input"
+                t-att-name="field.name"
+                t-att-required="field.required"
+            />
+        </t>
+    </t>
+
     <!-- HTML Field -->
     <t t-name="website_form.field_html">
         <!--
diff --git a/addons/website_form/views/snippets.xml b/addons/website_form/views/snippets.xml
index 8bb416b1957..f2148f0a427 100644
--- a/addons/website_form/views/snippets.xml
+++ b/addons/website_form/views/snippets.xml
@@ -37,6 +37,7 @@
                       <we-collapse data-no-preview="true">
                           <we-button data-website_form_custom_field="char">Text</we-button>
                           <we-button data-website_form_custom_field="text">Long Text</we-button>
+                          <we-button data-website_form_custom_field="email">Email</we-button>
                           <we-button data-website_form_custom_field="integer">Number</we-button>
                           <we-button data-website_form_custom_field="float">Decimal Number</we-button>
                           <we-button data-website_form_custom_field="boolean">Checkbox</we-button>

From 3a9b5633061005090dcdc975650e4e80cf87141b Mon Sep 17 00:00:00 2001
From: Dharmraj Jhala <dja@odoo.com>
Date: Fri, 1 Nov 2019 11:24:04 +0000
Subject: [PATCH 4/5] [IMP] website_form: show warning while changing form
 parameters

If user changes the form-parameters (like targetted model), it removes
all the existing fields without any warning and re-renders a new form
according to changed parameters.

This commit improves above behavior to prevent accidental loss of a well
designed form. Now when user changes form parameters, a warging will be
shown to user before re-rendering the form if the model is not same.

Part of https://github.com/odoo/odoo/pull/30595
task-1874350
---
 .../static/src/js/website_form_editor.js      | 70 +++++++++++++------
 1 file changed, 47 insertions(+), 23 deletions(-)

diff --git a/addons/website_form/static/src/js/website_form_editor.js b/addons/website_form/static/src/js/website_form_editor.js
index ae723594402..6c412573013 100644
--- a/addons/website_form/static/src/js/website_form_editor.js
+++ b/addons/website_form/static/src/js/website_form_editor.js
@@ -363,32 +363,56 @@ odoo.define('website_form_editor', function (require) {
         init_form: function () {
             var self = this;
             var modelName = this.activeForm.model;
+            var currentModel = this.$target.attr('data-model_name');
             var formKey = this.activeForm.website_form_key;
-            if (modelName !== this.$target.attr('data-model_name')) {
-                this.$target.attr('data-model_name', modelName);
-                this.$target.find(".form-field:not(:has('.o_website_form_send')), .o_form_heading").remove();
+            if (!currentModel) {
+                // Directly change the parameters if model is being set for the first time
+                this.changeFormParameters(modelName, formKey);
+            } else if (modelName !== currentModel) {
+                var warningMessage = _t("Are you sure you want to change the parameters of your form? All the current fields will be discarded.");
+                new Dialog(this, {
+                    title: _t("Warning"),
+                    size: 'medium',
+                    $content: $('<div>', {text: warningMessage}),
+                    buttons: [{
+                        text: _t("Ok"),
+                        classes: 'btn-primary',
+                        click: function () {
+                            self.changeFormParameters(modelName, formKey);
+                        },
+                        close: true,
+                    }, {
+                        text: _t("Discard"),
+                        close: true,
+                    }],
+                }).open({shouldFocusButtons: true});
+            }
+        },
 
-                if (formKey) {
-                    var formInfo = FormEditorRegistry.get(formKey);
-                    ajax.loadXML(formInfo.defaultTemplatePath, qweb).then(function () {
-                        // Append form title
-                        $('<h1>', {
-                            class: 'o_form_heading',
-                            text: self.activeForm.website_form_label,
-                        }).prependTo(self.$target.find('.container'));
-                        self.$target.find('.form-group:has(".o_website_form_send")').before($(qweb.render(formInfo.defaultTemplateName)));
+        changeFormParameters: function (modelName, formKey) {
+            var self = this;
+            this.$target.attr('data-model_name', modelName);
+            this.$target.find(".form-field:not(:has('.o_website_form_send')), .o_form_heading").remove();
+            if (formKey) {
+                var formInfo = FormEditorRegistry.get(formKey);
+                ajax.loadXML(formInfo.defaultTemplatePath, qweb).then(function () {
+                    // Append form title
+                    $('<h1>', {
+                        class: 'o_form_heading',
+                        text: self.activeForm.website_form_label,
+                    }).prependTo(self.$target.find('.container'));
+                    self.$target.find('.form-group:has(".o_website_form_send")').before($(qweb.render(formInfo.defaultTemplateName)));
+                });
+            } else {
+                // Force fetch the fields of the new model
+                // and render all model required fields
+                this.fetch_model_fields().then(function (fields) {
+                    _.each(fields, function (field, field_name) {
+                        if (field.required) {
+                            self.append_field(field);
+                        }
                     });
-                } else {
-                    // Force fetch the fields of the new model
-                    // and render all model required fields
-                    this.fetch_model_fields().then(function (fields) {
-                        _.each(fields, function (field, field_name){
-                            if (field.required) {
-                                self.append_field(field);
-                            }
-                        });
-                    });
-                }
+                });
             }
         },
 

From 6882191b6f9472204bb0fc37943a93a74fb9641a Mon Sep 17 00:00:00 2001
From: Dharmraj Jhala <dja@odoo.com>
Date: Mon, 4 Nov 2019 05:56:59 +0000
Subject: [PATCH 5/5] [IMP] website_form: apply layout to newly added field

This commit copies design of the last form-field and automatically applies
it on the newly added field to ease the designing.

Part of https://github.com/odoo/odoo/pull/30595
task-1874350
---
 .../static/src/js/website_form_editor.js           | 14 ++++++++++----
 .../static/src/xml/website_form_editor.xml         |  4 ++--
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/addons/website_form/static/src/js/website_form_editor.js b/addons/website_form/static/src/js/website_form_editor.js
index 6c412573013..e9cc074a453 100644
--- a/addons/website_form/static/src/js/website_form_editor.js
+++ b/addons/website_form/static/src/js/website_form_editor.js
@@ -313,6 +313,12 @@ odoo.define('website_form_editor', function (require) {
 
         append_field: function (field) {
             var self = this;
+            // Copy formatting classes of last row (field)
+            var $lastField = this.$target.find('.form-field.row:last');
+            field.formatInfo = {
+                labelClass: $lastField.find('> div:first').attr('class'),
+                contentClass: $lastField.find('> div:last').attr('class'),
+            };
             this.render_field(field).then(function (field){
                 self.$target.find(".form-group:has('.o_website_form_send')").before(field);
             });
@@ -531,6 +537,10 @@ odoo.define('website_form_editor', function (require) {
                     string: this.$target.find('.col-form-label').text().trim(),
                     required: self.$target.hasClass('o_website_form_required'),
                     custom: self.$target.hasClass('o_website_form_custom'),
+                    formatInfo: {
+                        labelClass: this.$target.find('> div:first').attr('class'),
+                        contentClass: this.$target.find('> div:last').attr('class'),
+                    },
                 };
 
                 // Build the new records list from the editable select field
@@ -553,10 +563,6 @@ odoo.define('website_form_editor', function (require) {
                 if (this.$target.hasClass('o_website_form_field_hidden')) {
                     $new_select.addClass('o_website_form_field_hidden');
                 }
-                var labelClasses = this.$target.find('> div:first').attr('class');
-                var inputClasses = this.$target.find('> div:last').attr('class');
-                $new_select.find('> div:first').attr('class', labelClasses);
-                $new_select.find('> div:last').attr('class', inputClasses);
                 this.$target.replaceWith($new_select);
             }
         }
diff --git a/addons/website_form/static/src/xml/website_form_editor.xml b/addons/website_form/static/src/xml/website_form_editor.xml
index 5c64b727161..b883166b570 100644
--- a/addons/website_form/static/src/xml/website_form_editor.xml
+++ b/addons/website_form/static/src/xml/website_form_editor.xml
@@ -4,12 +4,12 @@
     <!-- Generic Field Layout -->
     <t t-name="website_form.field">
         <div t-att-class="'row form-group form-field' + (field.custom ? ' o_website_form_custom' : '') + (field.required ? ' o_website_form_required' : '')">
-            <div class="col-lg-3 col-md-4">
+            <div t-att-class="field.formatInfo and field.formatInfo.labelClass || 'col-lg-3 col-md-4'">
                 <label class="col-form-label" t-att-for="field.name">
                     <t t-esc="field.string"/>
                 </label>
             </div>
-            <div class="col-lg-7 col-md-8">
+            <div t-att-class="field.formatInfo and field.formatInfo.contentClass || 'col-lg-7 col-md-8'">
                 <t t-raw="0"/>
             </div>
         </div>