feat(nc-gui): update toolbar groupBy and sort menu dropdown with new design

packages/nc-gui/assets/style.scss

@@ -37,7 +37,7 @@ body {
 }
 
 .rc-virtual-list-holder-inner {
-  @apply !px-1.5
+  @apply !px-1.5;
 }
 .ant-layout-header {
   height: var(--topbar-height) !important;
@@ -51,13 +51,17 @@ main {
   @apply m-0 h-full w-full bg-white;
 }
 
-
 .nc-input-md {
   @apply !rounded-lg !py-2 !px-3 mb-1;
 }
 
 .mobile {
-  .nc-scrollbar-md, .nc-scrollbar-lg, .nc-scrollbar-x-md, .nc-scrollbar-dark-md, .nc-scrollbar-x-md-dark, .nc-scrollbar-x-lg {
+  .nc-scrollbar-md,
+  .nc-scrollbar-lg,
+  .nc-scrollbar-x-md,
+  .nc-scrollbar-dark-md,
+  .nc-scrollbar-x-md-dark,
+  .nc-scrollbar-x-lg {
     &::-webkit-scrollbar {
       width: 0px;
     }
@@ -116,7 +120,6 @@ main {
   overflow-x: auto !important;
   scrollbar-width: thin !important;
 
-
   &::-webkit-scrollbar {
     width: 4px;
     height: 4px;
@@ -131,7 +134,6 @@ main {
     -webkit-border-radius: 10px;
     border-radius: 10px;
 
-
     width: 4px;
     @apply bg-gray-200;
   }
@@ -145,7 +147,6 @@ main {
   overflow-x: hidden;
   scrollbar-width: thin !important;
 
-
   &::-webkit-scrollbar {
     width: 4px;
     height: 4px;
@@ -177,7 +178,6 @@ main {
   overflow-x: auto !important;
   scrollbar-width: thin !important;
 
-  
   &::-webkit-scrollbar {
     width: 4px;
     height: 4px;
@@ -192,14 +192,11 @@ main {
     -webkit-border-radius: 10px;
     border-radius: 10px;
 
-
     width: 4px;
-    background-color: rgba(0, 0, 0, 0.3)
-
+    background-color: rgba(0, 0, 0, 0.3);
   }
   &::-webkit-scrollbar-thumb:hover {
-    background-color: rgba(0, 0, 0, 0.4)
-
+    background-color: rgba(0, 0, 0, 0.4);
   }
 }
 
@@ -220,7 +217,6 @@ main {
     -webkit-border-radius: 10px;
     border-radius: 10px;
 
-
     width: 8px;
     @apply bg-gray-200;
   }
@@ -255,11 +251,11 @@ a {
   .rc-virtual-list-scrollbar {
     @apply !w-1;
   }
-  
-  .rc-virtual-list-scrollbar-thumb{
+
+  .rc-virtual-list-scrollbar-thumb {
     @apply !bg-gray-200;
 
-    &:hover{
+    &:hover {
       @apply !bg-gray-300;
     }
   }
@@ -465,9 +461,9 @@ a {
 
 .ant-dropdown-menu-submenu {
   @apply !py-0;
-  
-  &.ant-dropdown-menu-submenu-popup{
-    @apply border-1 border-gray-200
+
+  &.ant-dropdown-menu-submenu-popup {
+    @apply border-1 border-gray-200;
   }
   .ant-dropdown-menu,
   .ant-menu {
@@ -545,11 +541,11 @@ a {
   @apply bg-gray-300 bg-opacity-20;
 }
 
-.ant-select-item-option:hover{
+.ant-select-item-option:hover {
   @apply !bg-gray-100;
 }
 
-.ant-select-item-option-selected{
+.ant-select-item-option-selected {
   @apply !bg-white;
 }
 /* Hide the element with id nc-selected-item-icon */
@@ -712,7 +708,8 @@ input[type='number'] {
   .nc-emoji {
     @apply xs:(text-lg);
   }
-  .material-symbols, .nc-icon {
+  .material-symbols,
+  .nc-icon {
     @apply !xs:(text-xl -mt-0.25);
   }
 
@@ -729,7 +726,6 @@ input[type='number'] {
   @apply opacity-0 group-hover:(opacity-100) text-gray-600 hover:(bg-gray-400 bg-opacity-20 text-gray-900) duration-100;
 }
 
-
 .nc-button.ant-btn.nc-sidebar-node-btn.nc-sidebar-expand {
   @apply xs:(opacity-100 hover:bg-gray-50);
 
@@ -740,18 +736,18 @@ input[type='number'] {
 
 .ant-message-notice-content {
   @apply !rounded-md;
-  .ant-message-custom-content{
+  .ant-message-custom-content {
     @apply flex items-center;
   }
 }
 
-svg.nc-cell-icon, svg.nc-virtual-cell-icon {
+svg.nc-cell-icon,
+svg.nc-virtual-cell-icon {
   @apply w-1em h-1em flex-none;
   font-size: 1rem;
 }
 
-
-// For select type field list layout 
+// For select type field list layout
 .nc-field-layout-list {
   @apply !flex !flex-col !items-start w-full !space-y-0.5 !max-w-full;
 
@@ -786,3 +782,15 @@ svg.nc-cell-icon, svg.nc-virtual-cell-icon {
   }
 }
 
+.nc-toolbar-dropdown-search-field-input {
+  @apply !rounded-lg;
+
+  .nc-search-icon {
+    @apply text-gray-400;
+  }
+
+  &:hover .nc-search-icon,
+  &.ant-input-affix-wrapper-focused .nc-search-icon {
+    @apply text-gray-800;
+  }
+}

packages/nc-gui/components/smartsheet/toolbar/CreateGroupBy.vue

@@ -71,6 +71,7 @@ watch(
   () => {
     if (!isParentOpen.value) return
 
+    search.value = ''
     setTimeout(() => {
       inputRef.value?.focus()
     }, 100)
@@ -96,28 +97,41 @@ const onArrowUp = () => {
 
 <template>
   <div
-    class="flex flex-col w-full pt-4 pb-2 min-w-64 nc-group-by-create-modal"
+    class="flex flex-col w-full pt-2 w-80 nc-group-by-create-modal"
     @keydown.arrow-down.prevent="onArrowDown"
     @keydown.arrow-up.prevent="onArrowUp"
     @keydown.enter.prevent="onClick(options[activeFieldIndex])"
   >
-    <div class="flex pb-3 px-4 border-b-1 border-gray-100">
-      <input ref="inputRef" v-model="search" class="w-full focus:outline-none" :placeholder="$t('msg.selectFieldToGroup')" />
+    <div class="w-full pb-3 px-2" @click.stop>
+      <a-input
+        ref="inputRef"
+        v-model:value="search"
+        :placeholder="$t('msg.selectFieldToGroup')"
+        class="nc-toolbar-dropdown-search-field-input"
+      >
+        <template #prefix> <GeneralIcon icon="search" class="nc-search-icon h-3.5 w-3.5 mr-1" /> </template
+      ></a-input>
     </div>
-    <div class="flex-col w-full max-h-100 max-w-76 nc-scrollbar-md !overflow-y-auto">
-      <div v-if="!options.length" class="flex text-gray-500 px-4 py-2.25">{{ $t('general.empty') }}</div>
+
+    <div class="flex-col w-full max-h-100 nc-scrollbar-thin !overflow-y-auto px-2 pb-2">
+      <div v-if="!options.length" class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6">
+        <img src="~assets/img/placeholder/no-search-result-found.png" class="!w-[164px] flex-none" />
+
+        {{ $t('title.noResultsMatchedYourSearch') }}
+      </div>
+
       <div
         v-for="(option, index) in options"
         :key="index"
         v-e="['c:group-by:add:column:select']"
-        class="flex flex-row h-10 items-center gap-x-1.5 px-2.5 hover:bg-gray-100 cursor-pointer nc-group-by-column-search-item"
+        class="flex flex-row h-10 items-center gap-x-1.5 px-2 hover:bg-gray-100 cursor-pointer nc-group-by-column-search-item rounded-md"
         :class="{
           'bg-gray-100': activeFieldIndex === index,
         }"
         @click="onClick(option)"
       >
         <SmartsheetHeaderIcon :column="option" />
-        <NcTooltip class="truncate">
+        <NcTooltip class="truncate" show-on-truncate-only>
           <template #title> {{ option.title }}</template>
           <span>
             {{ option.title }}

packages/nc-gui/components/smartsheet/toolbar/CreateSort.vue

@@ -68,6 +68,7 @@ watch(
   () => {
     if (!isParentOpen.value) return
 
+    search.value = ''
     setTimeout(() => {
       inputRef.value?.focus()
     }, 100)
@@ -93,21 +94,34 @@ const onArrowUp = () => {
 
 <template>
   <div
-    class="flex flex-col w-full pt-4 pb-2 min-w-64 nc-sort-create-modal"
+    class="flex flex-col w-full pt-2 w-80 nc-sort-create-modal"
     @keydown.arrow-down.prevent="onArrowDown"
     @keydown.arrow-up.prevent="onArrowUp"
     @keydown.enter.prevent="onClick(options[activeFieldIndex])"
   >
-    <div class="flex pb-3 px-4 border-b-1 border-gray-100">
-      <input ref="inputRef" v-model="search" class="w-full focus:outline-none" :placeholder="$t('msg.selectFieldToSort')" />
+    <div class="w-full pb-3 px-2" @click.stop>
+      <a-input
+        ref="inputRef"
+        v-model:value="search"
+        :placeholder="$t('msg.selectFieldToSort')"
+        class="nc-toolbar-dropdown-search-field-input"
+      >
+        <template #prefix> <GeneralIcon icon="search" class="nc-search-icon h-3.5 w-3.5 mr-1" /> </template
+      ></a-input>
     </div>
-    <div class="flex-col w-full max-h-100 max-w-76 nc-scrollbar-md !overflow-y-auto">
-      <div v-if="!options.length" class="flex text-gray-500 px-4 py-2.25">{{ $t('general.empty') }}</div>
+
+    <div class="flex-col w-full max-h-100 nc-scrollbar-thin !overflow-y-auto px-2 pb-2">
+      <div v-if="!options.length" class="px-2 py-6 text-gray-500 flex flex-col items-center gap-6">
+        <img src="~assets/img/placeholder/no-search-result-found.png" class="!w-[164px] flex-none" />
+
+        {{ $t('title.noResultsMatchedYourSearch') }}
+      </div>
+
       <div
         v-for="(option, index) in options"
         :key="index"
         v-e="['c:sort:add:column:select']"
-        class="flex flex-row h-10 items-center gap-x-1.5 px-2.5 rounded-md m-1.5 hover:bg-gray-100 cursor-pointer nc-sort-column-search-item"
+        class="flex flex-row h-10 items-center gap-x-1.5 px-2 rounded-md hover:bg-gray-100 cursor-pointer nc-sort-column-search-item"
         :class="{
           'bg-gray-100': activeFieldIndex === index,
         }"
@@ -116,9 +130,9 @@ const onArrowUp = () => {
         <SmartsheetHeaderIcon :column="option" />
         <NcTooltip class="truncate" show-on-truncate-only>
           <template #title> {{ option.title }}</template>
-          <template #default>
+          <span>
             {{ option.title }}
-          </template>
+          </span>
         </NcTooltip>
       </div>
     </div>