From 48b8242d6f95d3a731f7268a79eb597173dc7a1d Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Thu, 9 Feb 2023 17:08:57 +0000
Subject: [PATCH] [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>
---
 .../src/views/view_dialogs/export_data_dialog.js       |  8 ++++++++
 .../src/views/view_dialogs/export_data_dialog.xml      | 10 +++++-----
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/addons/web/static/src/views/view_dialogs/export_data_dialog.js b/addons/web/static/src/views/view_dialogs/export_data_dialog.js
index 1853ff006f2..057c9aa131a 100644
--- a/addons/web/static/src/views/view_dialogs/export_data_dialog.js
+++ b/addons/web/static/src/views/view_dialogs/export_data_dialog.js
@@ -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";
diff --git a/addons/web/static/src/views/view_dialogs/export_data_dialog.xml b/addons/web/static/src/views/view_dialogs/export_data_dialog.xml
index a3e695c2249..7e0ac756a7b 100644
--- a/addons/web/static/src/views/view_dialogs/export_data_dialog.xml
+++ b/addons/web/static/src/views/view_dialogs/export_data_dialog.xml
@@ -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>