diff options
| author | qsm-odoo <qsm@odoo.com> | 2018-05-22 15:30:36 +0200 |
|---|---|---|
| committer | qsm-odoo <qsm@odoo.com> | 2018-07-27 12:36:54 +0200 |
| commit | 93b0001df6766fe905ee69c25ec8d846e4551064 (patch) | |
| tree | 3f88048d24818b6e8871ad6f00308d15f6105f73 | |
| parent | 7822bab880809d7e88c4ce5b45761c97c3244388 (diff) | |
[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).
43 files changed, 380 insertions, 375 deletions
diff --git a/addons/auth_signup/views/auth_signup_login_templates.xml b/addons/auth_signup/views/auth_signup_login_templates.xml index 5e8dd29fcbd..a043b15eaad 100644 --- a/addons/auth_signup/views/auth_signup_login_templates.xml +++ b/addons/auth_signup/views/auth_signup_login_templates.xml @@ -10,26 +10,26 @@ <template id="auth_signup.fields" name="Auth Signup/ResetPassword form fields"> <div class="form-group field-login"> - <label for="login" class="control-label">Your Email</label> + <label for="login" class="col-form-label">Your Email</label> <input type="text" name="login" t-att-value="login" id="login" class="form-control" autofocus="autofocus" autocapitalize="off" required="required" t-att-readonly="'readonly' if only_passwords else None"/> </div> <div class="form-group field-name"> - <label for="name" class="control-label">Your Name</label> + <label for="name" class="col-form-label">Your Name</label> <input type="text" name="name" t-att-value="name" id="name" class="form-control" placeholder="e.g. John Doe" required="required" t-att-readonly="'readonly' if only_passwords else None" t-att-autofocus="'autofocus' if login and not only_passwords else None" /> </div> <div class="form-group field-password"> - <label for="password" class="control-label">Password</label> + <label for="password" class="col-form-label">Password</label> <input type="password" name="password" id="password" class="form-control" required="required" t-att-autofocus="'autofocus' if only_passwords else None"/> </div> <div class="form-group field-confirm_password"> - <label for="confirm_password" class="control-label">Confirm Password</label> + <label for="confirm_password" class="col-form-label">Confirm Password</label> <input type="password" name="confirm_password" id="confirm_password" class="form-control" required="required"/> </div> </template> @@ -77,7 +77,7 @@ <t t-if="not token"> <div class="form-group field-login"> - <label for="login" class="control-label">Your Email</label> + <label for="login" class="col-form-label">Your Email</label> <input type="text" name="login" t-att-value="login" id="login" class="form-control" autofocus="autofocus" required="required" autocapitalize="off"/> </div> diff --git a/addons/payment/static/src/js/payment_form.js b/addons/payment/static/src/js/payment_form.js index f498599fb3c..2a0e805891a 100644 --- a/addons/payment/static/src/js/payment_form.js +++ b/addons/payment/static/src/js/payment_form.js @@ -65,16 +65,16 @@ odoo.define('payment.payment_form', function (require) { if ($(element).attr('type') == 'hidden') { return true; } - $(element).closest('div.form-group').removeClass('has-error'); + $(element).closest('div.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); $(element).siblings( ".o_invalid_field" ).remove(); //force check of forms validity (useful for Firefox that refill forms automatically on f5) $(element).trigger("focusout"); if (element.dataset.isRequired && element.value.length === 0) { - $(element).closest('div.form-group').addClass('has-error'); + $(element).closest('div.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); $(element).closest('div.form-group').append('<div style="color: red" class="o_invalid_field" aria-invalid="true">' + _.str.escapeHTML("The value is invalid.") + '</div>'); wrong_input = true; } - else if ($(element).closest('div.form-group').hasClass('has-error')) { + else if ($(element).closest('div.form-group').hasClass('o_has_error')) { wrong_input = true; $(element).closest('div.form-group').append('<div style="color: red" class="o_invalid_field" aria-invalid="true">' + _.str.escapeHTML("The value is invalid.") + '</div>'); } @@ -228,17 +228,17 @@ odoo.define('payment.payment_form', function (require) { if ($(element).attr('type') == 'hidden') { return true; } - $(element).closest('div.form-group').removeClass('has-error'); + $(element).closest('div.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); $(element).siblings( ".o_invalid_field" ).remove(); //force check of forms validity (useful for Firefox that refill forms automatically on f5) $(element).trigger("focusout"); if (element.dataset.isRequired && element.value.length === 0) { - $(element).closest('div.form-group').addClass('has-error'); + $(element).closest('div.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); var message = '<div style="color: red" class="o_invalid_field" aria-invalid="true">' + _.str.escapeHTML("The value is invalid.") + '</div>'; $(element).closest('div.form-group').append(message); wrong_input = true; } - else if ($(element).closest('div.form-group').hasClass('has-error')) { + else if ($(element).closest('div.form-group').hasClass('o_has_error')) { wrong_input = true; var message = '<div style="color: red" class="o_invalid_field" aria-invalid="true">' + _.str.escapeHTML("The value is invalid.") + '</div>'; $(element).closest('div.form-group').append(message); diff --git a/addons/payment/static/src/js/payment_portal.js b/addons/payment/static/src/js/payment_portal.js index eeae7758916..0753af1b3eb 100644 --- a/addons/payment/static/src/js/payment_portal.js +++ b/addons/payment/static/src/js/payment_portal.js @@ -15,13 +15,13 @@ $(document).ready(function () { $(this).parent('.form-group').children('.card_placeholder').removeClass().addClass('card_placeholder'); } if (valid_value) { - $(this).parent('.form-group').addClass('has-success'); - $(this).parent('.form-group').removeClass('has-error'); + $(this).parent('.form-group').addClass('o_has_success').find('.form-control, .custom-select').addClass('is-valid'); + $(this).parent('.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); $(this).siblings('.o_invalid_field').remove(); } else { - $(this).parent('.form-group').addClass('has-error'); - $(this).parent('.form-group').removeClass('has-success'); + $(this).parent('.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); + $(this).parent('.form-group').removeClass('o_has_success').find('.form-control, .custom-select').removeClass('is-valid'); } }); @@ -30,13 +30,13 @@ $(document).ready(function () { var card_type = $.payment.cardType(cc_nbr); var valid_value = $.payment.validateCardCVC(this.value, card_type); if (valid_value) { - $(this).parent('.form-group').addClass('has-success'); - $(this).parent('.form-group').removeClass('has-error'); + $(this).parent('.form-group').addClass('o_has_success').find('.form-control, .custom-select').addClass('is-valid'); + $(this).parent('.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); $(this).siblings('.o_invalid_field').remove(); } else { - $(this).parent('.form-group').addClass('has-error'); - $(this).parent('.form-group').removeClass('has-success'); + $(this).parent('.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); + $(this).parent('.form-group').removeClass('o_has_success').find('.form-control, .custom-select').removeClass('is-valid'); } }); @@ -46,13 +46,13 @@ $(document).ready(function () { var year = expiry_value.year || ''; var valid_value = $.payment.validateCardExpiry(month, year); if (valid_value) { - $(this).parent('.form-group').addClass('has-success'); - $(this).parent('.form-group').removeClass('has-error'); + $(this).parent('.form-group').addClass('o_has_success').find('.form-control, .custom-select').addClass('is-valid'); + $(this).parent('.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); $(this).siblings('.o_invalid_field').remove(); } else { - $(this).parent('.form-group').addClass('has-error'); - $(this).parent('.form-group').removeClass('has-success'); + $(this).parent('.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); + $(this).parent('.form-group').removeClass('o_has_success').find('.form-control, .custom-select').removeClass('is-valid'); } }); diff --git a/addons/payment/views/payment_portal_templates.xml b/addons/payment/views/payment_portal_templates.xml index 10071958909..76299f8bfc9 100644 --- a/addons/payment/views/payment_portal_templates.xml +++ b/addons/payment/views/payment_portal_templates.xml @@ -77,30 +77,30 @@ <h1>Payment</h1> <div class="row"> <div class="col-lg-6"> - <div class="form-horizontal"> + <div> <div t-attf-class="alert alert-#{status}" t-raw="message" role="status"/> - <div class="form-group"> - <label for="form_partner_name" class="col-md-3 control-label">From</label> + <div class="form-group row"> + <label for="form_partner_name" class="col-md-3 col-form-label">From</label> <div class="col-md-9"> <span name="form_partner_name" class="form-control" t-esc="tx.partner_name"/> </div> </div> - <div class="form-group"> - <label for="form_reference" class="col-md-3 control-label">Reference</label> + <div class="form-group row"> + <label for="form_reference" class="col-md-3 col-form-label">Reference</label> <div class="col-md-9"> <span name="form_reference" class="form-control" t-esc="tx.reference"/> </div> </div> - <div class="form-group"> - <label for="form_amount" class="col-md-3 control-label">Amount</label> + <div class="form-group row"> + <label for="form_amount" class="col-md-3 col-form-label">Amount</label> <div class="col-md-9"> <span name="form_amount" class="form-control" t-esc="tx.amount" t-options="{'widget': 'monetary', 'display_currency': tx.currency_id}"/> </div> </div> - <div class="col-md-12"> + <div> <a role="button" t-attf-class="btn btn-#{status} pull-right" href="/my/home"><i class="fa fa-arrow-circle-right"/> Back to My Account</a> </div> - <div class="col-md-6 offset-md-6 text-muted mt16"> + <div class="col-md-6 offset-md-6 text-muted mt16"><!-- FIXME should be in a row... --> <span t-field="tx.acquirer_id.image_small" t-att-title="tx.acquirer_id.name" role="img" t-att-aria-label="tx.acquirer_id.name" t-options='{"widget": "image", "style":"max-width: 60px; display: inline-block"}'/> <span>Processed by <t t-esc="tx.acquirer_id.name"/>.</span> </div> diff --git a/addons/portal/static/src/js/portal_signature.js b/addons/portal/static/src/js/portal_signature.js index 24fcc843aa4..70e6974dc36 100644 --- a/addons/portal/static/src/js/portal_signature.js +++ b/addons/portal/static/src/js/portal_signature.js @@ -61,7 +61,7 @@ odoo.define('portal.signature_form', function (require){ var signature = self.$("#o_portal_signature").jSignature('getData', 'image'); var is_empty = signature ? this.empty_sign[1] === signature[1] : true; - this.$('#o_portal_sign_name').parent().toggleClass('has-error', !partner_name); + this.$('#o_portal_sign_name').parent().toggleClass('o_has_error', !partner_name).find('.form-control, .custom-select').toggleClass('is-invalid', !partner_name); this.$('#o_portal_sign_draw').toggleClass('bg-danger text-white', is_empty); if (is_empty || ! partner_name) { return false; diff --git a/addons/portal/static/src/xml/portal_signature.xml b/addons/portal/static/src/xml/portal_signature.xml index 5c032da0543..5f99a3c2fef 100644 --- a/addons/portal/static/src/xml/portal_signature.xml +++ b/addons/portal/static/src/xml/portal_signature.xml @@ -3,7 +3,7 @@ <form id="o_portal_sign_accept" method="POST"> <input type="hidden" name="csrf_token" t-att-value="widget.options.csrf_token"/> <div class="form-group"> - <label class="control-label" for="name">Your Name</label> + <label class="col-form-label" for="name">Your Name</label> <input type="text" name="partner_name" id="o_portal_sign_name" class="form-control" t-att-value="widget.options.partnerName"/> </div> <div class="card mt16 mb0" id="o_portal_sign_draw"> diff --git a/addons/portal/views/portal_templates.xml b/addons/portal/views/portal_templates.xml index 2e44d979783..c0684eb7611 100644 --- a/addons/portal/views/portal_templates.xml +++ b/addons/portal/views/portal_templates.xml @@ -281,46 +281,46 @@ <t t-foreach="error_message" t-as="err"><t t-esc="err"/><br /></t> </div> </div> - <div t-attf-class="form-group #{error.get('name') and 'has-error' or ''} col-xl-6"> - <label class="control-label" for="name">Your Name</label> - <input type="text" name="name" class="form-control" t-att-value="name or partner.name" /> + <div t-attf-class="form-group #{error.get('name') and 'o_has_error' or ''} col-xl-6"> + <label class="col-form-label" for="name">Your Name</label> + <input type="text" name="name" t-attf-class="form-control #{error.get('name') and 'is-invalid' or ''}" t-att-value="name or partner.name" /> </div> - <div t-attf-class="form-group #{error.get('email') and 'has-error' or ''} col-xl-6"> - <label class="control-label" for="email">Email</label> - <input type="email" name="email" class="form-control" t-att-value="email or partner.email" /> + <div t-attf-class="form-group #{error.get('email') and 'o_has_error' or ''} col-xl-6"> + <label class="col-form-label" for="email">Email</label> + <input type="email" name="email" t-attf-class="form-control #{error.get('email') and 'is-invalid' or ''}" t-att-value="email or partner.email" /> </div> - <div t-attf-class="form-group #{error.get('phone') and 'has-error' or ''} col-xl-6"> - <label class="control-label" for="phone">Phone</label> - <input type="tel" name="phone" class="form-control" t-att-value="phone or partner.phone" /> + <div t-attf-class="form-group #{error.get('phone') and 'o_has_error' or ''} col-xl-6"> + <label class="col-form-label" for="phone">Phone</label> + <input type="tel" name="phone" t-attf-class="form-control #{error.get('phone') and 'is-invalid' or ''}" t-att-value="phone or partner.phone" /> </div> <div class="clearfix" /> - <div t-attf-class="form-group #{error.get('company_name') and 'has-error' or ''} col-xl-6"> - <label class="control-label label-optional" for="company_name">Company Name</label> - <p t-if="partner.commercial_partner_id.is_company" class="form-control" t-esc="partner.commercial_company_name"/> - <input t-else="" type="text" name="company_name" class="form-control" t-att-value="company_name or partner.company_name" t-att-readonly="None if partner.can_edit_vat() else '1'" t-att-title="None if partner.can_edit_vat() else 'Changing company name is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.'"/> + <div t-attf-class="form-group #{error.get('company_name') and 'o_has_error' or ''} col-xl-6"> + <label class="col-form-label label-optional" for="company_name">Company Name</label> + <p t-if="partner.commercial_partner_id.is_company" t-attf-class="form-control #{error.get('company_name') and 'is-invalid' or ''}" t-esc="partner.commercial_company_name"/> + <input t-else="" type="text" name="company_name" t-attf-class="form-control #{error.get('company_name') and 'is-invalid' or ''}" t-att-value="company_name or partner.company_name" t-att-readonly="None if partner.can_edit_vat() else '1'" t-att-title="None if partner.can_edit_vat() else 'Changing company name is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.'"/> </div> - <div t-attf-class="form-group #{error.get('vat') and 'has-error' or ''} col-xl-6"> - <label class="control-label label-optional" for="vat">VAT Number</label> - <input type="text" name="vat" class="form-control" t-att-value="vat or partner.vat" t-att-readonly="None if partner.can_edit_vat() else '1'" t-att-title="None if partner.can_edit_vat() else 'Changing VAT number is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.'" /> + <div t-attf-class="form-group #{error.get('vat') and 'o_has_error' or ''} col-xl-6"> + <label class="col-form-label label-optional" for="vat">VAT Number</label> + <input type="text" name="vat" t-attf-class="form-control #{error.get('vat') and 'is-invalid' or ''}" t-att-value="vat or partner.vat" t-att-readonly="None if partner.can_edit_vat() else '1'" t-att-title="None if partner.can_edit_vat() else 'Changing VAT number is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.'" /> </div> <div class="clearfix" /> - <div t-attf-class="form-group #{error.get('street') and 'has-error' or ''} col-xl-6"> - <label class="control-label" for="street">Street</label> - <input type="text" name="street" class="form-control" t-att-value="street or partner.street"/> + <div t-attf-class="form-group #{error.get('street') and 'o_has_error' or ''} col-xl-6"> + <label class="col-form-label" for="street">Street</label> + <input type="text" name="street" t-attf-class="form-control #{error.get('street') and 'is-invalid' or ''}" t-att-value="street or partner.street"/> </div> - <div t-attf-class="form-group #{error.get('city') and 'has-error' or ''} col-xl-6"> - <label class="control-label" for="city">City</label> - <input type="text" name="city" class="form-control" t-att-value="city or partner.city" /> + <div t-attf-class="form-group #{error.get('city') and 'o_has_error' or ''} col-xl-6"> + <label class="col-form-label" for="city">City</label> + <input type="text" name="city" t-attf-class="form-control #{error.get('city') and 'is-invalid' or ''}" t-att-value="city or partner.city" /> </div> - <div t-attf-class="form-group #{error.get('zip') and 'has-error' or ''} col-xl-6"> - <label class="control-label" for="zipcode">Zip / Postal Code</label> - <input type="text" name="zipcode" class="form-control" t-att-value="zipcode or partner.zip" /> + <div t-attf-class="form-group #{error.get('zip') and 'o_has_error' or ''} col-xl-6"> + <label class="col-form-label" for="zipcode">Zip / Postal Code</label> + <input type="text" name="zipcode" t-attf-class="form-control #{error.get('zip') and 'is-invalid' or ''}" t-att-value="zipcode or partner.zip" /> </div> - <div t-attf-class="form-group #{error.get('country_id') and 'has-error' or ''} col-xl-6"> - <label class="control-label" for="country_id">Country</label> - <select name="country_id" class="form-control"> + <div t-attf-class="form-group #{error.get('country_id') and 'o_has_error' or ''} col-xl-6"> + <label class="col-form-label" for="country_id">Country</label> + <select name="country_id" t-attf-class="form-control #{error.get('country_id') and 'is-invalid' or ''}"> <option value="">Country...</option> <t t-foreach="countries or []" t-as="country"> <option t-att-value="country.id" t-att-selected="country.id == int(country_id) if country_id else country.id == partner.country_id.id"> @@ -329,9 +329,9 @@ </t> </select> </div> - <div t-attf-class="form-group #{error.get('state_id') and 'has-error' or ''} col-xl-6"> - <label class="control-label label-optional" for="state_id">State / Province</label> - <select name="state_id" class="form-control"> + <div t-attf-class="form-group #{error.get('state_id') and 'o_has_error' or ''} col-xl-6"> + <label class="col-form-label label-optional" for="state_id">State / Province</label> + <select name="state_id" t-attf-class="form-control #{error.get('state_id') and 'is-invalid' or ''}"> <option value="">select...</option> <t t-foreach="states or []" t-as="state"> <option t-att-value="state.id" style="display:none;" t-att-data-country_id="state.country_id.id" t-att-selected="state.id == partner.state_id.id"> diff --git a/addons/rating/views/rating_template.xml b/addons/rating/views/rating_template.xml index 09c74853f58..161cd8276f3 100644 --- a/addons/rating/views/rating_template.xml +++ b/addons/rating/views/rating_template.xml @@ -42,7 +42,7 @@ <p style="margin-top:32px;"> Would be great if you can provide more information: </p> - <form class="form-horizontal" t-attf-action="/rating/#{token}/#{rate}/submit_feedback" method="post"> + <form t-attf-action="/rating/#{token}/#{rate}/submit_feedback" method="post"> <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/> <textarea class="form-control" name="feedback" rows="8" t-att-value="rating.feedback"></textarea> <button type="submit" class="btn btn-primary" style="margin-top:8px;">Send Feedback</button> diff --git a/addons/web/static/src/xml/web_calendar.xml b/addons/web/static/src/xml/web_calendar.xml index 3eb95710c48..b406e03d760 100644 --- a/addons/web/static/src/xml/web_calendar.xml +++ b/addons/web/static/src/xml/web_calendar.xml @@ -85,7 +85,7 @@ <main t-name="CalendarView.quick_create" class="o_calendar_quick_create"> <div class="form-group"> - <label for='name' class='control-label'>Summary:</label> + <label for='name' class='col-form-label'>Summary:</label> <input type='text' name='name' class="o_input" t-att-value="widget.dataTemplate.name or None"/> </div> </main> diff --git a/addons/web/views/database_manager.html b/addons/web/views/database_manager.html index d0da907076c..c7462a3c1b5 100644 --- a/addons/web/views/database_manager.html +++ b/addons/web/views/database_manager.html @@ -46,7 +46,7 @@ {% if insecure %} <input type="hidden" name="master_pwd" class="form-control" value="admin"/> {% else %} - <label for="master_pwd" class="control-label">Master Password</label> + <label for="master_pwd" class="col-form-label">Master Password</label> <input id="master_pwd" type="password" name="master_pwd" class="form-control" required="required" autofocus="autofocus"/> {% endif %} </div> @@ -59,7 +59,7 @@ <div class="form-group"> <div class="row"> <div class="col-lg-12"> - <label for="name" class="control-label">Database Name</label> + <label for="name" class="col-form-label">Database Name</label> <input id="name" type="text" name="name" class="form-control" required="required" autocomplete="off" pattern="{{ pattern }}" title="Only alphanumerical characters, underscore, hyphen and dot are allowed"/> </div> </div> @@ -67,20 +67,20 @@ <div class="form-group"> <div class="row"> <div class="col-lg-12"> - <label for="login" class="control-label">Email</label> + <label for="login" class="col-form-label">Email</label> <input id="login" type="text" name="login" class="form-control" required="required" autocomplete="off"/> </div> </div> </div> <div class="form-group has-feedback"> - <label for="password" class="control-label">Password</label> + <label for="password" class="col-form-label">Password</label> <input id="password" type="password" name="password" class="form-control" required="required" autocomplete="off"/> <span class="fa fa-eye o_little_eye form-control-feedback" aria-hidden="true" style="cursor: pointer; pointer-events: auto"></span> </div> <div class="form-group"> <div class="row"> <div class="col-lg-6"> - <label for="lang" class="control-label">Language</label> + <label for="lang" class="col-form-label">Language</label> <select id="lang" name="lang" class="form-control" required="required" autocomplete="off"> {% for lang in langs %} <option {% if lang[0] == "en_US" %}selected="selected" {% endif %}value="{{ lang[0] }}">{{ lang[1] }}</option> @@ -88,7 +88,7 @@ </select> </div> <div class="col-lg-6"> - <label for="country" class="control-label">Country</label> + <label for="country" class="col-form-label">Country</label> <select id="country" name="country_code" class="form-control" autocomplete="off"> <option value=""></option> {% for country in countries %} @@ -209,16 +209,16 @@ <div class="modal-body"> {{ master_input() }} <div class="form-group"> - <label for="backup_file" class="control-label">File</label> + <label for="backup_file" class="col-form-label">File</label> <input id="backup_file" type="file" name="backup_file" class="required"/> </div> <div class="form-group"> - <label for="name" class="control-label">Database Name</label> + <label for="name" class="col-form-label">Database Name</label> <input id="name" type="text" name="name" class="form-control" required="required" pattern="{{ pattern }}" title="Only alphanumerical characters, underscore, hyphen and dot are allowed"/> </div> <div class="form-group"> <label for="copy">This database might have been moved or copied.</label> - <p class="help-block">In order to avoid conflicts between databases, Odoo needs to know if this database was moved or copied. + <p class="form-text">In order to avoid conflicts between databases, Odoo needs to know if this database was moved or copied. If you don't know, answer "This database is a copy".</p> <div class="radio"> <label> @@ -256,7 +256,7 @@ <p>The master password is required to create, delete, dump or restore databases.</p> {{ master_input() }} <div class="form-group has-feedback"> - <label for="master_pwd_new" class="control-label">New Master Password</label> + <label for="master_pwd_new" class="col-form-label">New Master Password</label> <input id="master_pwd_new" type="password" name="master_pwd_new" class="form-control" required="required" autocomplete="off"/> <span class="fa fa-eye o_little_eye form-control-feedback" aria-hidden="true" style="cursor: pointer; pointer-events: auto"></span> </div> @@ -282,11 +282,11 @@ <div class="modal-body"> {{ master_input() }} <div class="form-group"> - <label for="name" class="control-label">Database Name</label> + <label for="name" class="col-form-label">Database Name</label> <input id="name" type="text" name="name" class="form-control" required="required" readonly="readonly"/> </div> <div class="form-group"> - <label for="new_name" class="control-label">New Name</label> + <label for="new_name" class="col-form-label">New Name</label> <input id="new_name" type="text" name="new_name" class="form-control" required="required" pattern="{{ pattern }}" title="Only alphanumerical characters, underscore, hyphen and dot are allowed"/> </div> </div> @@ -310,7 +310,7 @@ <div class="modal-body"> {{ master_input() }} <div class="form-group"> - <label for="name" class="control-label">Database</label> + <label for="name" class="col-form-label">Database</label> <input id="name" type="text" name="name" class="form-control" required="required" readonly="readonly"/> </div> </div> @@ -334,11 +334,11 @@ <div class="modal-body"> {{ master_input() }} <div class="form-group"> - <label for="name" class="control-label">Database Name</label> + <label for="name" class="col-form-label">Database Name</label> <input id="name" type="text" name="name" class="form-control" required="required" readonly="readonly"/> </div> <div class="form-group"> - <label for="backup_format" class="control-label">Backup Format</label> + <label for="backup_format" class="col-form-label">Backup Format</label> <select id="backup_format" name="backup_format" class="form-control" required="required"> <option value="zip">zip (includes filestore)</option> <option value="dump">pg_dump custom format (without filestore)</option> diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml index e6b958e1a85..57a580e0f13 100644 --- a/addons/web/views/webclient_templates.xml +++ b/addons/web/views/webclient_templates.xml @@ -358,7 +358,7 @@ <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/> <div class="form-group field-db" t-if="databases and len(databases) > 1"> - <label for="db" class="control-label">Database</label> + <label for="db" class="col-form-label">Database</label> <div class="input-group"> <input type="text" name="db" t-att-value="request.db" id="db" class="form-control" required="required" readonly="readonly"/> <span class="input-group-append"> @@ -368,12 +368,12 @@ </div> <div class="form-group field-login"> - <label for="login" class="control-label">Email</label> + <label for="login" class="col-form-label">Email</label> <input type="text" name="login" t-att-value="login" id="login" class="form-control" required="required" autofocus="autofocus" autocapitalize="off"/> </div> <div class="form-group field-password"> - <label for="password" class="control-label">Password</label> + <label for="password" class="col-form-label">Password</label> <input type="password" name="password" id="password" class="form-control" required="required" autocomplete="current-password" t-att-autofocus="'autofocus' if login else None" maxlength="4096"/> </div> 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> diff --git a/addons/website/data/website_demo.xml b/addons/website/data/website_demo.xml index e0bfa9012f9..814687fda8e 100644 --- a/addons/website/data/website_demo.xml +++ b/addons/website/data/website_demo.xml @@ -79,23 +79,23 @@ response = request.website.render("website.template_partner_post", {'partner': p </div> <div class="container"> <div class="row"> - <form class="form-horizontal" action="/website/action/website.action_partner_post" method="post"> + <form action="/website/action/website.action_partner_post" method="post"> <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/> - <div class="form-group"> - <label class="col-md-2 control-label">Recipient</label> + <div class="form-group row"> + <label class="col-md-2 col-form-label">Recipient</label> <div class="col-md-10"> <select t-if="partners" name="partner_id" class="form-control"> <t t-foreach="partners" t-as="partner"><option t-att-value="partner.id" t-esc="partner.name"/></t> </select> </div> </div> - <div class="form-group"> - <label class="col-md-2 control-label">Message</label> + <div class="form-group row"> + <label class="col-md-2 col-form-label">Message</label> <div class="col-md-10"> <textarea name="body" rows="10" class="form-control"/> </div> </div> - <div class="form-group"> + <div class="form-group row"> <div class="offset-md-2 col-md-10"> <button type="submit" class="btn btn-primary"> Send <span class="fa fa-long-arrow-right"/> diff --git a/addons/website/static/src/js/menu/content.js b/addons/website/static/src/js/menu/content.js index 378b35f1cdf..d9e634c729e 100644 --- a/addons/website/static/src/js/menu/content.js +++ b/addons/website/static/src/js/menu/content.js @@ -192,12 +192,12 @@ var PagePropertiesDialog = weWidgets.Dialog.extend({ var url = this.$('#page_url').val(); var $date_publish = this.$("#date_publish"); - $date_publish.closest(".form-group").removeClass('has-error'); + $date_publish.closest(".form-group").removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); var date_publish = $date_publish.val(); if (date_publish !== "") { date_publish = this._parse_date(date_publish); if (!date_publish) { - $date_publish.closest(".form-group").addClass('has-error'); + $date_publish.closest(".form-group").addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); return; } } @@ -394,7 +394,7 @@ var MenuEntryDialog = weWidgets.LinkDialog.extend({ save: function () { var $e = this.$('#o_link_dialog_label_input'); if (!$e.val() || !$e[0].checkValidity()) { - $e.closest('.form-group').addClass('has-error'); + $e.closest('.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid') $e.focus(); return; } diff --git a/addons/website/static/src/xml/website.facebook_page.xml b/addons/website/static/src/xml/website.facebook_page.xml index 2ccceddb3b0..7f16b568aec 100644 --- a/addons/website/static/src/xml/website.facebook_page.xml +++ b/addons/website/static/src/xml/website.facebook_page.xml @@ -2,16 +2,16 @@ <templates> <div t-name="website.facebook_page_dialog"> <div class="row"> - <form class="col-lg-6 form-horizontal"> - <div class="form-group"> - <label class="control-label col-md-3">Page URL</label> + <form class="col-lg-6"> + <div class="form-group row"> + <label class="col-form-label col-md-3">Page URL</label> <div class="col-md-9"> <input class="form-control o_facebook_page_url" required="required" t-att-value="widget.fbData.href"/> </div> </div> - <div class="form-group o_facebook_tabs"> + <div class="form-group row o_facebook_tabs"> <t t-set="fb_tabs" t-value="widget.fbData.tabs and widget.fbData.tabs.split(',') or []"/> - <label class="control-label col-md-3">Tabs</label> + <label class="col-form-label col-md-3">Tabs</label> <div class="col-md-3 checkbox"> <label><input type="checkbox" name="timeline" t-att-checked="_.contains(fb_tabs, 'timeline') or None"/>Timeline</label> </div> @@ -22,8 +22,8 @@ <label><input type="checkbox" name="messages" t-att-checked="_.contains(fb_tabs, 'messages') or None"/>Messages</label> </div> </div> - <div class="form-group o_facebook_options"> - <label class="control-label col-md-3">Options</label> + <div class="form-group row o_facebook_options"> + <label class="col-form-label col-md-3">Options</label> <div class="col-md-9 mt8"> <label class="o_switch"> <input name="small_header" type="checkbox" t-att-checked="widget.fbData.small_header or None"/> diff --git a/addons/website/static/src/xml/website.pageProperties.xml b/addons/website/static/src/xml/website.pageProperties.xml index 3dce6d68b7d..7f3b4cbfc64 100644 --- a/addons/website/static/src/xml/website.pageProperties.xml +++ b/addons/website/static/src/xml/website.pageProperties.xml @@ -39,33 +39,33 @@ <!-- Page Properties --> <div t-name="website.pagesMenu.page_info" class="o_page_management_info"> - <form class="form-horizontal"> + <form> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"><a aria-controls="basic_page_info" role="tab" data-toggle="tab" class="nav-link active" href="#basic_page_info">Name</a></li> <li class="nav-item"><a aria-controls="advances_page_info" role="tab" data-toggle="tab" class="nav-link" href="#advances_page_info">Publish</a></li> </ul> <div class="tab-content mt16"> <div role="tabpanel" id="basic_page_info" class="tab-pane fade in active"> - <div class="form-group"> - <label class="control-label col-md-3" for="page_name">Page Name</label> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="page_name">Page Name</label> <div class="col-md-9"> - <input type="text" class="form-control input-sm" id="page_name" t-att-value="widget.page.name" /> + <input type="text" class="form-control form-control-sm" id="page_name" t-att-value="widget.page.name" /> </div> </div> <div class="form-group warn_about_call"></div> - <div class="form-group"> - <label class="control-label col-md-3" for="page_url">Page URL</label> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="page_url">Page URL</label> <div class="col-md-9"> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" t-att-title="widget.serverUrl"><small><t t-esc="widget.serverUrlTrunc"/></small></span> </div> - <input type="text" class="form-control input-sm" id="page_url" t-att-value="widget.page.url" /> + <input type="text" class="form-control form-control-sm" id="page_url" t-att-value="widget.page.url" /> </div> </div> </div> - <div class="form-group ask_for_redirect"> - <label class="control-label col-md-3" for="create_redirect">Redirect Old URL</label> + <div class="form-group row ask_for_redirect"> + <label class="col-form-label col-md-3" for="create_redirect">Redirect Old URL</label> <div class="col-md-2"> <a> <label class="o_switch" for="create_redirect" > @@ -78,8 +78,8 @@ <span class="text-muted" id="dependencies_redirect"></span> </div> </div> - <div class="form-group ask_for_redirect"> - <label class="control-label col-md-3 redirect_type" for="redirect_type">Type</label> + <div class="form-group row ask_for_redirect"> + <label class="col-form-label col-md-3 redirect_type" for="redirect_type">Type</label> <div class="col-md-6 redirect_type"> <select class="form-control" id="redirect_type"> <option t-foreach="widget.fields.type.selection" t-as="field" t-att-value="field[0]"><t t-esc="field[0] + ': ' + field[1]" /></option> @@ -88,8 +88,8 @@ </div> </div> <div role="tabpanel" id="advances_page_info" class="tab-pane fade"> - <div class="form-group"> - <label class="control-label col-md-3" for="is_menu">Show in Top Menu</label> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="is_menu">Show in Top Menu</label> <div class="col-md-2"> <label class="o_switch" for="is_menu" > <input type="checkbox" t-att-checked="widget.page.menu_ids.length > 0 ? true : undefined" id="is_menu"/> @@ -97,8 +97,8 @@ </label> </div> </div> - <div class="form-group"> - <label class="control-label col-md-3" for="is_homepage">Use as Homepage</label> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="is_homepage">Use as Homepage</label> <div class="col-md-2"> <label class="o_switch" for="is_homepage" > <input type="checkbox" t-att-checked="widget.page.is_homepage ? true : undefined" id="is_homepage"/> @@ -106,8 +106,8 @@ </label> </div> </div> - <div class="form-group"> - <label class="control-label col-md-3" for="is_indexed"> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="is_indexed"> Indexed <i class="fa fa-question-circle-o" title="Hide this page from search results" role="img" aria-label="Info"></i> </label> @@ -118,8 +118,8 @@ </label> </div> </div> - <div class="form-group"> - <label class="control-label col-md-3" for="is_published">Publish</label> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="is_published">Publish</label> <div class="col-md-2"> <label class="o_switch js_publish_btn" for="is_published"> <input type="checkbox" t-att-checked="widget.page.website_published ? true : undefined" id="is_published"/> @@ -127,8 +127,8 @@ </label> </div> </div> - <div class="form-group"> - <label class="control-label col-md-3" for="date_publish">Publishing Date</label> + <div class="form-group row"> + <label class="col-form-label col-md-3" for="date_publish">Publishing Date</label> <div class="col-md-9"> <div class='input-group date' id='date_publish_container'> <input type='text' class="form-control" name="date_publish" id="date_publish" /> diff --git a/addons/website/static/src/xml/website.seo.xml b/addons/website/static/src/xml/website.seo.xml index 0be96dd728f..90e6f8fa0b3 100644 --- a/addons/website/static/src/xml/website.seo.xml +++ b/addons/website/static/src/xml/website.seo.xml @@ -9,15 +9,15 @@ <div t-name="website.seo_configuration"> <section class="row"> <div class="col-lg-6"> - <div class="form-horizontal mt16" role="form"> - <div class="form-group"> - <label for="seo_page_title" class="col-3 control-label">Page Title</label> + <div class="mt16" role="form"> + <div class="form-group row"> + <label for="seo_page_title" class="col-3 col-form-label">Page Title</label> <div class="col-9"> <input type="text" name="seo_page_title" class="form-control" maxlength="70" size="70"/> </div> </div> - <div class="form-group"> - <label for="seo_page_description" class="col-3 control-label">Description</label> + <div class="form-group row"> + <label for="seo_page_description" class="col-3 col-form-label">Description</label> <div class="col-9"> <textarea name="seo_page_description" class="form-control" style="max-width: 100%;height:145px;max-height:145px" t-att-maxlength="widget.maxDescriptionSize"/> </div> diff --git a/addons/website/static/src/xml/website.xml b/addons/website/static/src/xml/website.xml index 72036f9217b..e391fcfd5f8 100644 --- a/addons/website/static/src/xml/website.xml +++ b/addons/website/static/src/xml/website.xml @@ -9,9 +9,9 @@ <h3 class="modal-title"><t t-esc="window_title"/></h3> </header> <main class="modal-body"> - <form class="form-horizontal" role="form" t-att-id="id"> - <div class="form-group mb0"> - <label for="page-name" class="col-md-3 control-label"> + <form role="form" t-att-id="id"> + <div class="form-group row mb0"> + <label for="page-name" class="col-md-3 col-form-label"> <t t-esc="field_name"/>: </label> <div class="col-md-8"> @@ -64,9 +64,9 @@ <div t-name="website.rename_page"> <div class="card"> <div class="card-body"> - <form class="form-horizontal"> - <div class="form-group mb0"> - <label for="new_name" class="control-label col-md-4">Rename Page To:</label> + <form> + <div class="form-group row mb0"> + <label for="new_name" class="col-form-label col-md-4">Rename Page To:</label> <div class="col-md-8"> <input type="text" class="form-control" id="new_name" placeholder="e.g. About Us"/> </div> diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml index 789319ec2e6..1f49c482f04 100644 --- a/addons/website/views/website_templates.xml +++ b/addons/website/views/website_templates.xml @@ -724,15 +724,15 @@ <body> <div role="dialog" id="reset_template_confirmation" class="modal" tabindex="-1" t-ignore="true"> <div class="modal-dialog"> - <form class="form-horizontal" role="form"> + <form role="form"> <div class="modal-content"> <header class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button> <h3 class="modal-title">Reset templates</h3> </header> <main class="modal-body"> - <div class="form-group mb0"> - <label for="page-name" class="col-md-9"> + <div class="form-group row mb0"> + <label for="page-name" class="col-md-9 col-form-label"> <p>The selected templates will be reset to their factory settings.</p> <p>Type '<i class="confirm_word">yes</i>' in the box below if you want to confirm.</p> </label> diff --git a/addons/website_blog/static/src/scss/website_blog.scss b/addons/website_blog/static/src/scss/website_blog.scss index 141d77b2c31..cff15ed82e5 100644 --- a/addons/website_blog/static/src/scss/website_blog.scss +++ b/addons/website_blog/static/src/scss/website_blog.scss @@ -1,6 +1,6 @@ .website_blog { .css_website_mail { - .has-error { + .o_has_error { border-color: red; } .css_nav_month { diff --git a/addons/website_crm/views/website_crm_templates.xml b/addons/website_crm/views/website_crm_templates.xml index 5aa3814856d..0d375a74eea 100644 --- a/addons/website_crm/views/website_crm_templates.xml +++ b/addons/website_crm/views/website_crm_templates.xml @@ -3,44 +3,44 @@ <template id="contactus_form" name="Contact Form" inherit_id="website.contactus" customize_show="True"> <xpath expr="//div[@name='mail_button']" position="replace"> <div> - <form action="/website_form/" method="post" data-model_name="crm.lead" data-success_page="/contactus-thank-you" class="s_website_form form-horizontal container-fluid mt32" enctype="multipart/form-data" data-editable-form="false"> - <div class="form-group form-field o_website_form_required_custom"> - <label class="col-lg-3 col-md-4 control-label" for="contact_name">Your Name</label> + <form action="/website_form/" method="post" data-model_name="crm.lead" data-success_page="/contactus-thank-you" class="s_website_form container-fluid mt32" enctype="multipart/form-data" data-editable-form="false"> + <div class="form-group row form-field o_website_form_required_custom"> + <label class="col-lg-3 col-md-4 col-form-label" for="contact_name">Your Name</label> <div class="col-lg-7 col-md-8"> <input type="text" class="form-control o_website_form_input" name="contact_name" t-att-value="request.params.get('contact_name', '')" required=""/> </div> </div> - <div class="form-group form-field"> - <label class="col-lg-3 col-md-4 control-label" for="phone">Phone Number</label> + <div class="form-group row form-field"> + <label class="col-lg-3 col-md-4 col-form-label" for="phone">Phone Number</label> <div class="col-lg-7 col-md-8"> <input type="text" class="form-control o_website_form_input" name="phone" t-att-value="request.params.get('phone', '')" /> </div> </div> - <div class="form-group form-field o_website_form_required_custom"> - <label class="col-lg-3 col-md-4 control-label" for="email_from">Email</label> + <div class="form-group row form-field o_website_form_required_custom"> + <label class="col-lg-3 col-md-4 col-form-label" for="email_from">Email</label> <div class="col-lg-7 col-md-8"> <input type="text" class="form-control o_website_form_input" name="email_from" required="" t-att-value="request.params.get('email_from', '')" /> </div> </div> - <div class="form-group form-field o_website_form_required_custom"> - <label class="col-lg-3 col-md-4 control-label" for="partner_name">Your Company</label> + <div class="form-group row form-field o_website_form_required_custom"> + <label class="col-lg-3 col-md-4 col-form-label" for="partner_name">Your Company</label> <div class="col-lg-7 col-md-8"> <input type="text" class="form-control o_website_form_input" name="partner_name" required="" t-att-value="request.params.get('partner_name', '')" /> </div> </div> - <div class="form-group form-field o_website_form_required"> - <label class="col-lg-3 col-md-4 control-label" for="name">Subject</label> + <div class="form-group row form-field o_website_form_required"> + <label class="col-lg-3 col-md-4 col-form-label" for="name">Subject</label> <div class="col-lg-7 col-md-8"> <input type="text" class="form-control o_website_form_input" name="name" required="" t-att-value="request.params.get('name', '')" /> </div> </div> - <div class="form-group form-field o_website_form_required_custom"> - <label class="col-lg-3 col-md-4 control-label" for="description">Your Question</label> + <div class="form-group row form-field o_website_form_required_custom"> + <label class="col-lg-3 col-md-4 col-form-label" for="description">Your Question</label> <div class="col-lg-7 col-md-8"> <textarea class="form-control o_website_form_input" name="description" required=""><t t-esc="request.params.get('description', '')"/></textarea> </div> </div> - <div class="form-group"> + <div class="form-group row"> <div class="offset-lg-3 offset-md-4 col-md-8 col-lg-7"> <a href="#" role="button" class="btn btn-primary btn-lg o_website_form_send">Send</a> <span id="o_website_form_result"></span> diff --git a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml index fee450c06d9..9e41da035a8 100644 --- a/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml +++ b/addons/website_crm_partner_assign/views/website_crm_partner_assign_templates.xml @@ -277,15 +277,15 @@ </header> <main class="modal-body" id="new-opp-dialog"> <div class="form-group"> - <label class="control-label hdd4" for="contact_name">Contact name</label> + <label class="col-form-label hdd4" for="contact_name">Contact name</label> <input type='text' name="contact_name" class="form-control contact_name"/> </div> <div class="form-group"> - <label class="control-label h4dd" for="title">Title</label> + <label class="col-form-label h4dd" for="title">Title</label> <input type='text' name="title" class="form-control title"/> </div> <div class="form-group"> - <label class="control-label hdd4" for="description">Description</label> + <label class="col-form-label hdd4" for="description">Description</label> <textarea row="3" name="description" class="form-control description"></textarea> </div> </main> @@ -436,11 +436,11 @@ </header> <main class="modal-body" id="sign-dialog"> <div class="form-group"> - <label class="control-label" for="comment">What is the next action? When? What is the expected revenue?</label> + <label class="col-form-label" for="comment">What is the next action? When? What is the expected revenue?</label> <input type="text" name="comment" id="comment" class="form-control comment_interested"/> </div> <div class="form-group"> - <label class="control-label" for="customer_contacted">Do you have contacted the customer?</label> + <label class="col-form-label" for="customer_contacted">Do you have contacted the customer?</label> <input type="checkbox" name="customer_contacted" id="customer_contacted" class="contacted_interested"/> </div> <div> @@ -465,15 +465,15 @@ </header> <main class="modal-body" id="sign-dialog"> <div class="form-group"> - <label class="control-label" for="comment">Why aren't you interested by this lead?</label> + <label class="col-form-label" for="comment">Why aren't you interested by this lead?</label> <input type="text" name="comment" id="comment" class="form-control comment_desinterested"/> </div> <div class="form-group"> - <label class="control-label" for="contacted_desinterested">Do you have contacted the customer?</label> + <label class="col-form-label" for="contacted_desinterested">Do you have contacted the customer?</label> <input type="checkbox" name="contacted_desinterested" id="contacted_desinterested" class="contacted_desinterested"/> </div> <div class="form-group"> - <label class="control-label" for="customer_mark_spam">This lead is a spam</label> + <label class="col-form-label" for="customer_mark_spam">This lead is a spam</label> <input type="checkbox" name="customer_mark_spam" id="customer_mark_spam" class="customer_mark_spam"/> </div> <div> @@ -551,30 +551,30 @@ <main class="modal-body" id="sign-dialog"> <t t-if="opportunity.partner_name"> <div class="form-group"> - <label class="control-label" for="partner_name">Customer Name</label> + <label class="col-form-label" for="partner_name">Customer Name</label> <input type="text" name="partner_name" class="form-control partner_name" t-att-value="opportunity.partner_name"/> </div> </t> <t t-if="not opportunity.partner_name"> <div class="form-group"> - <label class="control-label" for="partner_name">Customer Name</label> + <label class="col-form-label" for="partner_name">Customer Name</label> <input type="text" name="partner_name" class="form-control partner_name" t-att-value="opportunity.contact_name"/> </div> </t> <div class="form-group"> - <label class="control-label" for="phone">Phone</label> + <label class="col-form-label" for="phone">Phone</label> <input type="text" name="phone" class="form-control phone" t-att-value="opportunity.phone"/> </div> <div class="form-group"> - <label class="control-label" for="mobile">Mobile</label> + <label class="col-form-label" for="mobile">Mobile</label> <input type="text" name="mobile" class="form-control mobile" t-att-value="opportunity.mobile"/> </div> <div class="form-group"> - <label class="control-label" for="email_from">Email</label> + <label class="col-form-label" for="email_from">Email</label> <input type="text" name="email_from" class="form-control email_from" t-att-value="opportunity.email_from"/> </div> <div class="form-group"> - <label class="control-label" for="street">Address</label> + <label class="col-form-label" for="street">Address</label> <input type="text" name="street" class="form-control street" t-att-value="opportunity.street" placeholder="Street"/> </div> <div class="form-group"> @@ -718,7 +718,7 @@ </div> </div> <div class="form-group"> - <label class="control-label" for="next_activity">Next Activity</label> + <label class="col-form-label" for="next_activity">Next Activity</label> <select class="form-control next_activity" name="next_activity"> <t t-foreach="activity_types" t-as="activity_type"> <option t-att-data="activity_type.id" t-att-selected="activity_type.id == user_activity.activity_type_id.id" t-att-name="activity_type.name" t-att-days="activity_type.days" t-att-summary="activity_type.summary"><t t-esc="activity_type.name"/></option> @@ -726,11 +726,11 @@ </select> </div> <div class="form-group"> - <label class="control-label" for="activity_summary">Details Next Activity</label> + <label class="col-form-label" for="activity_summary">Details Next Activity</label> <textarea row="3" name="activity_summary" class="form-control activity_summary"><t t-esc="user_activity.summary"/></textarea> </div> <div class="form-group"> - <label class="control-label" for="activity_date_deadline">Next Activity Date</label> + <label class="col-form-label" for="activity_date_deadline">Next Activity Date</label> <div class='input-group date'> <input type="text" name="activity_date_deadline" t-att-value="user_activity.date_deadline" class="form-control activity_date_deadline" data-date-format="YYYY-MM-DD" t-att-name="prefix" placeholder="YYYY-MM-DD" /> <div class="input-group-append"> diff --git a/addons/website_event_track/views/event_track_templates.xml b/addons/website_event_track/views/event_track_templates.xml index 053ca9c8a5a..ddc15b4516b 100644 --- a/addons/website_event_track/views/event_track_templates.xml +++ b/addons/website_event_track/views/event_track_templates.xml @@ -340,28 +340,28 @@ </section> </div> <section id="forms" t-if="event.website_track_proposal"> - <form class="form-horizontal mt32 js_website_submit_form" t-attf-action="/event/#{event.id}/track_proposal/post" method="post" enctype="multipart/form-data"> + <form class="mt32 js_website_submit_form" t-attf-action="/event/#{event.id}/track_proposal/post" method="post" enctype="multipart/form-data"> <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/> - <div class="form-group"> - <label class="col-lg-3 col-md-4 control-label" for="partner_name">Your Name</label> + <div class="form-group row"> + <label class="col-lg-3 col-md-4 col-form-label" for="partner_name">Your Name</label> <div class="col-lg-7 col-md-8"> <input type="text" class="form-control" name="partner_name" required="True" /> </div> </div> - <div class="form-group"> - <label class="col-lg-3 col-md-4 control-label" for="email_from">Your Email</label> + <div class="form-group row"> + <label class="col-lg-3 col-md-4 col-form-label" for="email_from">Your Email</label> <div class="col-lg-7 col-md-8"> <input type="email" class="form-control" name="email_from" required="True" /> </div> </div> - <div class="form-group"> - <label class="col-lg-3 col-md-4 control-label" for="phone">Your Phone</label> + <div class="form-group row"> + <label class="col-lg-3 col-md-4 col-form-label" for="phone">Your Phone</label> <div class="col-lg-7 col-md-8"> <input type="text" class="form-control" name="phone" required="True" /> </div> </div> - <div class="form-group" t-if="len(event.allowed_track_tag_ids)"> - <label class="col-lg-3 col-md-4 control-label" for="phone">Tags</label> + <div class="form-group row" t-if="len(event.allowed_track_tag_ids)"> + <label class="col-lg-3 col-md-4 col-form-label" for="phone">Tags</label> <div class="col-lg-9 col-md-8"> <div class="row"> <label class="col-md-4" t-foreach="event.allowed_track_tag_ids" t-as="tag"> @@ -371,25 +371,25 @@ </div> </div> </div> - <div class="form-group"> - <label class="col-lg-3 col-md-4 control-label" for="track_name">Talk Title</label> + <div class="form-group row"> + <label class="col-lg-3 col-md-4 col-form-label" for="track_name">Talk Title</label> <div class="col-lg-7 col-md-8"> <input type="text" class="form-control" name="track_name" required="True"/> </div> </div> - <div class="form-group"> - <label class="col-lg-3 col-md-4 control-label" for="phone">Speaker Biography</label> + <div class="form-group row"> + <label class="col-lg-3 col-md-4 col-form-label" for="phone">Speaker Biography</label> <div class="col-lg-7 col-md-8"> <textarea class="form-control" name="biography" style="min-height: 120px"/> </div> </div> - <div class="form-group"> - <label class="col-lg-3 col-md-4 control-label" for="description">Talk Introduction</label> + <div class="form-group row"> + <label class="col-lg-3 col-md-4 col-form-label" for="description">Talk Introduction</label> <div class="col-lg-7 col-md-8"> <textarea class="form-control" name="description" style="min-height: 120px"/> </div> </div> - <div class="form-group"> + <div class="form-group row"> <div class="offset-lg-3 offset-md-4 col-md-8 col-lg-7"> <button type="submit" class="btn btn-primary">Submit Proposal</button> </div> diff --git a/addons/website_form/static/src/js/website_form.js b/addons/website_form/static/src/js/website_form.js index 379620b86ad..53603128ec0 100644 --- a/addons/website_form/static/src/js/website_form.js +++ b/addons/website_form/static/src/js/website_form.js @@ -150,7 +150,7 @@ odoo.define('website_form.animation', function (require) { // Loop on all fields this.$target.find('.form-field').each(function (k, field){ var $field = $(field); - var field_name = $field.find('.control-label').attr('for'); + var field_name = $field.find('.col-form-label').attr('for'); // Validate inputs for this field var inputs = $field.find('.o_website_form_input:not(#editable_select)'); @@ -183,9 +183,9 @@ odoo.define('website_form.animation', function (require) { }); // Update field color if invalid or erroneous - $field.removeClass('has-error'); + $field.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); if (invalid_inputs.length || error_fields[field_name]){ - $field.addClass('has-error'); + $field.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid') if (_.isString(error_fields[field_name])){ $field.popover({content: error_fields[field_name], trigger: 'hover', container: 'body', placement: 'top'}); // update error message and show it. diff --git a/addons/website_form/static/src/scss/website_form.scss b/addons/website_form/static/src/scss/website_form.scss index f0f2f6ea077..1250e827f79 100644 --- a/addons/website_form/static/src/scss/website_form.scss +++ b/addons/website_form/static/src/scss/website_form.scss @@ -37,7 +37,7 @@ // Required fields have a star which is not part of the field label .o_website_form_required, .o_website_form_required_custom { - .control-label:after { + .col-form-label:after { content: ' *'; } } diff --git a/addons/website_forum/views/website_forum.xml b/addons/website_forum/views/website_forum.xml index 33fa9131de8..deb678fb6c0 100644 --- a/addons/website_forum/views/website_forum.xml +++ b/addons/website_forum/views/website_forum.xml @@ -460,33 +460,33 @@ We keep a high level of quality in showcased posts, around 20% of the submited posts will be featured. </p> - <form t-att-action="action_url" method="post" role="form" class="tag_text form-horizontal js_website_submit_form"> + <form t-att-action="action_url" method="post" role="form" class="tag_text js_website_submit_form"> <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/> <input type="hidden" name="karma" t-attf-value="#{user.karma}" id="karma"/> <input type="hidden" name="karma_edit_retag" t-attf-value="#{forum.karma_edit_retag}" id="karma_edit_retag"/> - <div class="form-group"> - <label class="col-md-2 control-label" for="content_link">URL to Share</label> + <div class="form-group row"> + <label class="col-md-2 col-form-label" for="content_link">URL to Share</label> <div class="col-md-8"> <input type="text" name="content_link" required="True" t-attf-value="#{post_name}" class="form-control mb16 o_forum_post_link" placeholder="e.g. https://www.odoo.com"/> </div> </div> - <div class="form-group"> - <label class="col-md-2 control-label" for="post_name">Post Title</label> + <div class="form-group row"> + <label class="col-md-2 col-form-label" for="post_name">Post Title</label> <div class="col-md-8"> <input type="text" name="post_name" required="True" t-attf-value="#{content}" class="form-control"/> </div> </div> <input type="hidden" name="karma_tag_create" t-attf-value="#{forum.karma_tag_create}" id="karma_tag_create"/> - <div class="form-group"> - <label class="col-md-2 control-label" for="post_tags">Tags</label> + <div class="form-group row"> + <label class="col-md-2 col-form-label" for="post_tags">Tags</label> <div class="col-md-8"> <input type="hidden" name="karma_edit_retag" t-attf-value="#{forum.karma_edit_retag}" id="karma_edit_retag"/> <input type="text" name="post_tags" class="form-control js_select2"/> </div> </div> - <div class="form-group"> + <div class="form-group row"> <div class="offset-md-2 col-md-8"> <button type="submit" t-attf-class="btn btn-primary #{forum.allow_share and 'oe_social_share_call' or ''} #{(user.karma < forum.karma_ask) and 'karma_required' or ''}" t-att-data-karma="forum.karma_ask" @@ -618,11 +618,11 @@ users having a high karma can see offensive posts to moderate them. </p> - <form t-attf-action="/forum/#{ slug(forum) }/#{offensive and 'post' or 'question'}/#{slug(question)}/#{offensive and 'mark_as_offensive' or 'close'}" method="post" role="form" class="form-horizontal mt32 mb64 js_website_submit_form"> + <form t-attf-action="/forum/#{ slug(forum) }/#{offensive and 'post' or 'question'}/#{slug(question)}/#{offensive and 'mark_as_offensive' or 'close'}" method="post" role="form" class="mt32 mb64 js_website_submit_form"> <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/> <input name="post_id" t-att-value="question.id" type="hidden"/> - <div class="form-group"> - <label class="col-lg-3 control-label" for="reason">Post:</label> + <div class="form-group row"> + <label class="col-lg-3 col-form-label" for="reason">Post:</label> <div class="col-lg-8 mt8"> <t t-if="not question.parent_id"> <span t-field="question.name"/> @@ -632,8 +632,8 @@ </t> </div> </div> - <div class="form-group"> - <label class="col-lg-3 control-label" for="reason">Reason:</label> + <div class="form-group row"> + <label class="col-lg-3 col-form-label" for="reason">Reason:</label> <div class="col-lg-8"> <select class="form-control" name="reason_id"> <t t-foreach="reasons or []" t-as="reason"> @@ -642,7 +642,7 @@ </select> </div> </div> - <div class="form-group"> + <div class="form-group row"> <div class="offset-lg-3 col-lg-8"> <button type="submit" class="btn btn-primary"> <t t-if="offensive">Mark as offensive</t> @@ -1280,7 +1280,7 @@ <t t-call="website_forum.header"> <h3>Edit Profile</h3> <div class="row"> - <form t-attf-action="/forum/#{slug(forum)}/user/#{slug(user)}/save" method="post" role="form" class="form-horizontal js_website_submit_form" enctype="multipart/form-data"> + <form t-attf-action="/forum/#{slug(forum)}/user/#{slug(user)}/save" method="post" role="form" class="js_website_submit_form" enctype="multipart/form-data"> <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/> <input type="file" class="d-none o_forum_file_upload" name="ufile" accept="image/*"/> <div class="col-lg-2"> @@ -1294,43 +1294,43 @@ </div> <div class="col-lg-10"> <input name="user_id" t-att-value="user.id" type="hidden"/> - <div class="form-group"> - <label class="col-lg-2 control-label mb16" for="user_name">Real name</label> + <div class="form-group row"> + <label class="col-lg-2 col-form-label mb16" for="user_name">Real name</label> <div class="col-lg-8 mb16"> <input type="text" class="form-control" name="name" id="user_name" required="True" t-attf-value="#{user.name}"/> </div> </div> - <div class="form-group"> - <label class="col-lg-2 control-label mb16" for="user_website_published" t-if="user.id == uid">Public profile</label> + <div class="form-group row"> + <label class="col-lg-2 col-form-label mb16" for="user_website_published" t-if="user.id == uid">Public profile</label> <div class="col-lg-8 mb16" t-if="user.id == uid"> <input type="checkbox" class="mt8" name="website_published" id="user_website_published" value="True" t-if="not user.website_published"/> <input type="checkbox" class="mt8" name="website_published" id="user_website_published" value="True" checked="checked" t-if="user.website_published"/> </div> </div> - <div class="form-group"> - <label class="col-lg-2 control-label mb16" for="user_website">Website</label> + <div class="form-group row"> + <label class="col-lg-2 col-form-label mb16" for="user_website">Website</label> <div class="col-lg-8 mb16"> <input type="text" class="form-control" name="website" id="user_website" t-attf-value="#{user.partner_id.website or ''}"/> </div> </div> - <div class="form-group"> + <div class="form-group row"> <div t-if="email_required" class="alert alert-danger alert-dismissable oe_forum_email_required" role="alert"> <button type="button" class="close" data-dismiss="alert">x</button> <p>Please enter a valid email address in order to receive notifications from answers or comments.</p> </div> - <label class="col-lg-2 control-label mb16" for="user_email">Email</label> + <label class="col-lg-2 col-form-label mb16" for="user_email">Email</label> <div class="col-lg-8 mb16"> <input type="text" class="form-control" name="email" id="user_email" required="True" t-attf-value="#{user.partner_id.email}"/> </div> </div> - <div class="form-group"> - <label class="col-lg-2 control-label mb16" for="user_city">City</label> + <div class="form-group row"> + <label class="col-lg-2 col-form-label mb16" for="user_city">City</label> <div class="col-lg-8 mb16"> <input type="text" class="form-control" name="city" id="user_city" t-attf-value="#{user.partner_id.city or ''}"/> </div> </div> - <div class="form-group"> - <label class="col-lg-2 control-label mb16">Country</label> + <div class="form-group row"> + <label class="col-lg-2 col-form-label mb16">Country</label> <div class="col-lg-8 mb16"> <select class="form-control" name="country"> <option value="">Country...</option> @@ -1341,14 +1341,14 @@ </div> </div> <!--Note: using website_description fiels instead of using commnt firld of partner--> - <div class="form-group"> - <label class="col-lg-2 control-label mb16" for="description">Biography</label> + <div class="form-group row"> + <label class="col-lg-2 col-form-label mb16" for="description">Biography</label> <div class="col-lg-8 mb16"> <textarea name="description" id="description" style="min-height: 120px" required="True" class="form-control load_editor"><t t-esc="user.partner_id.website_description"/></textarea> </div> </div> - <div class="offset-md-2 col-lg-2 mb16"> + <div class="offset-md-2 col-lg-2 mb16"><!-- FIXME should in a row --> <button type="submit" class="btn btn-primary btn-lg">Update</button> </div> </div> diff --git a/addons/website_forum_doc/views/website_doc.xml b/addons/website_forum_doc/views/website_doc.xml index b2bb0f62029..bc42be27992 100644 --- a/addons/website_forum_doc/views/website_doc.xml +++ b/addons/website_forum_doc/views/website_doc.xml @@ -189,17 +189,17 @@ <div class="container"> <div class="card"> <div class="card-body"> - <form t-attf-action="/forum/#{ slug(forum) }/promote_ok" method="post" role="form" class="form-horizontal"> + <form t-attf-action="/forum/#{ slug(forum) }/promote_ok" method="post" role="form"> <input type="hidden" name="csrf_token" t-att-value="request.csrf_token()"/> <input name="post_id" t-att-value="post.id" type="hidden"/> - <div class="form-group"> - <label class="col-lg-3 control-label" for="reason">Question:</label> + <div class="form-group row"> + <label class="col-lg-3 col-form-label" for="reason">Question:</label> <div class="col-lg-8 mt8"> <span t-field="post.name"/> </div> </div> - <div class="form-group"> - <label class="col-lg-3 control-label" for="reason">Publish in Chapter:</label> + <div class="form-group row"> + <label class="col-lg-3 col-form-label" for="reason">Publish in Chapter:</label> <div class="col-lg-8"> <select class="form-control" name="toc_id"> <option/> @@ -209,8 +209,8 @@ </select> </div> </div> - <div class="form-group"> - <div class="offset-lg-3 col-lg-8"> + <div class="form-group row"> + <div class="offset-lg-3 col-lg-8 col-form-label"> <button class="btn btn-primary">Push to documentation</button> <span class="text-muted">or</span> <a role="button" class="btn btn-link" t-attf-href="/forum/#{ slug(forum) }/question/#{ slug(post) }">cancel</a> diff --git a/addons/website_gengo/static/src/js/website_gengo.js b/addons/website_gengo/static/src/js/website_gengo.js index c3ae0e922d7..72c472b5b28 100644 --- a/addons/website_gengo/static/src/js/website_gengo.js +++ b/addons/website_gengo/static/src/js/website_gengo.js @@ -172,16 +172,16 @@ var GengoApiConfigDialog = Widget.extend({ var pub_el = this.$el.find(".gengo_group_public")[0]; var pri_el = this.$el.find(".gengo_group_private")[0]; if (! public_key){ - $(pub_el).addClass("has-error"); + $(pub_el).addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); } else { - $(pub_el).removeClass("has-error"); + $(pub_el).removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); } if (! private_key){ - $(pri_el).addClass("has-error"); + $(pri_el).addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); } else { - $(pri_el).removeClass("has-error"); + $(pri_el).removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); } if (public_key && private_key){ ajax.jsonRpc('/website/set_gengo_config', 'call', { diff --git a/addons/website_gengo/static/src/xml/website.gengo.xml b/addons/website_gengo/static/src/xml/website.gengo.xml index a7ae579d116..81859518730 100644 --- a/addons/website_gengo/static/src/xml/website.gengo.xml +++ b/addons/website_gengo/static/src/xml/website.gengo.xml @@ -120,14 +120,14 @@ <ul class="list-group"> <li class="list-group-item form-group gengo_group_public"> <h4 class="list-group-item-heading"> - <label class="control-label">Public key</label> + <label class="col-form-label">Public key</label> </h4> <input type="text" class="form-control url url-source" id="gengo_public_key" placeholder="Paste public key here"/> </li> <li class="list-group-item form-group gengo_group_private"> <h4 class="list-group-item-heading"> - <label for="link-external" class="control-label">Private key</label> + <label for="link-external" class="col-form-label">Private key</label> </h4> <input type="text" class="form-control url url-source" id="gengo_private_key" placeholder="Paste private key here"/> </li> 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 0b561674b43..18e5b0515f6 100644 --- a/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml +++ b/addons/website_hr_recruitment/views/website_hr_recruitment_templates.xml @@ -118,48 +118,48 @@ <div class="row"> <section id="forms"> - <form action="/website_form/" method="post" class="s_website_form form-horizontal container-fluid mt32" enctype="multipart/form-data" data-model_name="hr.applicant" data-success_page="/job-thank-you" t-att-data-form_field_department_id="job and job.department_id.id or False" t-att-data-form_field_job_id="job and job.id or False"> - <div class="form-group form-field o_website_form_required_custom"> + <form action="/website_form/" method="post" class="s_website_form container-fluid mt32" enctype="multipart/form-data" data-model_name="hr.applicant" data-success_page="/job-thank-you" t-att-data-form_field_department_id="job and job.department_id.id or False" t-att-data-form_field_job_id="job and job.id or False"> + <div class="form-group row form-field o_website_form_required_custom"> <div class="col-lg-3 col-md-4 text-right"> - <label class="control-label" for="partner_name">Your Name</label> + <label class="col-form-label" for="partner_name">Your Name</label> </div> <div class="col-lg-7 col-md-8"> <input type="text" class="form-control o_website_form_input" name="partner_name" required=""/> </div> </div> - <div class="form-group form-field o_website_form_required_custom"> + <div class="form-group row form-field o_website_form_required_custom"> <div class="col-lg-3 col-md-4 text-right"> - <label class="control-label" for="email_from">Your Email</label> + <label class="col-form-label" for="email_from">Your Email</label> </div> <div class="col-lg-7 col-md-8"> <input type="email" class="form-control o_website_form_input" name="email_from" required=""/> </div> </div> - <div class="form-group form-field o_website_form_required_custom"> + <div class="form-group row form-field o_website_form_required_custom"> <div class="col-lg-3 col-md-4 text-right"> - <label class="control-label" for="partner_phone">Your Phone Number</label> + <label class="col-form-label" for="partner_phone">Your Phone Number</label> </div> <div class="col-lg-7 col-md-8"> <input type="text" class="form-control o_website_form_input" name="partner_phone" required=""/> </div> </div> - <div class="form-group form-field"> + <div class="form-group row form-field"> <div class="col-lg-3 col-md-4 text-right"> - <label class="control-label" for="description">Short Introduction</label> + <label class="col-form-label" for="description">Short Introduction</label> </div> <div class="col-lg-7 col-md-8"> <textarea class="form-control o_website_form_input" name="description"></textarea> </div> </div> - <div class="form-group form-field o_website_form_custom"> + <div class="form-group row form-field o_website_form_custom"> <div class="col-lg-3 col-md-4 text-right"> - <label class="control-label" for="Resume">Resume</label> + <label class="col-form-label" for="Resume">Resume</label> </div> <div class="col-lg-7 col-md-8"> <input type="file" class="form-control o_website_form_input" name="Resume"/> </div> </div> - <div class="form-group"> + <div class="form-group row"> <div class="offset-lg-3 offset-md-4 col-md-8 col-lg-7"> <a href="#" role="button" class="btn btn-primary btn-lg o_website_form_send">Submit</a> <span id="o_website_form_result"></span> diff --git a/addons/website_links/views/website_links_template.xml b/addons/website_links/views/website_links_template.xml index 370ab1687ed..09f7ffc23e5 100644 --- a/addons/website_links/views/website_links_template.xml +++ b/addons/website_links/views/website_links_template.xml @@ -33,10 +33,10 @@ <div class="row"> <div class="col-md-7"> - <form class="form-horizontal" id="o_website_links_link_tracker_form"> + <form id="o_website_links_link_tracker_form"> - <div class="form-group" id="url-form-group"> - <label class="col-md-3 control-label text-left">URL</label> + <div class="form-group row" id="url-form-group"> + <label class="col-md-3 col-form-label text-left">URL</label> <div class="col-md-9"> <input type="text" id="url" class="form-control required-form-control" required="True" placeholder="e.g. https://www.odoo.com/page/contactus" t-att-value="u"/> @@ -44,24 +44,24 @@ </div> <div class="o_website_links_utm_forms"> - <div class="form-group"> - <label class="col-md-3 control-label">Campaign <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the context of your link. It might be an event you want to promote or a special promotion."></i></label> + <div class="form-group row"> + <label class="col-md-3 col-form-label">Campaign <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the context of your link. It might be an event you want to promote or a special promotion."></i></label> <div class="col-md-9"> <input type="hidden" class="form-control" id="campaign-select"/> </div> </div> - <div class="form-group"> - <label class="col-md-3 control-label">Medium <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the medium used to share your link. It might be an email, or a Facebook Ads for instance."></i></label> + <div class="form-group row"> + <label class="col-md-3 col-form-label">Medium <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the medium used to share your link. It might be an email, or a Facebook Ads for instance."></i></label> <div class="col-md-9"> <input type="hidden" class="form-control" id="channel-select" /> </div> </div> - <div class="form-group"> - <label class="col-md-3 control-label">Source <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the source from which your traffic will come from, Facebook or Twitter for instance."></i></label> + <div class="form-group row"> + <label class="col-md-3 col-form-label">Source <i class="fa fa-info-circle" data-toggle="tooltip" data-placement="top" role="img" aria-label="Tooltip info" title="Defines the source from which your traffic will come from, Facebook or Twitter for instance."></i></label> <div class="col-md-9"> <input type="hidden" class="form-control" id="source-select" /> @@ -69,7 +69,7 @@ </div> </div> - <div class="form-group"> + <div class="form-group row"> <div class="offset-md-3 col-md-9"> <button type="submit" class="btn btn-primary" id="btn_shorten_url" data-clipboard-text="">Get tracked link</button> diff --git a/addons/website_mail/static/src/js/follow.js b/addons/website_mail/static/src/js/follow.js index b46b9c500f7..0893c998ff1 100644 --- a/addons/website_mail/static/src/js/follow.js +++ b/addons/website_mail/static/src/js/follow.js @@ -37,10 +37,10 @@ sAnimation.registry.follow = sAnimation.Class.extend({ var $email = this.$target.find(".js_follow_email"); if ($email.length && !$email.val().match(/.+@.+/)) { - this.$target.addClass('has-error'); + this.$target.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); return false; } - this.$target.removeClass('has-error'); + this.$target.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); var email = $email.length ? $email.val() : false; if (email || this.is_user) { diff --git a/addons/website_mail_channel/static/src/js/website_mail_channel.snippet.js b/addons/website_mail_channel/static/src/js/website_mail_channel.snippet.js index d5415ef5b83..b8fd3761fc9 100644 --- a/addons/website_mail_channel/static/src/js/website_mail_channel.snippet.js +++ b/addons/website_mail_channel/static/src/js/website_mail_channel.snippet.js @@ -49,10 +49,10 @@ sAnimation.registry.follow_alias = sAnimation.Class.extend({ var $email = this.$target.find(".js_follow_email"); if ($email.length && !$email.val().match(/.+@.+/)) { - this.$target.addClass('has-error'); + this.$target.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); return false; } - this.$target.removeClass('has-error'); + this.$target.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); var subscription_action = this.$target.attr("data-follow") || "off"; if (window.location.search.slice(1).split('&').indexOf("unsubscribe") >= 0) { diff --git a/addons/website_mass_mailing/static/src/js/website_mass_mailing.js b/addons/website_mass_mailing/static/src/js/website_mass_mailing.js index 517fe9b75c1..031b795e876 100644 --- a/addons/website_mass_mailing/static/src/js/website_mass_mailing.js +++ b/addons/website_mass_mailing/static/src/js/website_mass_mailing.js @@ -43,10 +43,10 @@ sAnimation.registry.subscribe = sAnimation.Class.extend({ var $email = this.$target.find(".js_subscribe_email:visible"); if ($email.length && !$email.val().match(/.+@.+/)) { - this.$target.addClass('has-error'); + this.$target.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); return false; } - this.$target.removeClass('has-error'); + this.$target.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); this._rpc({ route: '/website_mass_mailing/subscribe', @@ -96,10 +96,10 @@ sAnimation.registry.newsletter_popup = sAnimation.Class.extend({ var $email = self.$target.find(".popup_subscribe_email:visible"); if ($email.length && !$email.val().match(/.+@.+/)) { - this.$target.addClass('has-error'); + this.$target.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); return false; } - this.$target.removeClass('has-error'); + this.$target.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); this._rpc({ route: '/website_mass_mailing/subscribe', diff --git a/addons/website_sale/views/templates.xml b/addons/website_sale/views/templates.xml index bab2dd32672..9ce4ef5e740 100644 --- a/addons/website_sale/views/templates.xml +++ b/addons/website_sale/views/templates.xml @@ -661,7 +661,7 @@ <t t-set="inc" t-value="0"/> <t t-foreach="variant_id.value_ids" t-as="value_id"> <li class="form-group js_attribute_value" style="margin: 0;"> - <label class="control-label" style="margin: 0 20px;"> + <label class="col-form-label" style="margin: 0 20px;"> <input type="radio" t-att-class="'js_variant_change' if variant_id.attribute_id.create_variant else None" t-att-checked="'checked' if not inc else None" t-att-name="'attribute-%s-%s' % (product.id, variant_id.attribute_id.id)" t-att-value="value_id.id" style="vertical-align: top; margin-right: 10px;"/> <span t-field="value_id.name"/> <span class="badge" t-if="value_id.price_extra"> @@ -751,32 +751,32 @@ <div class="col-xl-8 order-xl-1 col-md-12 col-12 oe_cart"> <div class="row"> <div class='col-lg-12'> - <form action="/website_form/" method="post" class="s_website_form form-horizontal container-fluid" enctype="multipart/form-data" data-force_action="shop.sale.order" data-model_name="sale.order" data-success_page="/shop/payment"> - <div class="form-group form-field o_website_form_custom"> + <form action="/website_form/" method="post" class="s_website_form container-fluid" enctype="multipart/form-data" data-force_action="shop.sale.order" data-model_name="sale.order" data-success_page="/shop/payment"> + <div class="form-group row form-field o_website_form_custom"> <div class="col-lg-3 col-md-4 text-right-not-xs"> - <label class="control-label" for="client_order_ref">Your Reference</label> + <label class="col-form-label" for="client_order_ref">Your Reference</label> </div> <div class="col-lg-9 col-md-8"> <input type="text" class="form-control o_website_form_input" name="client_order_ref"/> </div> </div> - <div class="form-group form-field o_website_form_custom"> + <div class="form-group row form-field o_website_form_custom"> <div class="col-lg-3 col-md-4 text-right-not-xs"> - <label class="control-label" for="Give us your feedback">Give us your feedback</label> + <label class="col-form-label" for="Give us your feedback">Give us your feedback</label> </div> <div class="col-lg-9 col-md-8"> <textarea class="form-control o_website_form_input" rows="8" name="Give us your feedback" /> </div> </div> - <div class="form-group form-field o_website_form_custom"> + <div class="form-group row form-field o_website_form_custom"> <div class="col-lg-3 col-md-4 text-right-not-xs"> - <label class="control-label" for="a_document">A document to provide</label> + <label class="col-form-label" for="a_document">A document to provide</label> </div> <div class="col-lg-9 col-md-8"> <input type="file" class="form-control o_website_form_input" name="a_document" /> </div> </div> - <div class="form-group"> + <div class="form-group row"> <div class="col-lg-3 col-md-4"> </div> <div class="col-lg-9 col-md-8"> @@ -1159,63 +1159,63 @@ <h4 class="text-danger" t-esc="err" /> </t> <form action="/shop/address" method="post" class="checkout_autoformat"> - <div t-attf-class="form-group #{error.get('name') and 'has-error' or ''} col-lg-12 div_name"> - <label class="control-label" for="name">Name</label> - <input type="text" name="name" class="form-control" t-att-value="'name' in checkout and checkout['name']" /> + <div t-attf-class="form-group #{error.get('name') and 'o_has_error' or ''} col-lg-12 div_name"> + <label class="col-form-label" for="name">Name</label> + <input type="text" name="name" t-attf-class="form-control #{error.get('name') and 'is-invalid' or ''}" t-att-value="'name' in checkout and checkout['name']" /> </div> <div class="clearfix" /> <t t-if="mode[1] == 'billing'"> - <div t-attf-class="form-group #{error.get('email') and 'has-error' or ''} col-lg-6" id="div_email"> - <label class="control-label" for="email">Email</label> - <input type="email" name="email" class="form-control" t-att-value="'email' in checkout and checkout['email']" /> + <div t-attf-class="form-group #{error.get('email') and 'o_has_error' or ''} col-lg-6" id="div_email"> + <label class="col-form-label" for="email">Email</label> + <input type="email" name="email" t-attf-class="form-control #{error.get('email') and 'is-invalid' or ''}" t-att-value="'email' in checkout and checkout['email']" /> </div> </t> - <div t-attf-class="form-group #{error.get('phone') and 'has-error' or ''} col-lg-6" id="div_phone"> - <label class="control-label" for="phone">Phone</label> - <input type="tel" name="phone" class="form-control" t-att-value="'phone' in checkout and checkout['phone']" /> + <div t-attf-class="form-group #{error.get('phone') and 'o_has_error' or ''} col-lg-6" id="div_phone"> + <label class="col-form-label" for="phone">Phone</label> + <input type="tel" name="phone" t-attf-class="form-control #{error.get('phone') and 'is-invalid' or ''}" t-att-value="'phone' in checkout and checkout['phone']" /> </div> <div class="clearfix" /> <t t-if="mode == ('new', 'billing') or (mode == ('edit', 'billing') and (can_edit_vat or 'vat' in checkout and checkout['vat']))"> - <div t-attf-class="form-group #{error.get('company_name') and 'has-error' or ''} col-lg-6"> - <label class="control-label font-weight-normal label-optional" for="company_name">Company Name</label> - <input type="text" name="company_name" class="form-control" t-att-value="'company_name' in checkout and checkout['company_name']" t-att-readonly="'1' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" t-att-title="'Changing company name is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" /> + <div t-attf-class="form-group #{error.get('company_name') and 'o_has_error' or ''} col-lg-6"> + <label class="col-form-label font-weight-normal label-optional" for="company_name">Company Name</label> + <input type="text" name="company_name" t-attf-class="form-control #{error.get('company_name') and 'is-invalid' or ''}" t-att-value="'company_name' in checkout and checkout['company_name']" t-att-readonly="'1' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" t-att-title="'Changing company name is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" /> </div> - <div t-attf-class="form-group #{error.get('vat') and 'has-error' or ''} col-lg-6 div_vat"> - <label class="control-label font-weight-normal label-optional" for="vat">TIN / VAT </label> - <input type="text" name="vat" class="form-control" t-att-value="'vat' in checkout and checkout['vat']" t-att-readonly="'1' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" t-att-title="'Changing VAT number is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" /> + <div t-attf-class="form-group #{error.get('vat') and 'o_has_error' or ''} col-lg-6 div_vat"> + <label class="col-form-label font-weight-normal label-optional" for="vat">TIN / VAT </label> + <input type="text" name="vat" t-attf-class="form-control #{error.get('vat') and 'is-invalid' or ''}" t-att-value="'vat' in checkout and checkout['vat']" t-att-readonly="'1' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" t-att-title="'Changing VAT number is not allowed once document(s) have been issued for your account. Please contact us directly for this operation.' if 'vat' in checkout and checkout['vat'] and not can_edit_vat else None" /> </div> </t> <div class="clearfix" /> - <div t-attf-class="form-group #{error.get('street') and 'has-error' or ''} col-lg-12 div_street"> - <label class="control-label" for="street">Street <span class="d-none d-md-inline"> and Number</span></label> - <input type="text" name="street" class="form-control" t-att-value="'street' in checkout and checkout['street']" /> + <div t-attf-class="form-group #{error.get('street') and 'o_has_error' or ''} col-lg-12 div_street"> + <label class="col-form-label" for="street">Street <span class="d-none d-md-inline"> and Number</span></label> + <input type="text" name="street" t-attf-class="form-control #{error.get('street') and 'is-invalid' or ''}" t-att-value="'street' in checkout and checkout['street']" /> </div> - <div t-attf-class="form-group #{error.get('street2') and 'has-error' or ''} col-lg-12 div_street2"> - <label class="control-label label-optional" for="street2">Street 2</label> - <input type="text" name="street2" class="form-control" t-att-value="'street2' in checkout and checkout['street2']" /> + <div t-attf-class="form-group #{error.get('street2') and 'o_has_error' or ''} col-lg-12 div_street2"> + <label class="col-form-label label-optional" for="street2">Street 2</label> + <input type="text" name="street2" t-attf-class="form-control #{error.get('street2') and 'is-invalid' or ''}" t-att-value="'street2' in checkout and checkout['street2']" /> </div> <div class="clearfix" /> <t t-set='zip_city' t-value='country and [x for x in country.get_address_fields() if x in ["zip", "city"]] or ["city", "zip"]'/> <t t-if="'zip' in zip_city and zip_city.index('zip') < zip_city.index('city')"> - <div t-attf-class="form-group #{error.get('zip') and 'has-error' or ''} col-md-4 div_zip"> - <label class="control-label label-optional" for="zip">Zip Code</label> - <input type="text" name="zip" class="form-control" t-att-value="'zip' in checkout and checkout['zip']" /> + <div t-attf-class="form-group #{error.get('zip') and 'o_has_error' or ''} col-md-4 div_zip"> + <label class="col-form-label label-optional" for="zip">Zip Code</label> + <input type="text" name="zip" t-attf-class="form-control #{error.get('zip') and 'is-invalid' or ''}" t-att-value="'zip' in checkout and checkout['zip']" /> </div> </t> - <div t-attf-class="form-group #{error.get('city') and 'has-error' or ''} col-md-8 div_city"> - <label class="control-label" for="city">City</label> - <input type="text" name="city" class="form-control" t-att-value="'city' in checkout and checkout['city']" /> + <div t-attf-class="form-group #{error.get('city') and 'o_has_error' or ''} col-md-8 div_city"> + <label class="col-form-label" for="city">City</label> + <input type="text" name="city" t-attf-class="form-control #{error.get('city') and 'is-invalid' or ''}" t-att-value="'city' in checkout and checkout['city']" /> </div> <t t-if="'zip' in zip_city and zip_city.index('zip') > zip_city.index('city')"> - <div t-attf-class="form-group #{error.get('zip') and 'has-error' or ''} col-md-4 div_zip"> - <label class="control-label label-optional" for="zip">Zip Code</label> - <input type="text" name="zip" class="form-control" t-att-value="'zip' in checkout and checkout['zip']" /> + <div t-attf-class="form-group #{error.get('zip') and 'o_has_error' or ''} col-md-4 div_zip"> + <label class="col-form-label label-optional" for="zip">Zip Code</label> + <input type="text" name="zip" t-attf-class="form-control #{error.get('zip') and 'is-invalid' or ''}" t-att-value="'zip' in checkout and checkout['zip']" /> </div> </t> <div class="clearfix" /> - <div t-attf-class="form-group #{error.get('country_id') and 'has-error' or ''} col-lg-6 div_country"> - <label class="control-label" for="country_id">Country</label> - <select id="country_id" name="country_id" class="form-control"> + <div t-attf-class="form-group #{error.get('country_id') and 'o_has_error' or ''} col-lg-6 div_country"> + <label class="col-form-label" for="country_id">Country</label> + <select id="country_id" name="country_id" t-attf-class="form-control #{error.get('country_id') and 'is-invalid' or ''}"> <option value="">Country...</option> <t t-foreach="countries" t-as="c"> <option t-att-value="c.id" t-att-selected="c.id == (country and country.id or -1)"> @@ -1224,9 +1224,9 @@ </t> </select> </div> - <div t-attf-class="form-group #{error.get('state_id') and 'has-error' or ''} col-lg-6 div_state" t-att-style="(not country or not country.state_ids) and 'display: none'"> - <label class="control-label" for="state_id">State / Province</label> - <select name="state_id" class="form-control" data-init="1"> + <div t-attf-class="form-group #{error.get('state_id') and 'o_has_error' or ''} col-lg-6 div_state" t-att-style="(not country or not country.state_ids) and 'display: none'"> + <label class="col-form-label" for="state_id">State / Province</label> + <select name="state_id" t-attf-class="form-control #{error.get('state_id') and 'is-invalid' or ''}" data-init="1"> <option value="">State / Province...</option> <t t-foreach="country and country.state_ids or []" t-as="s"> <option t-att-value="s.id" t-att-selected="s.id == ('state_id' in checkout and country and checkout['state_id'] != '' and int(checkout['state_id']))"> diff --git a/addons/website_slides/static/src/js/slides.js b/addons/website_slides/static/src/js/slides.js index b331ebf366c..e869f607d6e 100644 --- a/addons/website_slides/static/src/js/slides.js +++ b/addons/website_slides/static/src/js/slides.js @@ -130,7 +130,7 @@ var page_widgets = {}; var input = this.$('input'); var slide_id = this.$('button').data('slide-id'); if(input.val() && input[0].checkValidity()){ - this.$el.removeClass('has-error'); + this.$el.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); ajax.jsonRpc('/slides/slide/send_share_email', 'call', { slide_id: slide_id, email: input.val(), @@ -138,7 +138,7 @@ var page_widgets = {}; self.$el.html($('<div class="alert alert-info" role="alert"><strong>Thank you!</strong> Mail has been sent.</div>')); }); }else{ - this.$el.addClass('has-error'); + this.$el.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); input.focus(); } }, diff --git a/addons/website_slides/static/src/js/slides_embed.js b/addons/website_slides/static/src/js/slides_embed.js index d3d1321e6c8..617b0b900e8 100644 --- a/addons/website_slides/static/src/js/slides_embed.js +++ b/addons/website_slides/static/src/js/slides_embed.js @@ -184,7 +184,7 @@ $(document).ready(function () { var input = widget.find('input'); var slide_id = widget.find('button').data('slide-id'); if(input.val() && input[0].checkValidity()){ - widget.removeClass('has-error'); + widget.removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); $.ajax({ type: "POST", dataType: 'json', @@ -199,7 +199,7 @@ $(document).ready(function () { } }); }else{ - widget.addClass('has-error'); + widget.addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); input.focus(); } }); diff --git a/addons/website_slides/static/src/js/slides_upload.js b/addons/website_slides/static/src/js/slides_upload.js index b3953f12571..64202bba7bb 100644 --- a/addons/website_slides/static/src/js/slides_upload.js +++ b/addons/website_slides/static/src/js/slides_upload.js @@ -335,14 +335,14 @@ var SlideDialog = Widget.extend({ return values; }, validate: function () { - this.$('.form-group').removeClass('has-error'); + this.$('.form-group').removeClass('o_has_error').find('.form-control, .custom-select').removeClass('is-invalid'); if (!this.$('#name').val()) { - this.$('#name').closest('.form-group').addClass('has-error'); + this.$('#name').closest('.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); return false; } var url = this.$('#url').val() ? this.is_valid_url : false; if (!(this.file.name || url)) { - this.$('#url').closest('.form-group').addClass('has-error'); + this.$('#url').closest('.form-group').addClass('o_has_error').find('.form-control, .custom-select').addClass('is-invalid'); return false; } return true; diff --git a/addons/website_slides/static/src/xml/website_slides.xml b/addons/website_slides/static/src/xml/website_slides.xml index d8e31a0ae41..58618f2f48a 100644 --- a/addons/website_slides/static/src/xml/website_slides.xml +++ b/addons/website_slides/static/src/xml/website_slides.xml @@ -12,8 +12,8 @@ <h4><i class='fa fa-spinner fa-spin'></i> Uploading presentation... </h4> </div> <main class="modal-body"> - <form class="clearfix form-horizontal"> - <div class="form-group"> + <form class="clearfix"> + <div class="form-group row"> <div class="col-md-4"> <div class="img-thumbnail"> <div class="o_slide_preview"> @@ -25,39 +25,39 @@ <ul class="list-group"> <li class="list-group-item active"> <h5 class="list-group-item-heading"> - <label for="upload" class="control-label">PDF or Image File</label> + <label for="upload" class="col-form-label">PDF or Image File</label> </h5> <input id="upload" name="file" class="form-control" accept="image/*,application/pdf" type="file"/> </li> <li class="list-group-item"> <h5 class="list-group-item-heading"> - <label for="url" class="control-label">Youtube or Google Doc URL</label> + <label for="url" class="col-form-label">Youtube or Google Doc URL</label> </h5> <input id="url" name="url" class="form-control" placeholder="Youtube Video URL"/> </li> </ul> </div> </div> - <div class="form-group"> - <label for="name" class="control-label col-md-2">Title</label> + <div class="form-group row"> + <label for="name" class="col-form-label col-md-2">Title</label> <div class="col-md-10"> <input id="name" placeholder="Title" class="form-control" required="required"/> </div> </div> - <div class="form-group"> - <label for="tag_ids" class="control-label col-md-2">Tags</label> + <div class="form-group row"> + <label for="tag_ids" class="col-form-label col-md-2">Tags</label> <div class="controls col-md-10"> <input id="tag_ids" type="hidden"/> </div> </div> - <div class="form-group"> - <label for="category_id" class="control-label col-md-2">Category</label> + <div class="form-group row"> + <label for="category_id" class="col-form-label col-md-2">Category</label> <div class="controls col-md-10"> <input id="category_id" type="hidden"/> </div> </div> - <div class="form-group"> - <label for="description" class="control-label col-md-2">Description</label> + <div class="form-group row"> + <label for="description" class="col-form-label col-md-2">Description</label> <div class="controls col-md-10"> <textarea id="description" rows="4" placeholder="Description" class="form-control"></textarea> </div> diff --git a/addons/website_slides/views/website_slides.xml b/addons/website_slides/views/website_slides.xml index dbdf5821a03..c743014b519 100644 --- a/addons/website_slides/views/website_slides.xml +++ b/addons/website_slides/views/website_slides.xml @@ -691,7 +691,7 @@ <t t-call="website_slides.slides_share"/> <h4 class="mt0">Share Link</h4> <input type="text" class="form-control" t-att-value="slide.website_url" readonly="readonly" onClick="this.select();"/> - <span class="help-block">Use permanent link to share in social media</span> + <span class="form-text">Use permanent link to share in social media</span> </template> @@ -711,7 +711,7 @@ </button> </span> </div> - <span class="help-block">Send presentation through email</span> + <span class="form-text">Send presentation through email</span> </form> </t> <t t-if="is_public_user"> @@ -727,7 +727,7 @@ <textarea class="form-control slide_embed_code" readonly="readonly" onClick="this.select();"><t t-esc="slide.embed_code"/></textarea> </div> <div class="form-group" t-if="slide.slide_type in ('presentation', 'document')"> - <div class="help-block col-xl-3 col-lg-3 col-md-6 col-6">Select page to start with</div> + <div class="form-text col-xl-3 col-lg-3 col-md-6 col-6">Select page to start with</div> <div class="input-group col-xl-3 col-lg-3 col-md-6 col-6"> <input type="number" value="1" class="form-control"/> </div> |