[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
This commit is contained in:
fja-odoo
2020-02-11 17:35:06 +00:00
committed by qsm-odoo
parent 25d70fc5c9
commit 07bb2e4591
7 changed files with 46 additions and 49 deletions
@@ -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>
@@ -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;
}
}
}
}
@@ -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(),
@@ -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)"/>
@@ -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>
@@ -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>
+4 -8
View File
@@ -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>