Merge pull request #6552 from nocodb/nc-fix/ui-misc

feat: update Links icons

packages/nc-gui/assets/nc-icons/bt-solid.svg

@@ -0,0 +1,16 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_27)">
+<path d="M13 10C11.8954 10 11 9.10457 11 8C11 6.89543 11.8954 6 13 6C14.1046 6 15 6.89543 15 8C15 9.10457 14.1046 10 13 10Z" stroke="#36BFFF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M3 10C1.89543 10 1 9.10457 1 8C1 6.89543 1.89543 6 3 6C4.10457 6 5 6.89543 5 8C5 9.10457 4.10457 10 3 10Z" stroke="#36BFFF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 15C5.89543 15 5 14.1046 5 13C5 11.8954 5.89543 11 7 11C8.10457 11 9 11.8954 9 13C9 14.1046 8.10457 15 7 15Z" stroke="#36BFFF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 5C5.89543 5 5 4.10457 5 3C5 1.89543 5.89543 1 7 1C8.10457 1 9 1.89543 9 3C9 4.10457 8.10457 5 7 5Z" stroke="#36BFFF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 8L11 8" stroke="#36BFFF" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 4L11 6" stroke="#36BFFF" stroke-width="1.33333" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M9 12L11 10" stroke="#36BFFF" stroke-width="1.33333" stroke-linecap="square" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1_27">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/nc-gui/assets/nc-icons/hm-solid.svg

@@ -0,0 +1,16 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1_19)">
+<path d="M3 10C4.10457 10 5 9.10457 5 8C5 6.89543 4.10457 6 3 6C1.89543 6 1 6.89543 1 8C1 9.10457 1.89543 10 3 10Z" stroke="#FA8231" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13 10C14.1046 10 15 9.10457 15 8C15 6.89543 14.1046 6 13 6C11.8954 6 11 6.89543 11 8C11 9.10457 11.8954 10 13 10Z" stroke="#FA8231" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 15C10.1046 15 11 14.1046 11 13C11 11.8954 10.1046 11 9 11C7.89543 11 7 11.8954 7 13C7 14.1046 7.89543 15 9 15Z" stroke="#FA8231" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9 5C10.1046 5 11 4.10457 11 3C11 1.89543 10.1046 1 9 1C7.89543 1 7 1.89543 7 3C7 4.10457 7.89543 5 9 5Z" stroke="#FA8231" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11 8L5 8" stroke="#FA8231" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 4L5 6" stroke="#FA8231" stroke-width="1.33333" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M7 12L5 10" stroke="#FA8231" stroke-width="1.33333" stroke-linecap="square" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_1_19">
+<rect width="16" height="16" fill="white"/>
+</clipPath>
+</defs>
+</svg>

packages/nc-gui/assets/nc-icons/mm-solid.svg

@@ -0,0 +1,10 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 6C10.8954 6 10 5.10457 10 4C10 2.89543 10.8954 2 12 2C13.1046 2 14 2.89543 14 4C14 5.10457 13.1046 6 12 6Z" stroke="#FC3AC6" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 14C10.8954 14 10 13.1046 10 12C10 10.8954 10.8954 10 12 10C13.1046 10 14 10.8954 14 12C14 13.1046 13.1046 14 12 14Z" stroke="#FC3AC6" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 14C2.89543 14 2 13.1046 2 12C2 10.8954 2.89543 10 4 10C5.10457 10 6 10.8954 6 12C6 13.1046 5.10457 14 4 14Z" stroke="#FC3AC6" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4 6C2.89543 6 2 5.10457 2 4C2 2.89543 2.89543 2 4 2C5.10457 2 6 2.89543 6 4C6 5.10457 5.10457 6 4 6Z" stroke="#FC3AC6" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.5 10.5L10.5 5.5" stroke="#FC3AC6" stroke-width="1.33333" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M5.5 5.5L10.5 10.5" stroke="#FC3AC6" stroke-width="1.33333" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M6 4L10 4" stroke="#FC3AC6" stroke-width="1.33333" stroke-linecap="square" stroke-linejoin="round"/>
+<path d="M6 12L10 12" stroke="#FC3AC6" stroke-width="1.33333" stroke-linecap="square" stroke-linejoin="round"/>
+</svg>

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

@@ -25,11 +25,11 @@ const renderIcon = (column: ColumnType, relationColumn?: ColumnType) => {
     case UITypes.Links:
       switch ((column.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
-          return { icon: iconMap.mm, color: 'text-accent' }
+          return { icon: iconMap.mm_solid }
         case RelationTypes.HAS_MANY:
-          return { icon: iconMap.hm, color: 'text-yellow-500' }
+          return { icon: iconMap.hm_solid }
         case RelationTypes.BELONGS_TO:
-          return { icon: iconMap.bt, color: 'text-sky-500' }
+          return { icon: iconMap.bt_solid }
       }
       break
     case UITypes.SpecificDBType:
@@ -43,21 +43,21 @@ const renderIcon = (column: ColumnType, relationColumn?: ColumnType) => {
     case UITypes.Lookup:
       switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
-          return { icon: iconMap.lookup, color: 'text-accent' }
+          return { icon: iconMap.lookup, color: 'text-pink-500' }
         case RelationTypes.HAS_MANY:
-          return { icon: iconMap.lookup, color: 'text-yellow-500' }
+          return { icon: iconMap.lookup, color: 'text-orange-500' }
         case RelationTypes.BELONGS_TO:
-          return { icon: iconMap.lookup, color: 'text-sky-500' }
+          return { icon: iconMap.lookup, color: 'text-blue-500' }
       }
       return { icon: iconMap.lookup, color: 'text-grey' }
     case UITypes.Rollup:
       switch ((relationColumn?.colOptions as LinkToAnotherRecordType)?.type) {
         case RelationTypes.MANY_TO_MANY:
-          return { icon: iconMap.rollup, color: 'text-accent' }
+          return { icon: iconMap.rollup, color: 'text-pink-500' }
         case RelationTypes.HAS_MANY:
-          return { icon: iconMap.rollup, color: 'text-yellow-500' }
+          return { icon: iconMap.rollup, color: 'text-orange-500' }
         case RelationTypes.BELONGS_TO:
-          return { icon: iconMap.rollup, color: 'text-sky-500' }
+          return { icon: iconMap.rollup, color: 'text-blue-500' }
       }
       return { icon: iconMap.rollup, color: 'text-grey' }
     case UITypes.Count:

packages/nc-gui/components/virtual-cell/components/Header.vue

@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-import HasManyIcon from '~icons/nc-icons/hasmany'
-import ManytoManyIcon from '~icons/nc-icons/manytomany'
 import OnetoOneIcon from '~icons/nc-icons/onetoone'
-import BelongsToIcon from '~icons/nc-icons/belongsto'
 import InfoIcon from '~icons/nc-icons/info'
 import FileIcon from '~icons/nc-icons/file'
 
+import { iconMap } from '#imports'
+
 const { relation, relatedTableTitle, displayValue, showHeader, tableTitle } = defineProps<{
   relation: string
   showHeader?: boolean
@@ -20,14 +19,14 @@ const relationMeta = computed(() => {
   if (relation === 'hm') {
     return {
       title: t('msg.hm.title'),
-      icon: HasManyIcon,
+      icon: iconMap.hm,
       tooltip_desc: t('msg.hm.tooltip_desc'),
       tooltip_desc2: t('msg.hm.tooltip_desc2'),
     }
   } else if (relation === 'mm') {
     return {
       title: t('msg.mm.title'),
-      icon: ManytoManyIcon,
+      icon: iconMap.mm,
 
       tooltip_desc: t('msg.mm.tooltip_desc'),
       tooltip_desc2: t('msg.mm.tooltip_desc2'),
@@ -35,7 +34,7 @@ const relationMeta = computed(() => {
   } else if (relation === 'bt') {
     return {
       title: t('msg.bt.title'),
-      icon: BelongsToIcon,
+      icon: iconMap.bt,
       tooltip_desc: t('msg.bt.tooltip_desc'),
       tooltip_desc2: t('msg.bt.tooltip_desc2'),
     }

packages/nc-gui/utils/iconUtils.ts

@@ -89,6 +89,13 @@ import MdiCommentAccountOutline from '~icons/mdi/comment-account-outline'
 import MaterialSymbolsPersonSearchOutline from '~icons/material-symbols/person-search-outline'
 import MaterialSymbolsBlock from '~icons/material-symbols/block'
 
+import HasManyIcon from '~icons/nc-icons/hasmany'
+import ManytoManyIcon from '~icons/nc-icons/manytomany'
+import BelongsToIcon from '~icons/nc-icons/belongsto'
+import HasManySolidIcon from '~icons/nc-icons/hm-solid'
+import ManytoManySolidIcon from '~icons/nc-icons/mm-solid'
+import BelongsToSolidIcon from '~icons/nc-icons/bt-solid'
+
 // keep it for reference
 // todo: remove it after all icons are migrated
 /* export const iconMapOld = {
@@ -237,6 +244,12 @@ import MaterialSymbolsBlock from '~icons/material-symbols/block'
 } as const */
 
 export const iconMap = {
+  mm: ManytoManyIcon,
+  hm: HasManyIcon,
+  bt: BelongsToIcon,
+  mm_solid: ManytoManySolidIcon,
+  hm_solid: HasManySolidIcon,
+  bt_solid: BelongsToSolidIcon,
   workspaceDefault: MsGroup,
   search: NcSearch,
   error: h('span', { class: 'material-symbols' }, 'error'),
@@ -393,9 +406,6 @@ export const iconMap = {
   closeBox: h('span', { class: 'material-symbols' }, 'close'),
   close: MSCloseRounded,
   openInNew: h('span', { class: 'material-symbols' }, 'open_in_new'),
-  mm: h('span', { class: 'material-symbols' }, 'table_rows'),
-  hm: h('span', { class: 'material-symbols' }, 'table_rows'),
-  bt: h('span', { class: 'material-symbols' }, 'subdirectory_arrow_right'),
   passwordChange: h('span', { class: 'material-symbols' }, 'vpn_key'),
   mapMarker: h('span', { class: 'material-symbols' }, 'room'),
   currentLocation: h('span', { class: 'material-symbols' }, 'my_location'),