refactor(gui-v2): ui updates

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

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

@@ -96,23 +96,23 @@ watch(
 
 <template>
   <div
-    class=" pa-2 menu-filter-dropdown bg-gray-50"
+    class="pa-2 menu-filter-dropdown bg-gray-50"
     :class="{ 'shadow-xl min-w-[430px] max-w-[630px] max-h-[max(80vh,500px)] overflow-auto': !nested, 'border-1 w-full': nested }"
   >
     <div v-if="filters && filters.length" class="nc-filter-grid mb-2" @click.stop>
       <template v-for="(filter, i) in filters" :key="filter.id || i">
         <template v-if="filter.status !== 'delete'">
-          <template v-if="filter.is_group" >
+          <template v-if="filter.is_group">
             <MdiDeleteIcon
-              :key="i"
               v-if="!filter.readOnly"
+              :key="i"
               small
               class="nc-filter-item-remove-btn text-grey"
               @click.stop="deleteFilter(filter, i)"
             />
-            <span v-else :key="i + 'dummy'"/>
+            <span v-else :key="`${i}dummy`" />
 
-            <div class="d-flex" :key="i + 'nested'">
+            <div :key="`${i}nested`" class="d-flex">
               <a-select
                 v-model:value="filter.logical_op"
                 size="small"
@@ -224,7 +224,7 @@ watch(
     </div>
 
     <div class="flex gap-2">
-      <a-button  size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilter">
+      <a-button size="small" class="elevation-0 text-capitalize text-grey" @click.stop="addFilter">
         <div class="flex align-center gap-1">
           <!--      <v-icon small color="grey"> mdi-plus </v-icon> -->
           <MdiAddIcon />

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

@@ -18,7 +18,7 @@ const applyChanges = () => {}
 <template>
   <a-dropdown :trigger="['click']">
     <div :class="{ 'nc-badge nc-active-btn': filtersLength }">
-      <a-button v-t="['c:filter']" class="nc-filter-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
+      <a-button v-t="['c:filter']" class="text-xs nc-filter-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
         <div class="flex align-center gap-1">
           <MdiFilterIcon class="text-grey" />
           <!-- Filter -->
@@ -28,7 +28,7 @@ const applyChanges = () => {}
       </a-button>
     </div>
     <template #overlay>
-      <SmartsheetToolbarColumnFilter @update:filters-length="filtersLength = $event" />
+      <SmartsheetToolbarColumnFilter class="nc-table-toolbar-menu" @update:filters-length="filtersLength = $event" />
     </template>
   </a-dropdown>
 </template>

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

@@ -96,4 +96,3 @@ const filterOption = (input: string, option: any) => {
     </v-autocomplete> -->
 </template>
 
-<style scoped></style>

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

@@ -78,7 +78,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
 <template>
   <a-dropdown :trigger="['click']">
     <div :class="{ 'nc-badge nc-active-btn': isAnyFieldHidden }">
-      <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn text-xs" :disabled="isLocked" size="small">
+      <a-button v-t="['c:fields']" class="nc-fields-menu-btn nc-toolbar-btn" :disabled="isLocked" size="small">
         <div class="flex align-center gap-1">
           <!--          <v-icon small class="mr-1" color="#777"> mdi-eye-off-outline </v-icon> -->
           <MdiEyeIcon class="text-grey"></MdiEyeIcon>
@@ -89,7 +89,7 @@ const onMove = (event: { moved: { newIndex: number } }) => {
       </a-button>
     </div>
     <template #overlay>
-      <div class="pt-0 min-w-[280px] bg-white shadow" @click.stop>
+      <div class="pt-0 min-w-[280px] bg-gray-50 shadow nc-table-toolbar-menu" @click.stop>
         <div class="p-1" @click.stop>
           <a-input v-model:value="filterQuery" size="small" :placeholder="$t('placeholder.searchFields')" />
         </div>
@@ -114,11 +114,11 @@ const onMove = (event: { moved: { newIndex: number } }) => {
           </a-checkbox>
         </div>
         <div class="p-2 flex gap-2" @click.stop>
-          <a-button size="small" class="text-gray-500 text-xs text-capitalize" @click.stop="showAll">
+          <a-button size="small" class="text-xs text-gray-500 text-capitalize" @click.stop="showAll">
             <!-- Show All -->
             {{ $t('general.showAll') }}
           </a-button>
-          <a-button size="small" class="text-gray-500 text-xs text-capitalize" @click.stop="hideAll">
+          <a-button size="small" class="text-xs text-gray-500 text-capitalize" @click.stop="hideAll">
             <!-- Hide All -->
             {{ $t('general.hideAll') }}
           </a-button>

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

@@ -39,7 +39,7 @@ watch(
     </div>
     <template #overlay>
       <div class="bg-gray-50 shadow p-2 menu-filter-dropdown min-w-[400px]">
-        <div class="sort-grid" @click.stop>
+        <div v-if="sorts?.length" class="sort-grid mb-2" @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
@@ -55,17 +55,14 @@ watch(
               @update:model-value="saveOrUpdate(sort, i)"
             />
             <a-select
-              size="small"
               v-model:value="sort.direction"
+              size="small"
               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)"
             />
@@ -75,7 +72,7 @@ watch(
             <!--          </v-select> -->
           </template>
         </div>
-        <a-button size="small" class="text-grey text-capitalize text-sm my-3" @click.stop="addSort">
+        <a-button size="small" class="text-xs text-grey text-capitalize " @click.stop="addSort">
           <div class="flex gap-1 align-center">
             <MdiAddIcon />
             <!-- Add Sort Option -->
@@ -94,4 +91,8 @@ watch(
   column-gap: 6px;
   row-gap: 6px;
 }
+
+:deep(.ant-btn, .ant-select, .ant-input, ::placeholder) {
+  @apply "!text-xs";
+}
 </style>

packages/nc-gui-v2/components/smartsheet/Toolbar.vue

@@ -13,11 +13,26 @@
     <SmartsheetToolbarMoreActions />
 
     <div class="flex-1" />
+<!--    <SmartsheetToolbarLockMenu />
+    <div class="dot" />
+    <SmartsheetToolbarReload />
+    <div class="dot" />
+    <SmartsheetToolbarAddRow />
+    <div class="dot" />
+    <SmartsheetToolbarDeleteTable />
+    <div class="dot" />
+    <SmartsheetToolbarToggleDrawer class="mr-2" />
+ -->
   </div>
 </template>
 
 <style scoped>
 :deep(.nc-toolbar-btn) {
   @apply border-0 !text-xs font-semibold px-2;
-}
+}/*
+.dot {
+  @apply w-[3px] h-[3px] bg-gray-300 mx-1 rounded-full;
+}*/
+
+
 </style>