From 26f0592509ccb4d7bd1e1211b2e2fdd800fd336d Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Tue, 30 Jan 2024 11:47:43 +0530
Subject: [PATCH] fix: rearranged view control menu & added columns icon
 instead of settings icon

---
 frontend/src/components/ColumnSettings.vue    |  8 +++++---
 frontend/src/components/Icons/ColumnsIcon.vue | 16 ++++++++++++++++
 frontend/src/components/ViewControls.vue      | 14 +++++++-------
 3 files changed, 28 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/components/Icons/ColumnsIcon.vue

diff --git a/frontend/src/components/ColumnSettings.vue b/frontend/src/components/ColumnSettings.vue
index 1972ead6..a0f6808a 100644
--- a/frontend/src/components/ColumnSettings.vue
+++ b/frontend/src/components/ColumnSettings.vue
@@ -1,8 +1,10 @@
 <template>
   <NestedPopover>
     <template #target>
-      <Button>
-        <SettingsIcon class="h-4" />
+      <Button label="Columns">
+        <template #prefix>
+          <ColumnsIcon class="h-4" />
+        </template>
       </Button>
     </template>
     <template #body="{ close }">
@@ -132,7 +134,7 @@
 </template>
 
 <script setup>
-import SettingsIcon from '@/components/Icons/SettingsIcon.vue'
+import ColumnsIcon from '@/components/Icons/ColumnsIcon.vue'
 import EditIcon from '@/components/Icons/EditIcon.vue'
 import DragIcon from '@/components/Icons/DragIcon.vue'
 import ReloadIcon from '@/components/Icons/ReloadIcon.vue'
diff --git a/frontend/src/components/Icons/ColumnsIcon.vue b/frontend/src/components/Icons/ColumnsIcon.vue
new file mode 100644
index 00000000..31751955
--- /dev/null
+++ b/frontend/src/components/Icons/ColumnsIcon.vue
@@ -0,0 +1,16 @@
+<template>
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8.07548 1.50005C8.05087 1.49632 8.02566 1.49438 8 1.49438C7.97434 1.49438 7.94914 1.49632 7.92452 1.50005H3C1.89543 1.50005 1 2.39548 1 3.50005V12.5C1 13.6046 1.89543 14.5 3 14.5H7.92511C7.94954 14.5037 7.97455 14.5056 8 14.5056C8.02545 14.5056 8.05046 14.5037 8.07489 14.5H13C14.1046 14.5 15 13.6046 15 12.5V3.50005C15 2.39548 14.1046 1.50005 13 1.50005H8.07548ZM7.5 2.50005H3C2.44772 2.50005 2 2.94776 2 3.50005V12.5C2 13.0523 2.44772 13.5 3 13.5H7.5L7.5 2.50005ZM8.5 13.5L8.5 2.50005H13C13.5523 2.50005 14 2.94776 14 3.50005V12.5C14 13.0523 13.5523 13.5 13 13.5H8.5Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>
diff --git a/frontend/src/components/ViewControls.vue b/frontend/src/components/ViewControls.vue
index ba023695..3767b6e2 100644
--- a/frontend/src/components/ViewControls.vue
+++ b/frontend/src/components/ViewControls.vue
@@ -16,6 +16,13 @@
           </Button>
         </template>
       </Dropdown>
+      <Dropdown :options="viewActions">
+        <template #default>
+          <Button>
+            <FeatherIcon name="more-horizontal" class="h-4 w-4" />
+          </Button>
+        </template>
+      </Dropdown>
     </div>
     <div class="flex items-center gap-2">
       <div
@@ -46,13 +53,6 @@
             <RefreshIcon class="h-4 w-4" />
           </template>
         </Button>
-        <Dropdown :options="viewActions">
-          <template #default>
-            <Button>
-              <FeatherIcon name="more-horizontal" class="h-4 w-4" />
-            </Button>
-          </template>
-        </Dropdown>
       </div>
     </div>
   </div>