fix : changed dropdown items ui for column filter

packages/nc-gui/assets/style.scss

@@ -493,10 +493,20 @@ a {
   @apply p-4;
 }
 
-.ant-select-item-option-selected:not(.ant-select-item-option-disabled),
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled):hover,
 .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
   @apply bg-gray-300 bg-opacity-20;
 }
+/* Add this to your global or component-specific stylesheet */
+
+/* Hide the element with id selected-item-icon inside NcSelect */
+.ant-select-selection-item #selected-item-icon {
+  display: none;
+}
+
+.ant-select-item-option-selected:not(.ant-select-item-option-disabled){
+  @apply bg-transparent 
+}
 
 .ant-select-selection-search-input:focus {
   @apply !ring-0;

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

@@ -352,9 +352,15 @@ onBeforeUnmount(() => {
                     @change="saveOrUpdate(filter, i)"
                   >
                     <a-select-option v-for="op in logicalOps" :key="op.value" :value="op.value">
-                      <span class="capitalize">
-                        {{ op.value }}
-                      </span>
+                      <div class="flex items-center w-full justify-between w-full gap-2">
+                        <div class="truncate flex-1 capitalize">{{ op.value }}</div>
+                        <component
+                          v-if="filter.logical_op === op.value"
+                          id="selected-item-icon"
+                          class="text-primary w-5 h-5"
+                          :is="iconMap.check"
+                        />
+                      </div>
                     </a-select-option>
                   </NcSelect>
                 </div>
@@ -400,9 +406,15 @@ onBeforeUnmount(() => {
               @click.stop
             >
               <a-select-option v-for="op of logicalOps" :key="op.value" :value="op.value">
-                <span class="capitalize">
-                  {{ op.value }}
-                </span>
+                <div class="flex items-center w-full justify-between w-full gap-2">
+                  <div class="truncate flex-1 capitalize">{{ op.value }}</div>
+                  <component
+                    v-if="filter.logical_op === op.value"
+                    id="selected-item-icon"
+                    class="text-primary w-5 h-5"
+                    :is="iconMap.check"
+                  />
+                </div>
               </a-select-option>
             </NcSelect>
             <SmartsheetToolbarFieldListAutoCompleteDropdown
@@ -424,12 +436,20 @@ onBeforeUnmount(() => {
               variant="solo"
               :disabled="filter.readOnly"
               hide-details
-              dropdown-class-name="nc-dropdown-filter-comp-op"
+              dropdown-class-name="nc-dropdown-filter-comp-op !max-w-80"
               @change="filterUpdateCondition(filter, i)"
             >
               <template v-for="compOp of comparisonOpList(getColumn(filter)?.uidt)" :key="compOp.value">
                 <a-select-option v-if="isComparisonOpAllowed(filter, compOp)" :value="compOp.value">
-                  {{ compOp.text }}
+                  <div class="flex items-center w-full justify-between w-full gap-2">
+                    <div class="truncate flex-1">{{ compOp.text }}</div>
+                    <component
+                      v-if="filter.comparison_op === compOp.value"
+                      id="selected-item-icon"
+                      class="text-primary w-5 h-5"
+                      :is="iconMap.check"
+                    />
+                  </div>
                 </a-select-option>
               </template>
             </NcSelect>
@@ -452,7 +472,15 @@ onBeforeUnmount(() => {
             >
               <template v-for="compSubOp of comparisonSubOpList(filter.comparison_op)" :key="compSubOp.value">
                 <a-select-option v-if="isComparisonSubOpAllowed(filter, compSubOp)" :value="compSubOp.value">
-                  {{ compSubOp.text }}
+                  <div class="flex items-center w-full justify-between w-full gap-2">
+                    <div class="truncate flex-1">{{ compSubOp.text }}</div>
+                    <component
+                      v-if="filter.comparison_sub_op === compSubOp.value"
+                      id="selected-item-icon"
+                      class="text-primary w-5 h-5"
+                      :is="iconMap.check"
+                    />
+                  </div>
                 </a-select-option>
               </template>
             </NcSelect>
@@ -546,6 +574,7 @@ onBeforeUnmount(() => {
 .nc-filter-item-remove-btn {
   @apply text-gray-600 hover:text-gray-800;
 }
+
 .nc-filter-grid {
   @apply items-center w-full;
 }

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

@@ -80,17 +80,20 @@ if (!localValue.value && allowEmpty !== true) {
     dropdown-class-name="nc-dropdown-toolbar-field-list"
   >
     <a-select-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value">
-      <div class="flex gap-2 items-center items-center h-full">
-        <component :is="option.icon" class="min-w-5 !mx-0" />
-        <NcTooltip
-          :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
-          class="max-w-[15rem] truncate select-none"
-        >
-          <template #title> {{ option.label }}</template>
-          <span>
-            {{ option.label }}
-          </span>
-        </NcTooltip>
+      <div class="flex items-center w-full justify-between w-full gap-2">
+        <div class="flex gap-1 items-center truncate items-center h-full">
+          <component :is="option.icon" class="min-w-5 !mx-0" />
+          <NcTooltip
+            :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
+            class="max-w-[15rem] truncate select-none"
+          >
+            <template #title> {{ option.label }}</template>
+            <span>
+              {{ option.label }}
+            </span>
+          </NcTooltip>
+        </div>
+        <component v-if="localValue === option.value" id="selected-item-icon" class="text-primary w-5 h-5" :is="iconMap.check" />
       </div>
     </a-select-option>
   </NcSelect>