fix : fixed dropdown ui in invite-user

packages/nc-gui/assets/style.scss

@@ -207,7 +207,7 @@ main {
 }
 
 a {
-  @apply !text-primary !underline hover:!text-accent;
+  @apply !text-primary !underline hover: !text-accent;
 }
 
 .nc-icon {
@@ -429,6 +429,7 @@ a {
   &.ant-dropdown-menu-submenu-popup {
     @apply border-1 border-gray-200;
   }
+
   .ant-dropdown-menu,
   .ant-menu {
     @apply m-0 p-0;
@@ -481,6 +482,7 @@ a {
 .nc-toolbar-btn {
   @apply !shadow-none rounded hover:(ring-1 ring-gray-200 ring-opacity-100 bg-gray-100 !text-gray-800) focus:(ring-1 ring-gray-300 ring-opacity-100 !text-gray-800 bg-gray-100) text-gray-600 text-xs font-medium px-2 border-0;
 }
+
 .nc-toolbar-btn[disabled] {
   @apply !text-gray-400 !cursor-not-allowed !hover:ring-0;
 }
@@ -505,8 +507,8 @@ a {
   @apply bg-gray-300 bg-opacity-20;
 }
 
-/* Hide the element with id selected-item-icon inside NcSelect */
-.ant-select-selection-item #selected-item-icon {
+/* Hide the element with id nc-selected-item-icon */
+.ant-select-selection-item #nc-selected-item-icon {
   display: none;
 }
 
@@ -553,9 +555,11 @@ a {
   0% {
     opacity: 0.2;
   }
+
   50% {
     opacity: 1;
   }
+
   100% {
     opacity: 0.2;
   }

packages/nc-gui/components/account/UserList.vue

@@ -215,6 +215,7 @@ const openDeleteModal = (user: UserType) => {
                 v-model:value="el.roles"
                 class="w-55 nc-user-roles"
                 :dropdown-match-select-width="false"
+                dropdown-class-name="max-w-64"
                 @change="updateRole(el.id, el.roles as string)"
               >
                 <a-select-option
@@ -222,7 +223,15 @@ const openDeleteModal = (user: UserType) => {
                   :value="OrgUserRoles.CREATOR"
                   :label="$t(`objects.roleType.orgLevelCreator`)"
                 >
+                  <div class="flex items-center gap-1 justify-between">
                     <div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
+                    <GeneralIcon
+                      v-if="el?.roles === OrgUserRoles.CREATOR"
+                      icon="check"
+                      class="w-4 h-4 text-primary"
+                      id="nc-selected-item-icon"
+                    />
+                  </div>
                   <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                     {{ $t('msg.info.roles.orgCreator') }}
                   </span>
@@ -233,7 +242,15 @@ const openDeleteModal = (user: UserType) => {
                   :value="OrgUserRoles.VIEWER"
                   :label="$t(`objects.roleType.orgLevelViewer`)"
                 >
+                  <div class="flex items-center gap-1 justify-between">
                     <div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
+                    <GeneralIcon
+                      v-if="el.roles === OrgUserRoles.VIEWER"
+                      icon="check"
+                      class="w-4 h-4 text-primary"
+                      id="nc-selected-item-icon"
+                    />
+                  </div>
                   <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                     {{ $t('msg.info.roles.orgViewer') }}
                   </span>

packages/nc-gui/components/account/UsersModal.vue

@@ -193,13 +193,22 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
                   <a-form-item name="role" :rules="[{ required: true, message: $t('msg.roleRequired') }]">
                     <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
 
-                    <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role">
+                    <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role !px-2">
                       <a-select-option
                         class="nc-role-option"
                         :value="OrgUserRoles.CREATOR"
                         :label="$t(`objects.roleType.orgLevelCreator`)"
                       >
+                        <div class="flex items-center gap-1 justify-between">
                           <div data-rec="true">{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
+                          <GeneralIcon
+                            v-if="usersData.role === OrgUserRoles.CREATOR"
+                            icon="check"
+                            class="w-4 h-4 text-primary"
+                            id="nc-selected-item-icon"
+                          />
+                        </div>
+
                         <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                           {{ $t('msg.info.roles.orgCreator') }}
                         </span>
@@ -210,7 +219,15 @@ const emailInput: VNodeRef = (el) => (el as HTMLInputElement)?.focus()
                         :value="OrgUserRoles.VIEWER"
                         :label="$t(`objects.roleType.orgLevelViewer`)"
                       >
+                        <div class="flex items-center gap-1 justify-between">
                           <div data-rec="true">{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
+                          <GeneralIcon
+                            v-if="usersData.role === OrgUserRoles.VIEWER"
+                            icon="check"
+                            class="w-4 h-4 text-primary"
+                            id="nc-selected-item-icon"
+                          />
+                        </div>
                         <span class="text-gray-500 text-xs whitespace-normal" data-rec="true">
                           {{ $t('msg.info.roles.orgViewer') }}
                         </span>

packages/nc-gui/components/nc/SelectOption.vue

@@ -0,0 +1,23 @@
+<template>
+  <a-select-option :value="value">
+    <div class="flex items-center w-full justify-between w-full gap-2">
+      <div class="truncate flex-1">
+        <slot />
+      </div>
+      <component v-if="isSelected" id="nc-selected-item-icon" class="text-primary w-6 h-6" :is="iconMap.check" />
+    </div>
+  </a-select-option>
+</template>
+<script lang="ts" setup>
+interface Props {
+  isSelected?: boolean
+  value?: string
+}
+
+const props = defineProps<Props>()
+const isSelected = computed(() => props.isSelected)
+const value = computed(() => props.value)
+console.log(props.isSelected, isSelected)
+</script>
+
+

packages/nc-gui/components/smartsheet/grid/Table.vue

@@ -1821,10 +1821,9 @@ onKeyStroke('ArrowDown', onDown)
                         <component :is="viewIcons[ViewTypes.GRID]?.icon" class="nc-view-icon text-inherit" />
                         {{ $t('activity.newRecord') }} - {{ $t('objects.viewType.grid') }}
                       </div>
-                      <div class="h-4 w-4 flex flex-row items-center justify-center">
+
                       <GeneralIcon v-if="isAddNewRecordGridMode" icon="check" class="w-4 h-4 text-primary" />
                     </div>
-                    </div>
                     <div class="flex flex-row text-xs text-gray-400 ml-7.25">{{ $t('labels.addRowGrid') }}</div>
                   </div>
                   <div
@@ -1837,10 +1836,9 @@ onKeyStroke('ArrowDown', onDown)
                         <GeneralIcon class="h-4.5 w-4.5" icon="article" />
                         {{ $t('activity.newRecord') }} - {{ $t('objects.viewType.form') }}
                       </div>
-                      <div class="h-4 w-4 flex flex-row items-center justify-center">
+
                       <GeneralIcon v-if="!isAddNewRecordGridMode" icon="check" class="w-4 h-4 text-primary" />
                     </div>
-                    </div>
                     <div class="flex flex-row text-xs text-gray-400 ml-7.05">{{ $t('labels.addRowForm') }}</div>
                   </div>
                 </div>
@@ -1879,6 +1877,7 @@ onKeyStroke('ArrowDown', onDown)
   .nc-grid-add-edit-column {
     @apply bg-gray-50;
   }
+
   .nc-grid-add-new-cell:hover td {
     @apply text-black !bg-gray-50;
   }
@@ -1999,6 +1998,7 @@ onKeyStroke('ArrowDown', onDown)
     thead th:nth-child(2) {
       @apply border-r-1 !border-r-gray-50;
     }
+
     tbody td:nth-child(2) {
       @apply border-r-1 !border-r-gray-50;
     }

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

@@ -357,7 +357,7 @@ onBeforeUnmount(() => {
                         <component
                           :is="iconMap.check"
                           v-if="filter.logical_op === op.value"
-                          id="selected-item-icon"
+                          id="nc-selected-item-icon"
                           class="text-primary w-4 h-4"
                         />
                       </div>
@@ -411,7 +411,7 @@ onBeforeUnmount(() => {
                   <component
                     :is="iconMap.check"
                     v-if="filter.logical_op === op.value"
-                    id="selected-item-icon"
+                    id="nc-selected-item-icon"
                     class="text-primary w-4 h-4"
                   />
                 </div>
@@ -446,7 +446,7 @@ onBeforeUnmount(() => {
                     <component
                       :is="iconMap.check"
                       v-if="filter.comparison_op === compOp.value"
-                      id="selected-item-icon"
+                      id="nc-selected-item-icon"
                       class="text-primary w-4 h-4"
                     />
                   </div>
@@ -480,7 +480,7 @@ onBeforeUnmount(() => {
                     <component
                       :is="iconMap.check"
                       v-if="filter.comparison_sub_op === compSubOp.value"
-                      id="selected-item-icon"
+                      id="nc-selected-item-icon"
                       class="text-primary w-4 h-4"
                     />
                   </div>

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

@@ -94,7 +94,7 @@ if (!localValue.value && allowEmpty !== true) {
             </span>
           </NcTooltip>
         </div>
-        <component :is="iconMap.check" v-if="localValue === option.value" id="selected-item-icon" class="text-primary w-4 h-4" />
+        <component :is="iconMap.check" v-if="localValue === option.value" id="nc-selected-item-icon" class="text-primary w-4 h-4" />
       </div>
     </a-select-option>
   </NcSelect>

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

@@ -253,7 +253,7 @@ watch(meta, async () => {
                   <component
                     :is="iconMap.check"
                     v-if="group.sort === option.value"
-                    id="selected-item-icon"
+                    id="nc-selected-item-icon"
                     class="text-primary w-4 h-4"
                   />
                 </div>

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

@@ -121,7 +121,7 @@ watch(columns, () => {
             <component
               :is="iconMap.check"
               v-if="search.field === op.value"
-              id="selected-item-icon"
+              id="nc-selected-item-icon"
               class="text-primary w-4 h-4"
             />
           </div>

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

@@ -164,7 +164,7 @@ onMounted(() => {
                   <component
                     :is="iconMap.check"
                     v-if="sort.direction === option.value"
-                    id="selected-item-icon"
+                    id="nc-selected-item-icon"
                     class="text-primary w-4 h-4"
                   />
                 </div>