From be06adc794909d52dd111abae1170d29b692db19 Mon Sep 17 00:00:00 2001
From: Molkobain <lajarige.guillaume@free.fr>
Date: Wed, 8 Dec 2021 16:29:09 +0100
Subject: [PATCH] Export: Polish preview table headers

---
 .../tabular-fields/_tabular-fields-selector.scss       | 10 ++++++++++
 js/tabularfieldsselector.js                            |  6 +++---
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/css/backoffice/application/tabular-fields/_tabular-fields-selector.scss b/css/backoffice/application/tabular-fields/_tabular-fields-selector.scss
index e3b30444b..d42242cb2 100644
--- a/css/backoffice/application/tabular-fields/_tabular-fields-selector.scss
+++ b/css/backoffice/application/tabular-fields/_tabular-fields-selector.scss
@@ -8,7 +8,9 @@
   overflow-x: auto;
 
   th {
+    position: relative;
     padding: 5px;
+    padding-right: $ibo-spacing-600;
     border-width: 1px 1px 0;
     border-style: groove groove none;
     background: $ibo-color-white-200;
@@ -30,6 +32,14 @@
 .ibo-preview-header {
   margin-bottom: 5px;
 }
+.ibo-table-preview--remove-column {
+  position: absolute;
+  top: $ibo-spacing-300;
+  right: $ibo-spacing-300;
+  display: inline-block;
+  cursor: pointer;
+  font-size: 8px;
+}
 
 #form_part_interactive_fields_xlsx, #form_part_interactive_fields_csv, #form_part_interactive_fields_pdf {
   margin-top: $ibo-spacing-600;
diff --git a/js/tabularfieldsselector.js b/js/tabularfieldsselector.js
index 219da6875..d4463df5b 100644
--- a/js/tabularfieldsselector.js
+++ b/js/tabularfieldsselector.js
@@ -252,7 +252,7 @@ $(function () {
 					for (var k in this.aSelected) {
 						var sField = this.aSelected[k];
 						if ($.inArray(sField, this.aSelected) != -1) {
-							var sRemoveBtn = '&nbsp;<span style="display:inline-block;float:right;cursor:pointer;" class="export-field-close" data-attcode="'+sField+'">×</span>';
+							var sRemoveBtn = '<span class="export-field-close ibo-table-preview--remove-column" data-attcode="'+sField+'"><span class="fas fa-times"></span></span>';
 							sHtml += '<th data-attcode="'+sField+'"><span class="drag-handle">'+this.aFieldsByCode[sField].unique_label+'</span>'+sRemoveBtn+'</th>';
 						}
 					}
@@ -430,9 +430,9 @@ $(function () {
 					sDataParent = ' data-parent="'+sParentId+'" ';
 				}
 				if (bHasTooltip) {
-					sContent = '<div style="display:block; clear:both;"><span style="white-space: nowrap;"><input data-instance-id="'+this.sId+'" class="tfs_checkbox_multi" type="checkbox" id="'+sElementId+'_multi" value="'+sCode+'"'+sChecked+sDataParent+'><label data-attcode="'+sCode+'" class="'+aClasses.join(' ')+'" title="'+sCode+'">&nbsp;'+sLabel+'</label></div>';
+					sContent = '<div style="display:block; clear:both;"><span style="white-space: nowrap;"><input data-instance-id="'+this.sId+'" class="tfs_checkbox_multi" type="checkbox" id="'+sElementId+'_multi" value="'+sCode+'"'+sChecked+sDataParent+'><label data-attcode="'+sCode+'" class="'+aClasses.join(' ')+'" title="'+sCode+'">'+sLabel+'</label></div>';
 				} else {
-					sContent = '<div style="display:block; clear:both;"><span style="white-space: nowrap;"><input data-instance-id="'+this.sId+'" class="tfs_checkbox" type="checkbox" id="'+sElementId+'" value="'+sCode+'"'+sChecked+sDataParent+'><label data-attcode="'+sCode+'" class="'+aClasses.join(' ')+'" title="'+sCode+'" for="'+sElementId+'">&nbsp;'+sLabel+'</label></div>';
+					sContent = '<div style="display:block; clear:both;"><span style="white-space: nowrap;"><input data-instance-id="'+this.sId+'" class="tfs_checkbox" type="checkbox" id="'+sElementId+'" value="'+sCode+'"'+sChecked+sDataParent+'><label data-attcode="'+sCode+'" class="'+aClasses.join(' ')+'" title="'+sCode+'" for="'+sElementId+'">'+sLabel+'</label></div>';
 				}
 				return sContent;
 			}