Browse Source

feat: update Links icons

pull/6552/head
DarkPhoenix2704 1 year ago
parent
commit
de3b847e63
  1. 16
      packages/nc-gui/assets/nc-icons/bt-solid.svg
  2. 16
      packages/nc-gui/assets/nc-icons/hm-solid.svg
  3. 10
      packages/nc-gui/assets/nc-icons/mm-solid.svg
  4. 18
      packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts
  5. 11
      packages/nc-gui/components/virtual-cell/components/Header.vue
  6. 16
      packages/nc-gui/utils/iconUtils.ts

16
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>

After

Width:  |  Height:  |  Size: 1.4 KiB

16
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>

After

Width:  |  Height:  |  Size: 1.4 KiB

10
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>

After

Width:  |  Height:  |  Size: 1.4 KiB

18
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:

11
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'),
}

16
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'),

Loading…
Cancel
Save