From bf57a5ae35b643fd3f7c40c269a43c74f3ff511e Mon Sep 17 00:00:00 2001
From: xlu-odoo <xlu@odoo.com>
Date: Tue, 5 Apr 2022 10:02:38 +0000
Subject: [PATCH] [REF] web: ExportDialog revamp

This commit simplifies the SCSS of the export dialog.

task-2816763

closes odoo/odoo#88008

Signed-off-by: Pierre Paridans (app) <app@odoo.com>
---
 .../src/legacy/js/widgets/data_export.js      |  8 +-
 .../static/src/legacy/scss/data_export.scss   | 74 ++++---------------
 addons/web/static/src/legacy/xml/base.xml     | 18 ++---
 3 files changed, 27 insertions(+), 73 deletions(-)

diff --git a/addons/web/static/src/legacy/js/widgets/data_export.js b/addons/web/static/src/legacy/js/widgets/data_export.js
index 24a9a039a59..43be144ae65 100644
--- a/addons/web/static/src/legacy/js/widgets/data_export.js
+++ b/addons/web/static/src/legacy/js/widgets/data_export.js
@@ -87,7 +87,7 @@ var DataExport = Dialog.extend({
                 cursor: 'grabbing',
                 handle: '.o_short_field',
                 forcePlaceholderSize: true,
-                placeholder: 'o-field-placeholder',
+                placeholder: 'o-field-placeholder bg-light border border-primary',
                 update: self.proxy('_resetTemplateField'),
             });
         });
@@ -144,7 +144,7 @@ var DataExport = Dialog.extend({
                 $('<li>', {'class': 'o_export_field', 'data-field_id': fieldID}).append(
                     $('<span>', {'class': "fa fa-sort o_short_field mx-1"}),
                     label.trim(),
-                    $('<span>', {'class': 'fa fa-trash m-1 float-end o_remove_field', 'title': _t("Remove field")})
+                    $('<span>', {'class': 'o_remove_field o_cursor_pointer fa fa-trash m-1 float-end ', 'title': _t("Remove field")})
                 )
             );
         }
@@ -256,7 +256,7 @@ var DataExport = Dialog.extend({
                 .after(QWeb.render('Export.TreeItems', {fields: records, debug: config.isDebug()}));
         } else {
             this.$('.o_left_field_panel').empty().append(
-                $('<div/>').addClass('o_field_tree_structure')
+                $('<div/>').addClass('o_field_tree_structure my-2')
                            .append(QWeb.render('Export.TreeItems', {fields: records, debug: config.isDebug()}))
             );
         }
@@ -265,7 +265,7 @@ var DataExport = Dialog.extend({
         this.$records = this.$('.o_export_tree_item');
         this.$records.each(function (i, el) {
             var $el = $(el);
-            $el.find('.o_tree_column').first().toggleClass('o_required', !!self.records[$el.data('id')].required);
+            $el.find('.o_tree_column').first().toggleClass('o_required font-weight-bolder', !!self.records[$el.data('id')].required);
         });
     },
     /**
diff --git a/addons/web/static/src/legacy/scss/data_export.scss b/addons/web/static/src/legacy/scss/data_export.scss
index 60f1e3dcab4..a5282dbedf1 100644
--- a/addons/web/static/src/legacy/scss/data_export.scss
+++ b/addons/web/static/src/legacy/scss/data_export.scss
@@ -1,64 +1,18 @@
-.o_web_client .o_export {
-    .o-export-panel {
-        height: 100%;
-    }
-    .o_left_panel {
-        flex-flow: column nowrap;
-        height: 100%;
-        .o_left_field_panel {
-            flex: 1;
-            overflow: auto;
-        }
-        .o_export_tree_item {
-            cursor: pointer;
-            position: relative;
-            padding-left: 20px;
-            &.o_selected > .o_tree_column {
-                background-color: $o-brand-odoo;
-                color: white;
-            }
-            .o_expand_parent {
-                @include o-position-absolute($top: 4px, $left: 5px);
-                font-size: 10px;
-            }
-            .o_required {
-                border-bottom: 2px solid $o-main-text-color;
-            }
-        }
+.o_export .o_selected > .o_tree_column {
+    background-color: $o-brand-odoo;
+    color: white;
+}
+
+.o_short_field {
+    @include o-grab-cursor;
+}
+
+@include media-breakpoint-down(sm) {
+    .ui-sortable-handle {
+        display: none;
     }
 
-    .o_right_panel {
-        flex-flow: column nowrap;
-        height: 100%;
-        .o_save_list {
-            display: none;
-        }
-        .o_right_field_panel {
-            flex: 1;
-            overflow: auto;
-            .o_short_field {
-                @include o-grab-cursor;
-            }
-            .o-field-placeholder {
-                border: 1px dashed $o-brand-primary;
-            }
-            .o_remove_field {
-                cursor: pointer;
-            }
-        }
-    }
-
-    @include media-breakpoint-down(sm) {
-        .ui-sortable-handle {
-            display: none;
-        }
-
-        .o_right_field_panel .o_export_field {
-            padding-left: map-get($spacers, 1);
-        }
-
-        .o_left_panel, .o_right_panel {
-            height: 50%;
-        }
+    .o_left_panel, .o_right_panel {
+        height: 50% !important;
     }
 }
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index e17f5f7964b..50e6aa462fb 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -1392,8 +1392,8 @@
 </div>
 
 <div t-name="ExportDialog" class="o_export">
-    <div class="row o-export-panel">
-        <div class="col-12 col-md-6 d-flex o_left_panel">
+    <div class="row o-export-panel h-100">
+        <div class="o_left_panel col-12 col-md-6 h-100 d-flex flex-column flex-nowrap">
             <div class="form-check o_import_compat">
                 <input class="form-check-input" id="o-update-data" type="checkbox"/>
                 <label class="form-check-label" for="o-update-data">
@@ -1406,9 +1406,9 @@
             <div class="input-group mb-3">
                 <input type="search" class="form-control o_export_search_input" id="o-export-search-filter" placeholder="Search" />
             </div>
-            <div class="border o_left_field_panel"/>
+            <div class="o_left_field_panel flex-grow-1 px-2 overflow-auto border "/>
         </div>
-        <div class="col-12 col-md-6 d-flex o_right_panel mt-3 mt-md-0">
+        <div class="o_right_panel col-12 col-md-6 h-100 d-flex flex-column flex-nowrap mt-3 mt-md-0">
             <div class="o_export_format">
                 <strong>Export Format:</strong>
             </div>
@@ -1419,8 +1419,8 @@
                 <t t-call="Export.SaveList"/>
             </div>
             <div class="o_exported_lists"/>
-            <div class="border o_right_field_panel">
-                <ul class="o_fields_list list-unstyled"/>
+            <div class="o_right_field_panel flex-grow-1 px-2 overflow-auto border ">
+                <ul class="o_fields_list list-unstyled my-2"/>
             </div>
         </div>
     </div>
@@ -1428,9 +1428,9 @@
 <t t-name="Export.TreeItems">
     <t t-foreach="fields" t-as="field" t-key="field_index">
         <t t-set="has_child" t-value="field.children &amp;&amp; (field.id).split('/').length != 3" />
-        <div t-att-data-id="field.id" t-attf-class="o_export_tree_item #{has_child ? 'haschild o_expand' : ''}" tabindex="-1" role="treeitem"> <!-- tabindex make the div focusable -->
-            <span t-if="has_child" class="o_expand_parent fa fa-chevron-right" role="img" aria-label="Show sub-fields" title="Show sub-fields"/>
-            <div t-attf-class="o_tree_column">
+        <div t-att-data-id="field.id" t-attf-class="o_export_tree_item #{has_child ? 'haschild o_expand' : ''} o_cursor_pointer position-relative pl-3 " tabindex="-1" role="treeitem"> <!-- tabindex make the div focusable -->
+            <span t-if="has_child" class="o_expand_parent d-inline-block position-absolute top-0 left-0 mt-1 ml-n3 small fa fa-chevron-right" role="img" aria-label="Show sub-fields" title="Show sub-fields"/>
+            <div t-attf-class="o_tree_column text-wrap">
                 <t t-esc="field.string"/>
                 <t t-if="debug and field.id">
                     (<t t-esc="field.id"/>)