From 5172324613b50b340184e758587f76c4bd6b71e8 Mon Sep 17 00:00:00 2001
From: leiyre <leire@recogn.ai>
Date: Wed, 18 May 2022 17:45:54 +0200
Subject: [PATCH] feat(#1463): change icon position in table header (#1473)

This PR includes an icon before the text in the table header

Closes #1463

(cherry picked from commit 4316724a7f634abc50f8a0a517ac6aae4ad42722)
---
 frontend/components/core/table/ReTableInfo.vue            | 7 ++-----
 frontend/components/core/table/TableFiltrableColumn.vue   | 6 ++----
 .../table/__snapshots__/TableFiltrableColumn.spec.js.snap | 8 ++++----
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/frontend/components/core/table/ReTableInfo.vue b/frontend/components/core/table/ReTableInfo.vue
index bf5272d541..d5b87c5029 100644
--- a/frontend/components/core/table/ReTableInfo.vue
+++ b/frontend/components/core/table/ReTableInfo.vue
@@ -39,8 +39,8 @@
                 :class="[sortOrder, { active: sortedBy === column.field }]"
                 @click="sort(column)"
               >
-                <span>{{ column.name }}</span>
                 <svgicon color="#4C4EA3" width="15" height="15" name="sort" />
+                <span>{{ column.name }}</span>
               </button>
             </div>
           </div>
@@ -481,9 +481,6 @@ export default {
       span {
         white-space: nowrap;
       }
-      .svg-icon {
-        margin-left: 5px;
-      }
     }
   }
   &__body {
@@ -516,7 +513,7 @@ export default {
       }
     }
     .svg-icon {
-      margin-right: 1em;
+      margin-right: 0.5em;
       fill: $font-medium-color;
     }
   }
diff --git a/frontend/components/core/table/TableFiltrableColumn.vue b/frontend/components/core/table/TableFiltrableColumn.vue
index f7ebeae8b5..ff9b3ff8ff 100644
--- a/frontend/components/core/table/TableFiltrableColumn.vue
+++ b/frontend/components/core/table/TableFiltrableColumn.vue
@@ -5,8 +5,8 @@
       @click="openFilter(column)"
       :class="[visibleFilter || selectedOptions.length ? 'active' : '']"
     >
-      {{ column.name }}
       <svgicon color="#4C4EA3" name="filtrable-column" />
+      {{ column.name }}
     </button>
     <div class="table__filter" v-click-outside="close" v-if="visibleFilter">
       <input
@@ -248,15 +248,13 @@ button {
     border-radius: $border-radius;
     color: $primary-color;
     ::v-deep svg {
-      margin-right: 0;
       & > * {
         fill: $primary-color !important;
       }
     }
   }
   .svg-icon {
-    margin-left: 5px;
-    margin-right: 1em;
+    margin-right: 0.5em;
   }
 }
 </style>
diff --git a/frontend/specs/components/core/table/__snapshots__/TableFiltrableColumn.spec.js.snap b/frontend/specs/components/core/table/__snapshots__/TableFiltrableColumn.spec.js.snap
index 566e215d2a..d64abd52c7 100644
--- a/frontend/specs/components/core/table/__snapshots__/TableFiltrableColumn.spec.js.snap
+++ b/frontend/specs/components/core/table/__snapshots__/TableFiltrableColumn.spec.js.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TableFiltrableColumn renders properly 1`] = `
-<div class="filter__container"><button class="">
-    Workspace
-    <svg version="1.1" viewBox="0 0 15 11" class="svg-icon svg-fill">
+<div class="filter__container"><button class=""><svg version="1.1" viewBox="0 0 15 11" class="svg-icon svg-fill">
       <path fill="#4C4EA3" stroke="none" pid="0" d="M.008.008v1.769h14.15V.008H.008zm2.527 6.064h9.096V4.304H2.535v1.768zm2.527 4.296h4.042V8.599H5.062v1.769z" _fill="#0508D9" fill-rule="nonzero"></path>
-    </svg></button>
+    </svg>
+    Workspace
+  </button>
   <!---->
 </div>
 `;