Browse Source

refactor: update virtual cell icons

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/5343/head
Pranav C 2 years ago
parent
commit
2ad02fdea6
  1. 20
      packages/nc-gui/components/dashboard/settings/DataSources.vue
  2. 43
      packages/nc-gui/components/smartsheet/header/VirtualCellIcon.ts
  3. 3
      packages/nc-gui/utils/columnUtils.ts
  4. 25
      packages/nc-gui/utils/iconUtils.ts

20
packages/nc-gui/components/dashboard/settings/DataSources.vue

@ -255,9 +255,9 @@ watch(
<div class="flex items-center gap-2 text-gray-600 font-light"> <div class="flex items-center gap-2 text-gray-600 font-light">
<a-tooltip v-if="metadiffbases.includes(sources[0].id)"> <a-tooltip v-if="metadiffbases.includes(sources[0].id)">
<template #title>Out of sync</template> <template #title>Out of sync</template>
<MdiDatabaseAlert class="text-lg group-hover:text-accent text-primary" /> <component :is="iconMap.warning" class="text-lg group-hover:text-accent text-primary" />
</a-tooltip> </a-tooltip>
<MdiDatabaseSync v-else class="text-lg group-hover:text-accent" /> <component :is="iconMap.sync" v-else class="text-lg group-hover:text-accent" />
Sync Metadata Sync Metadata
</div> </div>
</a-button> </a-button>
@ -266,7 +266,7 @@ watch(
@click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)" @click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)"
> >
<div class="flex items-center gap-2 text-gray-600 font-light"> <div class="flex items-center gap-2 text-gray-600 font-light">
<MdiDatabaseLockOutline class="text-lg group-hover:text-accent" /> <component :is="iconMap.acl" class="text-lg group-hover:text-accent" />
UI ACL UI ACL
</div> </div>
</a-button> </a-button>
@ -275,7 +275,7 @@ watch(
@click="baseAction(sources[0].id, DataSourcesSubTab.ERD)" @click="baseAction(sources[0].id, DataSourcesSubTab.ERD)"
> >
<div class="flex items-center gap-2 text-gray-600 font-light"> <div class="flex items-center gap-2 text-gray-600 font-light">
<MdiGraphOutline class="text-lg group-hover:text-accent" /> <component :is="iconMap.erd" class="text-lg group-hover:text-accent" />
ERD ERD
</div> </div>
</a-button> </a-button>
@ -285,7 +285,7 @@ watch(
@click="baseAction(sources[0].id, DataSourcesSubTab.Edit)" @click="baseAction(sources[0].id, DataSourcesSubTab.Edit)"
> >
<div class="flex items-center gap-2 text-gray-600 font-light"> <div class="flex items-center gap-2 text-gray-600 font-light">
<MdiEditOutline class="text-lg group-hover:text-accent" /> <component :is="iconMap.edit" class="text-lg group-hover:text-accent" />
Edit Edit
</div> </div>
</a-button> </a-button>
@ -324,9 +324,9 @@ watch(
<div class="flex items-center gap-2 text-gray-600 font-light"> <div class="flex items-center gap-2 text-gray-600 font-light">
<a-tooltip v-if="metadiffbases.includes(base.id)"> <a-tooltip v-if="metadiffbases.includes(base.id)">
<template #title>Out of sync</template> <template #title>Out of sync</template>
<MdiDatabaseAlert class="text-lg group-hover:text-accent text-primary" /> <component :is="iconMap.warning" class="text-lg group-hover:text-accent text-primary" />
</a-tooltip> </a-tooltip>
<MdiDatabaseSync v-else class="text-lg group-hover:text-accent" /> <component :is="iconMap.sync" v-else class="text-lg group-hover:text-accent" />
Sync Metadata Sync Metadata
</div> </div>
</a-button> </a-button>
@ -335,13 +335,13 @@ watch(
@click="baseAction(base.id, DataSourcesSubTab.UIAcl)" @click="baseAction(base.id, DataSourcesSubTab.UIAcl)"
> >
<div class="flex items-center gap-2 text-gray-600 font-light"> <div class="flex items-center gap-2 text-gray-600 font-light">
<MdiDatabaseLockOutline class="text-lg group-hover:text-accent" /> <component :is="iconMap.acl" class="text-lg group-hover:text-accent" />
UI ACL UI ACL
</div> </div>
</a-button> </a-button>
<a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(base.id, DataSourcesSubTab.ERD)"> <a-button class="nc-action-btn cursor-pointer outline-0" @click="baseAction(base.id, DataSourcesSubTab.ERD)">
<div class="flex items-center gap-2 text-gray-600 font-light"> <div class="flex items-center gap-2 text-gray-600 font-light">
<MdiGraphOutline class="text-lg group-hover:text-accent" /> <component :is="iconMap.erd" class="text-lg group-hover:text-accent" />
ERD ERD
</div> </div>
</a-button> </a-button>
@ -351,7 +351,7 @@ watch(
@click="baseAction(base.id, DataSourcesSubTab.Edit)" @click="baseAction(base.id, DataSourcesSubTab.Edit)"
> >
<div class="flex items-center gap-2 text-gray-600 font-light"> <div class="flex items-center gap-2 text-gray-600 font-light">
<MdiEditOutline class="text-lg group-hover:text-accent" /> <component :is="iconMap.edit" class="text-lg group-hover:text-accent" />
Edit Edit
</div> </div>
</a-button> </a-button>

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

@ -3,63 +3,54 @@ import type { ColumnType, LinkToAnotherRecordType, LookupType, RollupType } from
import type { Ref } from 'vue' import type { Ref } from 'vue'
import { RelationTypes, UITypes } from 'nocodb-sdk' import { RelationTypes, UITypes } from 'nocodb-sdk'
import { ColumnInj, MetaInj, defineComponent, h, inject, isBt, isHm, isLookup, isMm, isRollup, ref, toRef } from '#imports' import { ColumnInj, MetaInj, defineComponent, h, inject, isBt, isHm, isLookup, isMm, isRollup, ref, toRef } from '#imports'
import GenericIcon from '~icons/mdi/square-rounded' import { iconMap } from '~/utils'
import HMIcon from '~icons/mdi/table-arrow-right'
import BTIcon from '~icons/mdi/table-arrow-left'
import MMIcon from '~icons/mdi/table-network'
import FormulaIcon from '~icons/mdi/math-integral'
import QrCodeScan from '~icons/mdi/qrcode-scan'
import BarcodeScan from '~icons/mdi/barcode-scan'
import RollupIcon from '~icons/mdi/movie-roll'
import CountIcon from '~icons/mdi/counter' import CountIcon from '~icons/mdi/counter'
import SpecificDBTypeIcon from '~icons/mdi/database-settings'
import MdiTextSearchVariant from '~icons/mdi/text-search-variant'
const renderIcon = (column: ColumnType, relationColumn?: ColumnType) => { const renderIcon = (column: ColumnType, relationColumn?: ColumnType) => {
switch (column.uidt) { switch (column.uidt) {
case UITypes.LinkToAnotherRecord: case UITypes.LinkToAnotherRecord:
switch ((column.colOptions as LinkToAnotherRecordType)?.type) { switch ((column.colOptions as LinkToAnotherRecordType)?.type) {
case RelationTypes.MANY_TO_MANY: case RelationTypes.MANY_TO_MANY:
return { icon: MMIcon, color: 'text-accent' } return { icon: iconMap.mm, color: 'text-accent' }
case RelationTypes.HAS_MANY: case RelationTypes.HAS_MANY:
return { icon: HMIcon, color: 'text-yellow-500' } return { icon: iconMap.hm, color: 'text-yellow-500' }
case RelationTypes.BELONGS_TO: case RelationTypes.BELONGS_TO:
return { icon: BTIcon, color: 'text-sky-500' } return { icon: iconMap.bt, color: 'text-sky-500' }
} }
break break
case UITypes.SpecificDBType: case UITypes.SpecificDBType:
return { icon: SpecificDBTypeIcon, color: 'text-grey' } return { icon: iconMap['specific-db-type'], color: 'text-grey' }
case UITypes.Formula: case UITypes.Formula:
return { icon: FormulaIcon, color: 'text-grey' } return { icon: iconMap.formula, color: 'text-grey' }
case UITypes.QrCode: case UITypes.QrCode:
return { icon: QrCodeScan, color: 'text-grey' } return { icon: iconMap['qr-code'], color: 'text-grey' }
case UITypes.Barcode: case UITypes.Barcode:
return { icon: BarcodeScan, color: 'text-grey' } return { icon: iconMap['qr-code'], color: 'text-grey' }
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: MdiTextSearchVariant, color: 'text-accent' } return { icon: iconMap.lookup, color: 'text-accent' }
case RelationTypes.HAS_MANY: case RelationTypes.HAS_MANY:
return { icon: MdiTextSearchVariant, color: 'text-yellow-500' } return { icon: iconMap.lookup, color: 'text-yellow-500' }
case RelationTypes.BELONGS_TO: case RelationTypes.BELONGS_TO:
return { icon: MdiTextSearchVariant, color: 'text-sky-500' } return { icon: iconMap.lookup, color: 'text-sky-500' }
} }
return { icon: MdiTextSearchVariant, 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: RollupIcon, color: 'text-accent' } return { icon: iconMap, color: 'text-accent' }
case RelationTypes.HAS_MANY: case RelationTypes.HAS_MANY:
return { icon: RollupIcon, color: 'text-yellow-500' } return { icon: iconMap, color: 'text-yellow-500' }
case RelationTypes.BELONGS_TO: case RelationTypes.BELONGS_TO:
return { icon: RollupIcon, color: 'text-sky-500' } return { icon: iconMap, color: 'text-sky-500' }
} }
return { icon: RollupIcon, color: 'text-grey' } return { icon: iconMap, color: 'text-grey' }
case UITypes.Count: case UITypes.Count:
return { icon: CountIcon, color: 'text-grey' } return { icon: CountIcon, color: 'text-grey' }
} }
return { icon: GenericIcon, color: 'text-grey' } return { icon: iconMap.generic, color: 'text-grey' }
} }
export default defineComponent({ export default defineComponent({

3
packages/nc-gui/utils/columnUtils.ts

@ -2,7 +2,6 @@ import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
import { RelationTypes, UITypes } from 'nocodb-sdk' import { RelationTypes, UITypes } from 'nocodb-sdk'
import { iconMap } from '~/utils/iconUtils' import { iconMap } from '~/utils/iconUtils'
import LinkVariant from '~icons/mdi/link-variant' import LinkVariant from '~icons/mdi/link-variant'
import MovieRoll from '~icons/mdi/movie-roll'
import ID from '~icons/mdi/identifier' import ID from '~icons/mdi/identifier'
const uiTypes = [ const uiTypes = [
@ -95,7 +94,7 @@ const uiTypes = [
}, },
{ {
name: UITypes.Rollup, name: UITypes.Rollup,
icon: MovieRoll, icon: iconMap.rollup,
virtual: 1, virtual: 1,
}, },
{ {

25
packages/nc-gui/utils/iconUtils.ts

@ -23,7 +23,7 @@ import PhUsersThreeThin from '~icons/ph/users-three-thin'
import PhDownloadThin from '~icons/ph/arrow-line-down-thin' import PhDownloadThin from '~icons/ph/arrow-line-down-thin'
import PhUploadThin from '~icons/ph/arrow-line-up-thin' import PhUploadThin from '~icons/ph/arrow-line-up-thin'
import PhHookThin from '~icons/ph/anchor-thin' import PhHookThin from '~icons/ph/anchor-thin'
import PhFlowThin from '~icons/ph/flow-arrow-thin' import PhTreeThin from '~icons/ph/tree-structure-thin'
import PhPlusThin from '~icons/ph/plus-thin' import PhPlusThin from '~icons/ph/plus-thin'
import PhSearchThin from '~icons/ph/magnifying-glass-thin' import PhSearchThin from '~icons/ph/magnifying-glass-thin'
import PhCopySimpleThin from '~icons/ph/copy-simple-thin' import PhCopySimpleThin from '~icons/ph/copy-simple-thin'
@ -62,13 +62,21 @@ import PercentIcon from '~icons/ph/percent-thin'
import DecimalIcon from '~icons/mdi/decimal' import DecimalIcon from '~icons/mdi/decimal'
import SpecificDBTypeIcon from '~icons/ph/database-thin' import SpecificDBTypeIcon from '~icons/ph/database-thin'
import DurationIcon from '~icons/ph/clock-clockwise-thin' import DurationIcon from '~icons/ph/clock-clockwise-thin'
import PhFunctionDuotone from '~icons/ph/function-duotone' import PhFunctiontone from '~icons/ph/function-thin'
import PhQrCodeThin from '~icons/ph/qr-code-thin' import PhQrCodeThin from '~icons/ph/qr-code-thin'
import PhBarcodeThin from '~icons/ph/barcode-thin' import PhBarcodeThin from '~icons/ph/barcode-thin'
import PhCalculatorThin from '~icons/ph/calculator-thin' import PhCalculatorThin from '~icons/ph/calculator-thin'
import PhEyeSlashThin from '~icons/ph/eye-slash-thin' import PhEyeSlashThin from '~icons/ph/eye-slash-thin'
import PhEyeThin from '~icons/ph/eye-thin' import PhEyeThin from '~icons/ph/eye-thin'
import PhExpandThin from '~icons/ph/arrows-out-simple-thin' import PhExpandThin from '~icons/ph/arrows-out-simple-thin'
import PhLifebuoyThin from '~icons/ph/lifebuoy-thin'
import PhCheckThin from '~icons/ph/check-thin'
import PhFolderLockThin from '~icons/ph/folder-simple-lock-thin'
import MdiDatabaseSync from '~icons/mdi/database-sync'
import PhWarningThin from '~icons/ph/warning-thin'
import HMIcon from '~icons/mdi/table-arrow-right'
import BTIcon from '~icons/mdi/table-arrow-left'
import MMIcon from '~icons/mdi/table-network'
export const iconMap = { export const iconMap = {
'mdi-check-bold': MdiCheckBold, 'mdi-check-bold': MdiCheckBold,
@ -95,7 +103,7 @@ export const iconMap = {
'download': PhDownloadThin, 'download': PhDownloadThin,
'upload': PhUploadThin, 'upload': PhUploadThin,
'hook': PhHookThin, 'hook': PhHookThin,
'erd': PhFlowThin, 'erd': PhTreeThin,
'plus': PhPlusThin, 'plus': PhPlusThin,
'search': PhSearchThin, 'search': PhSearchThin,
'copy': PhCopySimpleThin, 'copy': PhCopySimpleThin,
@ -134,15 +142,24 @@ export const iconMap = {
'specific-db-type': SpecificDBTypeIcon, 'specific-db-type': SpecificDBTypeIcon,
'duration': DurationIcon, 'duration': DurationIcon,
'file-phone': FilePhoneIcon, 'file-phone': FilePhoneIcon,
'formula': PhFunctionDuotone, 'formula': PhFunctiontone,
'key': KeyIcon, 'key': KeyIcon,
'json': PhBracketsCurlyThin, 'json': PhBracketsCurlyThin,
'qr-code': PhQrCodeThin, 'qr-code': PhQrCodeThin,
'bar-code': PhBarcodeThin, 'bar-code': PhBarcodeThin,
'calculator': PhCalculatorThin, 'calculator': PhCalculatorThin,
'rollup': PhLifebuoyThin,
'eye': PhEyeThin, 'eye': PhEyeThin,
'eye-slash': PhEyeSlashThin, 'eye-slash': PhEyeSlashThin,
'expand': PhExpandThin, 'expand': PhExpandThin,
'check': PhCheckThin,
'acl': PhFolderLockThin,
'sync': MdiDatabaseSync,
'warning': PhWarningThin,
'mm': MMIcon,
'hm': HMIcon,
'bt': BTIcon,
} as const } as const
export const getMdiIcon = (type: string): any => { export const getMdiIcon = (type: string): any => {

Loading…
Cancel
Save