fix: Missing lookup/rollup icon colour (#8512)

* fix: missing lookup/rollup icon color

* fix: icon color in field menu

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

@@ -2447,7 +2447,7 @@ onKeyStroke('ArrowDown', onDown)
 
     :deep(.nc-cell-icon),
     :deep(.nc-virtual-cell-icon) {
-      @apply !w-3.5 !h-3.5 !text-gray-500 !text-small;
+      @apply !w-3.5 !h-3.5 !text-small;
     }
   }
 

packages/nc-gui/components/smartsheet/header/VirtualCell.vue

@@ -220,7 +220,7 @@ const onClick = (e: Event) => {
       <GeneralIcon
         v-if="isExpandedForm && !isMobileMode && isUIAllowed('fieldEdit')"
         icon="arrowDown"
-        class="flex-none text-grey h-full text-grey cursor-pointer ml-1 group-hover:visible"
+        class="flex-none h-full cursor-pointer ml-1 group-hover:visible"
         :class="{
           visible: editColumnDropdown || isDropDownOpen,
           invisible: !(editColumnDropdown || isDropDownOpen),

packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts

@@ -17,7 +17,7 @@ const renderIcon = (column: ColumnType, relationColumn?: ColumnType) => {
         case RelationTypes.BELONGS_TO:
           return { icon: iconMap.bt_solid }
         case RelationTypes.ONE_TO_ONE:
-          return { icon: iconMap.oneToOneSolid, color: 'text-blue-500' }
+          return { icon: iconMap.oneToOneSolid, color: 'text-purple-500' }
       }
       break
     case UITypes.SpecificDBType:
@@ -36,6 +36,8 @@ const renderIcon = (column: ColumnType, relationColumn?: ColumnType) => {
           return { icon: iconMap.cellLookup, color: 'text-orange-500' }
         case RelationTypes.BELONGS_TO:
           return { icon: iconMap.cellLookup, color: 'text-blue-500' }
+        case RelationTypes.ONE_TO_ONE:
+          return { icon: iconMap.cellLookup, color: 'text-purple-500' }
       }
       return { icon: iconMap.cellLookup, color: 'text-grey' }
     case UITypes.Rollup:
@@ -46,6 +48,8 @@ const renderIcon = (column: ColumnType, relationColumn?: ColumnType) => {
           return { icon: iconMap.cellRollup, color: 'text-orange-500' }
         case RelationTypes.BELONGS_TO:
           return { icon: iconMap.cellRollup, color: 'text-blue-500' }
+        case RelationTypes.ONE_TO_ONE:
+          return { icon: iconMap.cellRollup, color: 'text-purple-500' }
       }
       return { icon: iconMap.cellRollup, color: 'text-grey' }
     case UITypes.Count:
@@ -76,15 +80,16 @@ export default defineComponent({
 
     const column = computed(() => columnMeta.value ?? injectedColumn.value)
 
+    const { metas } = useMetas()
+
     let relationColumn: ColumnType
 
     return () => {
       if (!column.value) return null
 
       if (column && column.value) {
-        if (isMm(column.value) || isHm(column.value) || isBt(column.value) || isLookup(column.value) || isRollup(column.value)) {
-          const meta = inject(MetaInj, ref())
-          relationColumn = meta.value?.columns?.find(
+        if (isLookup(column.value) || isRollup(column.value)) {
+          relationColumn = metas.value?.[column.value.fk_model_id]?.columns?.find(
             (c) => c.id === column.value?.colOptions?.fk_relation_column_id,
           ) as ColumnType
         }
@@ -92,7 +97,7 @@ export default defineComponent({
 
       const { icon: Icon, color } = renderIcon(column.value, relationColumn)
 
-      return h(Icon, { class: `${color} mx-1 nc-virtual-cell-icon` })
+      return h(Icon, { class: `${color || 'text-grey'} mx-1 nc-virtual-cell-icon` })
     }
   },
 })

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

@@ -16,6 +16,8 @@ const customColumns = toRef(restProps, 'columns')
 
 const meta = inject(MetaInj, ref())
 
+const { metas } = useMetas()
+
 const localValue = computed({
   get: () => modelValue,
   set: (val) => emit('update:modelValue', val),
@@ -80,6 +82,31 @@ const filterOption = (input: string, option: any) => option.label.toLowerCase()?
 if (!localValue.value && allowEmpty !== true) {
   localValue.value = (options.value?.[0].value as string) || ''
 }
+
+const relationColor = {
+  [RelationTypes.BELONGS_TO]: 'text-blue-500',
+  [RelationTypes.ONE_TO_ONE]: 'text-purple-500',
+  [RelationTypes.HAS_MANY]: 'text-orange-500',
+  [RelationTypes.MANY_TO_MANY]: 'text-pink-500',
+}
+
+// extract colors for Lookup and Rollup columns
+const colors = computed(() => {
+  return (
+    meta.value?.columns?.reduce((obj, col) => {
+      if ((col && isLookup(col)) || isRollup(col)) {
+        const relationColumn = metas.value?.[meta.value.id]?.columns?.find(
+          (c) => c.id === col.colOptions?.fk_relation_column_id,
+        ) as ColumnType
+
+        if (relationColumn) {
+          obj[col.id] = relationColor[relationColumn.colOptions?.type as RelationTypes]
+        }
+      }
+      return obj
+    }, {}) || {}
+  )
+})
 </script>
 
 <template>
@@ -94,7 +121,7 @@ if (!localValue.value && allowEmpty !== true) {
     <a-select-option v-for="option in options" :key="option.value" :label="option.label" :value="option.value">
       <div class="flex items-center w-full justify-between w-full gap-2 max-w-50">
         <div class="flex gap-1.5 flex-1 items-center truncate items-center h-full">
-          <component :is="option.icon" class="!w-3.5 !h-3.5 !mx-0 !text-gray-500" />
+          <component :is="option.icon" class="!w-3.5 !h-3.5 !mx-0" :class="colors[option.value] || '!text-gray-500'" />
           <NcTooltip
             :style="{ wordBreak: 'keep-all', whiteSpace: 'nowrap', display: 'inline' }"
             class="max-w-[15rem] truncate select-none"

packages/nc-gui/windi.config.ts

@@ -22,7 +22,17 @@ export default defineConfig({
   },
 
   darkMode: 'class',
-  safelist: ['text-yellow-500', 'text-sky-500', 'text-red-500', 'bg-primary-selected'],
+  safelist: [
+    'text-yellow-500',
+    'text-sky-500',
+    'text-red-500',
+    'bg-primary-selected',
+    'text-pink-500',
+    'text-orange-500',
+    'text-blue-500',
+    'text-purple-500',
+    'text-grey',
+  ],
   plugins: [
     scrollbar,
     animations,