feat(#1463): change icon position in table header (#1473)

This PR includes an icon before the text in the table header Closes #1463
argilla-io · May 18, 2022 · 4316724 · 4316724
1 parent 999897a
commit 4316724
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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>
 `;