[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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user