github
/
nocodb
mirror of https://github.com/nocodb/nocodb
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

feat: update Links icons

pull/6552/head
DarkPhoenix2704 1 year ago
parent
bd9ec7193c
commit
de3b847e63
6 changed files with 69 additions and 18 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

16
packages/nc-gui/assets/nc-icons/hm-solid.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

10
packages/nc-gui/assets/nc-icons/mm-solid.svg
Unescape View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

18
packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts
Unescape View File

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

11
packages/nc-gui/components/virtual-cell/components/Header.vue
Unescape View File

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

16
packages/nc-gui/utils/iconUtils.ts
Unescape View File

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

Write Preview
Loading…
Cancel
Save