feat(gui-v2): sort layout

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui-v2/components/smartsheet-toolbar/SortListMenu.vue

@@ -6,6 +6,7 @@ import useViewSorts from '~/composables/useViewSorts'
 import MdiMenuDownIcon from '~icons/mdi/menu-down'
 import MdiSortIcon from '~icons/mdi/sort'
 import MdiDeleteIcon from '~icons/mdi/close-box'
+import MdiAddIcon from '~icons/mdi/plus'
 
 const meta = inject(MetaInj)
 const view = inject(ActiveViewInj)
@@ -26,70 +27,75 @@ watch(
 </script>
 
 <template>
-  <v-menu offset-y transition="slide-y-transition">
+  <a-dropdown offset-y class="" :trigger="['click']">
-    <template #activator="{ props }">
+    <v-badge :value="sorts && sorts.length" color="primary" dot overlap>
-      <v-badge :value="sorts && sorts.length" color="primary" dot overlap>
+      <a-button
-        <a-button
+        v-t="['c:sort']"
-          v-t="['c:sort']"
+        size="small"
-          size="small"
+        class="nc-sort-menu-btn px-2 nc-remove-border border-0"
-          class="nc-sort-menu-btn px-2 nc-remove-border border-0"
+        :disabled="isLocked"
-          :disabled="isLocked"
+        small
-          small
+        text
-          text
+        outlined
-          outlined
+        :class="{
-          :class="{
+          'primary lighten-5 grey&#45;&#45;text text&#45;&#45;darken-3': sorts && sorts.length,
-            'primary lighten-5 grey&#45;&#45;text text&#45;&#45;darken-3': sorts && sorts.length,
+        }"
-          }"
+        v-bind="props"
-          v-bind="props"
+        ><div class="flex align-center gap-1 text-sm">
-          ><div class="flex align-center gap-1 text-sm">
+          <MdiSortIcon class="text-grey" />
-            <MdiSortIcon class="text-grey" />
+          <!-- Sort -->
-            <!-- Sort -->
+          <span class="text-capitalize">{{ $t('activity.sort') }}</span>
-            <span class="text-capitalize">{{ $t('activity.sort') }}</span>
+          <MdiMenuDownIcon class="text-grey" />
-            <MdiMenuDownIcon class="text-grey" />
+        </div>
+      </a-button>
+    </v-badge>
+    <template #overlay>
+      <div class="bg-white shadow p-2 menu-filter-dropdown min-w-[400px]">
+        <div class="sort-grid" @click.stop>
+          <template v-for="(sort, i) in sorts || []" :key="i">
+            <!--          <v-icon :key="`${i}icon`" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)"> mdi-close-box </v-icon> -->
+            <MdiDeleteIcon
+              class="nc-sort-item-remove-btn text-grey align-self-center"
+              small
+              @click.stop="deleteSort(sort, i)"
+            ></MdiDeleteIcon>
+            <FieldListAutoCompleteDropdown
+              v-model="sort.fk_column_id"
+              class="caption nc-sort-field-select"
+              :columns="columns"
+              @click.stop
+              @update:model-value="saveOrUpdate(sort, i)"
+            />
+            <a-select
+              v-model:value="sort.direction"
+              class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select"
+              :items="[
+                { text: 'asc', value: 'asc' },
+                { text: 'desc', value: 'desc' },
+              ]"
+              :label="$t('labels.operation')"
+              density="compact"
+              variant="solo"
+              hide-details
+              @click.stop
+              @update:model-value="saveOrUpdate(sort, i)"
+            />
+            <!--            <template #item="{ item }"> -->
+            <!--              <span class="caption font-weight-regular">{{ item.text }}</span> -->
+            <!--            </template> -->
+            <!--          </v-select> -->
+          </template>
+        </div>
+        <a-button size="small" class="text-grey text-capitalize text-sm my-3" @click.stop="addSort">
+          <div class="flex gap-1 align-center">
+            <MdiAddIcon />
+            <!-- Add Sort Option -->
+            {{ $t('activity.addSort') }}
           </div>
         </a-button>
-      </v-badge>
-    </template>
-    <div class="backgroundColor pa-2 menu-filter-dropdown bg-background min-w-[400px]">
-      <div class="sort-grid" @click.stop>
-        <template v-for="(sort, i) in sorts || []" :key="i">
-          <!--          <v-icon :key="`${i}icon`" class="nc-sort-item-remove-btn" small @click.stop="deleteSort(sort)"> mdi-close-box </v-icon> -->
-          <MdiDeleteIcon
-            class="nc-sort-item-remove-btn text-grey align-self-center"
-            small
-            @click.stop="deleteSort(sort, i)"
-          ></MdiDeleteIcon>
-          <FieldListAutoCompleteDropdown
-            v-model="sort.fk_column_id"
-            class="caption nc-sort-field-select"
-            :columns="columns"
-            @click.stop
-            @update:model-value="saveOrUpdate(sort, i)"
-          />
-          <v-select
-            v-model="sort.direction"
-            class="flex-shrink-1 flex-grow-0 caption nc-sort-dir-select"
-            :items="['asc', 'desc']"
-            :label="$t('labels.operation')"
-            density="compact"
-            variant="solo"
-            hide-details
-            @click.stop
-            @update:model-value="saveOrUpdate(sort, i)"
-          />
-          <!--            <template #item="{ item }"> -->
-          <!--              <span class="caption font-weight-regular">{{ item.text }}</span> -->
-          <!--            </template> -->
-          <!--          </v-select> -->
-        </template>
       </div>
-      <v-btn small class="elevation-0 text-grey text-capitalize text-sm my-3" @click.stop="addSort">
+    </template>
-        <!-- todo:        <v-icon small color="grey"> mdi-plus </v-icon> -->
+  </a-dropdown>
-        <!-- Add Sort Option -->
-        {{ $t('activity.addSort') }}
-      </v-btn>
-    </div>
-  </v-menu>
 </template>
 
 <style scoped>