pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website, website_sale: convert form-control-file class to BS5

Browse Source 
From BS4 to BS5, the `form-control-file` class has disappeared and
became `form-control`.

This commit replaces the occurrences of the old class by the new one.
It is necessary because by letting the old class, it is impossible to
place a form label above a `File Upload` field.

Indeed, since the `.form-control-file` CSS rule setting the `display`
property to `block` has been removed, the file input now has `display:
inline-block` by default, which is why the label would end up on the
same line as the input, instead of on top. With `.from-control`, this
rule is back, allowing to place the label on top again.

After this commit, the look of the file input will change. This is
because in BS4, with the `form-control-file` class, the input was the
browser native one. It could be customized using `.custom-file` (and
the associated `custom-file-*` classes). But in BS5, the file input is
directly a custom one, thanks to custom styles added on top of `.form-
control`.

task-3071151

closes odoo/odoo#114261

X-original-commit: 7dcfe19c15bd96d65e5fda463ad65d083c6b8fcf
Related: odoo/enterprise#37744
Signed-off-by: Arthur Detroux (ard) <ard@odoo.com>
This commit is contained in:
Soukéina Bojabza
2023-03-03 17:05:22 +01:00
parent 0436dacb9d
commit e64b93a6cb
4 changed files with 3 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/snippets/s_website_form/000.js
+1 -1
View File
@@ -445,7 +445,7 @@ odoo.define('website.s_website_form', function (require) {
});
// Update field color if invalid or erroneous
const $controls = $field.find('.form-control, .form-select, .form-check-input, .form-control-file');
const $controls = $field.find('.form-control, .form-select, .form-check-input');
$field.removeClass('o_has_error');
$controls.removeClass('is-invalid');
if (invalid_inputs.length || error_fields[field_name]) {
addons/website/static/src/snippets/s_website_form/001.scss
-8
View File
@@ -64,14 +64,6 @@
display: none;
}
}
.form-control-file.is-invalid {
// Note: BS5 use form-control on file inputs now, but this is kept as
// compatibility for now (also at the time this was done, Odoo 16.0 uses
// BS5 but not yet(?) form-control on file inputs).
padding-left: 3px;
border-left: 3px solid $form-feedback-invalid-color;
}
}
body:not(.editor_enable) .s_website_form[data-vcss="001"] {
addons/website/static/src/xml/website_form_editor.xml
+1 -1
View File
@@ -376,7 +376,7 @@
<t t-call="website.form_field">
<input
type="file"
class="form-control-file s_website_form_input"
class="form-control s_website_form_input"
t-att-name="field.name"
t-att-required="field.required || field.modelRequired || None"
t-att-multiple="multiple"
addons/website_sale/views/templates.xml
+1 -1
View File
@@ -1315,7 +1315,7 @@
<span class="s_website_form_label_content">Upload a document</span>
</label>
<div class="col-sm">
<input id="sale3" type="file" class="form-control-file s_website_form_input" name="a_document" />
<input id="sale3" type="file" class="form-control s_website_form_input" name="a_document" />
</div>
</div>
</div>