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

refactor: update virtual cell icons 

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/5343/head
Pranav C 2 years ago
parent
86f51736d8
commit
2ad02fdea6
4 changed files with 49 additions and 42 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. 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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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 => {

Write Preview
Loading…
Cancel
Save