[FIX] web: fix placement of add icon in ExportDialog

This commit fixes the placement of the add icon that could be on top
of the next line in the export dialog, when the name of the field was
too long. This overlapping prevented to press the button of the next
line. This is due to a fix made in commit (1). Now, it is correctly
displayed without overlaying, both in ltr and rtl directions.

Also, because there was not enough padding and some browsers are using
overlay scrollbars on top of the buttons, it was in some occasions not
possible to press the buttons, because the scrollbar was covering the
whole area. In the list of fields, only the first level of elements has
the padding, to avoid having a cascade style when unfolding items.

Static props have also been added to the component, as the component was
introduced without them.

(1): https://github.com/odoo/odoo/commit/f10a4886d2c2bfc0d4643e0e4597e62c2ba4f94e

closes odoo/odoo#112570

X-original-commit: 66207b9ffc353bd52993622cc528494b49eedc27
Related: odoo/enterprise#37037
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Luca Vitali <luvi@odoo.com>
This commit is contained in:
luvi
2023-02-13 21:28:08 +01:00
parent ac6db52173
commit 48b8242d6f
2 changed files with 13 additions and 5 deletions
@@ -364,4 +364,12 @@ export class ExportDataDialog extends Component {
}
}
ExportDataDialog.components = { CheckBox, Dialog, ExportDataItem };
ExportDataDialog.props = {
close: { type: Function },
context: { type: Object, optional: true },
defaultExportList: { type: Array },
download: { type: Function },
getExportedFields: { type: Function },
root: { type: Object },
};
ExportDataDialog.template = "web.ExportDataDialog";
@@ -12,11 +12,11 @@
</t>
<t t-name="web.ExportDataItem" owl="1">
<div t-att-data-field_id="props.field.name" t-attf-class="o_export_tree_item cursor-pointer position-relative ps-4 {{ state.isExpanded ? 'o_expanded mb-2' : '' }}" role="treeitem" t-on-click.stop="onClick" t-on-dblclick="(ev) => !props.isFieldExpandable(props.field) and !this.isFieldSelected(props.field.name) and this.props.onAdd(ev)">
<div t-attf-class="o_tree_column {{ props.field.required ? 'fw-bolder' : ''}}">
<div t-att-data-field_id="props.field.name" t-attf-class="o_export_tree_item cursor-pointer position-relative ps-4 {{ state.isExpanded ? 'o_expanded mb-2' : '' }} {{ props.field.parent ? '' : 'pe-3'}}" role="treeitem" t-on-click.stop="onClick" t-on-dblclick="(ev) => !props.isFieldExpandable(props.field) and !this.isFieldSelected(props.field.name) and this.props.onAdd(ev)">
<div t-attf-class="o_tree_column d-flex align-items-center {{ props.field.required ? 'fw-bolder' : ''}}">
<span t-if="props.isFieldExpandable(props.field)" t-attf-class="ms-n3 float-start o_expand_parent small fa {{ state.isExpanded ? 'fa-chevron-down' : 'fa-chevron-right' }}" role="img" aria-label="Show sub-fields" title="Show sub-fields" />
<span t-if="props.isDebug and props.field.id" class="overflow-hidden" t-esc="`${props.field.string} (${props.field.id})`" />
<span t-else="" class="overflow-hidden" t-esc="props.field.string" />
<span t-if="props.isDebug and props.field.id" class="overflow-hidden w-100" t-esc="`${props.field.string} (${props.field.id})`" />
<span t-else="" class="overflow-hidden w-100" t-esc="props.field.string" />
<span title="Select field" t-attf-class="fa fa-plus float-end m-1 o_add_field {{ isFieldSelected(props.field.name) ? 'o_inactive opacity-25' : '' }}" t-on-click.stop="(ev) => !this.isFieldSelected(props.field.name) and this.props.onAdd(ev)" />
</div>
<t t-if="state.isExpanded">
@@ -111,7 +111,7 @@
<li t-attf-class="o_export_field {{ state.isSmall ? '' : 'o_export_field_sortable' }}" t-att-data-field_id="field.name">
<span t-if="!state.isSmall" class="fa fa-sort o_sort_field mx-1" t-attf-style="opacity:{{ state.exportList.length === 1 ? 0 : 1 }}" />
<span t-esc="isDebug and field.id ? `${field.string or field.label} (${field.id})` : field.string or field.label" />
<span class="fa fa-trash m-1 float-end o_remove_field cursor-pointer" t-att-title="removeFieldText" t-on-click.stop="onRemoveItemExportList" />
<span class="fa fa-trash m-1 pe-2 float-end o_remove_field cursor-pointer" t-att-title="removeFieldText" t-on-click.stop="onRemoveItemExportList" />
</li>
</t>
</ul>