Browse Source

fix: update missing icons

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/5343/head
Pranav C 2 years ago
parent
commit
0fa096defb
  1. 4
      packages/nc-gui/assets/style/fonts.css
  2. 34
      packages/nc-gui/components/dashboard/TreeView.vue
  3. 26
      packages/nc-gui/components/dashboard/settings/DataSources.vue
  4. 2
      packages/nc-gui/components/general/Icon.vue
  5. 8
      packages/nc-gui/components/smartsheet/header/Menu.vue
  6. 5
      packages/nc-gui/components/smartsheet/toolbar/LockType.vue
  7. 2
      packages/nc-gui/components/virtual-cell/BelongsTo.vue
  8. 2
      packages/nc-gui/components/virtual-cell/HasMany.vue
  9. 3
      packages/nc-gui/components/virtual-cell/ManyToMany.vue
  10. 2
      packages/nc-gui/nuxt.config.ts
  11. 2
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue
  12. 4
      packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
  13. 149
      packages/nc-gui/utils/iconUtils.ts
  14. 1
      packages/nc-gui/utils/viewUtils.ts

4
packages/nc-gui/assets/style/fonts.css

@ -188,6 +188,6 @@
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
font-size: 20px !important;
font-size: 22px !important;
user-select: none;
}

34
packages/nc-gui/components/dashboard/TreeView.vue

@ -372,13 +372,13 @@ const setIcon = async (icon: string, table: TableType) => {
</Transition>
<Transition name="layout" mode="out-in">
<component
:is="iconMap.close"
<GeneralIcon
v-if="searchActive"
icon="close"
class="text-gray-500 text-lg mx-1 mt-0.5"
@click="onSearchCloseIconClick"
/>
<component :is="iconMap.search" v-else class="text-gray-500 text-lg mx-1 mt-0.5" @click="toggleSearchActive(true)" />
<GeneralIcon v-else icon="search" class="text-gray-500 text-lg mx-1 mt-0.5" @click="toggleSearchActive(true)" />
</Transition>
</div>
<div
@ -404,9 +404,9 @@ const setIcon = async (icon: string, table: TableType) => {
</Transition>
<Transition name="slide-right" mode="out-in">
<component
:is="iconMap.close"
<GeneralIcon
v-if="searchActive"
icon="close"
class="text-gray-500 text-lg mx-1 mt-0.5"
@click="onSearchCloseIconClick"
/>
@ -415,7 +415,7 @@ const setIcon = async (icon: string, table: TableType) => {
<a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
<Transition name="slide-right" mode="out-in">
<component :is="iconMap.threeDotVertical" v-if="!searchActive" class="hover:text-accent outline-0" />
<GeneralIcon v-if="!searchActive" icon="threeDotVertical" class="hover:text-accent outline-0" />
</Transition>
<template #overlay>
@ -466,7 +466,7 @@ const setIcon = async (icon: string, table: TableType) => {
target="_blank"
class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
>
<component :is="iconMap.openInNew" class="group-hover:text-accent" />
<GeneralIcon icon="openInNew" class="group-hover:text-accent" />
<!-- Request a data source you need? -->
{{ $t('labels.requestDataSource') }}
</a>
@ -482,13 +482,13 @@ const setIcon = async (icon: string, table: TableType) => {
class="group flex items-center gap-2 pl-2 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none"
@click="openTableCreateDialog(bases[0].id)"
>
<component :is="iconMap.plus" class="w-5" />
<GeneralIcon icon="plus" class="w-5" />
<span class="text-gray-500 group-hover:(text-primary/100) flex-1 nc-add-new-table">{{ $t('tooltip.addTable') }}</span>
<a-dropdown v-if="!isSharedBase" :trigger="['click']" overlay-class-name="nc-dropdown-import-menu" @click.stop>
<component
:is="iconMap.threeDotVertical"
<GeneralIcon
icon="threeDotVertical"
class="transition-opacity opacity-0 group-hover:opacity-100 nc-import-menu outline-0"
/>
@ -502,7 +502,7 @@ const setIcon = async (icon: string, table: TableType) => {
@click="openAirtableImportDialog(bases[0].id)"
>
<div class="color-transition nc-project-menu-item group">
<component :is="iconMap.table" class="group-hover:text-accent" />
<GeneralIcon icon="table" class="group-hover:text-accent" />
Airtable
</div>
</a-menu-item>
@ -513,7 +513,7 @@ const setIcon = async (icon: string, table: TableType) => {
@click="openQuickImportDialog('csv', bases[0].id)"
>
<div class="color-transition nc-project-menu-item group">
<component :is="iconMap.csv" class="group-hover:text-accent" />
<GeneralIcon icon="csv" class="group-hover:text-accent" />
CSV file
</div>
</a-menu-item>
@ -524,7 +524,7 @@ const setIcon = async (icon: string, table: TableType) => {
@click="openQuickImportDialog('json', bases[0].id)"
>
<div class="color-transition nc-project-menu-item group">
<component :is="iconMap.code" class="group-hover:text-accent" />
<GeneralIcon icon="code" class="group-hover:text-accent" />
JSON file
</div>
</a-menu-item>
@ -535,7 +535,7 @@ const setIcon = async (icon: string, table: TableType) => {
@click="openQuickImportDialog('excel', bases[0].id)"
>
<div class="color-transition nc-project-menu-item group">
<component :is="iconMap.excel" class="group-hover:text-accent" />
<GeneralIcon icon="excel" class="group-hover:text-accent" />
Microsoft Excel
</div>
</a-menu-item>
@ -589,7 +589,7 @@ const setIcon = async (icon: string, table: TableType) => {
target="_blank"
class="prose-sm hover:(!text-primary !opacity-100) color-transition nc-project-menu-item group after:(!rounded-b)"
>
<component :is="iconMap.openInNew" class="group-hover:text-accent" />
<GeneralIcon icon="openInNew" class="group-hover:text-accent" />
<!-- Request a data source you need? -->
{{ $t('labels.requestDataSource') }}
</a>
@ -670,8 +670,8 @@ const setIcon = async (icon: string, table: TableType) => {
:trigger="['click']"
@click.stop
>
<component
:is="iconMap.threeDotVertical"
<GeneralIcon
icon="threeDotVertical"
class="transition-opacity opacity-0 group-hover:opacity-100 outline-0"
/>

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

@ -7,7 +7,7 @@ import Metadata from './Metadata.vue'
import UIAcl from './UIAcl.vue'
import Erd from './Erd.vue'
import { ClientType, DataSourcesSubTab } from '~/lib'
import { iconMap, storeToRefs, useNuxtApp, useProject } from '#imports'
import { storeToRefs, useNuxtApp, useProject } from '#imports'
interface Props {
state: string
@ -255,9 +255,9 @@ watch(
<div class="flex items-center gap-2 text-gray-600 font-light">
<a-tooltip v-if="metadiffbases.includes(sources[0].id)">
<template #title>Out of sync</template>
<component :is="iconMap.warning" class="text-lg group-hover:text-accent text-primary" />
<GeneralIcon icon="warning" class="group-hover:text-accent text-primary" />
</a-tooltip>
<component :is="iconMap.sync" v-else class="text-lg group-hover:text-accent" />
<GeneralIcon v-else icon="sync" class="group-hover:text-accent" />
Sync Metadata
</div>
</a-button>
@ -266,7 +266,7 @@ watch(
@click="baseAction(sources[0].id, DataSourcesSubTab.UIAcl)"
>
<div class="flex items-center gap-2 text-gray-600 font-light">
<component :is="iconMap.acl" class="text-lg group-hover:text-accent" />
<GeneralIcon icon="acl" class="group-hover:text-accent" />
UI ACL
</div>
</a-button>
@ -275,7 +275,7 @@ watch(
@click="baseAction(sources[0].id, DataSourcesSubTab.ERD)"
>
<div class="flex items-center gap-2 text-gray-600 font-light">
<component :is="iconMap.erd" class="text-lg group-hover:text-accent" />
<GeneralIcon icon="erd" class="group-hover:text-accent" />
ERD
</div>
</a-button>
@ -285,7 +285,7 @@ watch(
@click="baseAction(sources[0].id, DataSourcesSubTab.Edit)"
>
<div class="flex items-center gap-2 text-gray-600 font-light">
<component :is="iconMap.edit" class="text-lg group-hover:text-accent" />
<GeneralIcon icon="edit" class="group-hover:text-accent" />
Edit
</div>
</a-button>
@ -308,7 +308,7 @@ watch(
<template #item="{ element: base, index }">
<div v-if="index !== 0" class="ds-table-row border-gray-200">
<div class="ds-table-col ds-table-name">
<component :is="iconMap.dragVertical" v-if="sources.length > 2" small class="ds-table-handle" />
<GeneralIcon v-if="sources.length > 2" icon="dragVertical" small class="ds-table-handle" />
<div class="flex items-center gap-1">
<GeneralBaseLogo :base-type="base.type" />
{{ base.is_meta ? 'BASE' : base.alias }} <span class="text-gray-400 text-xs">({{ base.type }})</span>
@ -324,9 +324,9 @@ watch(
<div class="flex items-center gap-2 text-gray-600 font-light">
<a-tooltip v-if="metadiffbases.includes(base.id)">
<template #title>Out of sync</template>
<component :is="iconMap.warning" class="text-lg group-hover:text-accent text-primary" />
<GeneralIcon icon="warning" class="group-hover:text-accent text-primary" />
</a-tooltip>
<component :is="iconMap.sync" v-else class="text-lg group-hover:text-accent" />
<GeneralIcon v-else icon="sync" class="group-hover:text-accent" />
Sync Metadata
</div>
</a-button>
@ -335,13 +335,13 @@ watch(
@click="baseAction(base.id, DataSourcesSubTab.UIAcl)"
>
<div class="flex items-center gap-2 text-gray-600 font-light">
<component :is="iconMap.acl" class="text-lg group-hover:text-accent" />
<GeneralIcon icon="acl" class="group-hover:text-accent" />
UI ACL
</div>
</a-button>
<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">
<component :is="iconMap.erd" class="text-lg group-hover:text-accent" />
<GeneralIcon icon="erd" class="group-hover:text-accent" />
ERD
</div>
</a-button>
@ -351,13 +351,13 @@ watch(
@click="baseAction(base.id, DataSourcesSubTab.Edit)"
>
<div class="flex items-center gap-2 text-gray-600 font-light">
<component :is="iconMap.edit" class="text-lg group-hover:text-accent" />
<GeneralIcon icon="edit" class="group-hover:text-accent" />
Edit
</div>
</a-button>
<a-button v-if="!base.is_meta" class="nc-action-btn cursor-pointer outline-0" @click="deleteBase(base)">
<div class="flex items-center gap-2 text-red-500 font-light">
<component :is="iconMap.delete" class="text-lg group-hover:text-accent" />
<GeneralIcon icon="delete" class="group-hover:text-accent" />
Delete
</div>
</a-button>

2
packages/nc-gui/components/general/Icon.vue

@ -7,5 +7,5 @@ const props = defineProps<{
</script>
<template>
<component :is="iconMap[props.icon]"/>
<component :is="iconMap[props.icon]" />
</template>

8
packages/nc-gui/components/smartsheet/header/Menu.vue

@ -214,11 +214,7 @@ const hideField = async () => {
<template>
<a-dropdown v-if="!isLocked" placement="bottomRight" :trigger="['click']" overlay-class-name="nc-dropdown-column-operations">
<component
:is="iconMap.arrowDown"
class="text-grey !text-0.5rem h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0 mr-2"
/>
<div><GeneralIcon icon="arrowDown" class="text-grey h-full text-grey nc-ui-dt-dropdown cursor-pointer outline-0 mr-2" /></div>
<template #overlay>
<a-menu class="shadow bg-white">
<a-menu-item @click="emit('edit')">
@ -284,7 +280,7 @@ const hideField = async () => {
<a-menu-item v-if="(!virtual || column?.uidt === UITypes.Formula) && !column?.pv" @click="setAsDisplayValue">
<div class="nc-column-set-primary nc-header-menu-item">
<component :is="iconMap.star" class="text-primary" />
<GeneralIcon icon="star" class="text-primary" />
<!-- todo : tooltip -->
<!-- Set as Display value -->

5
packages/nc-gui/components/smartsheet/toolbar/LockType.vue

@ -31,16 +31,17 @@ const selectedView = inject(ActiveViewInj)
<div class="nc-locked-menu-item" @click="emit('select', type)">
<div :class="{ 'show-tick': !hideTick }">
<template v-if="!hideTick">
<component :is="iconMap.check" v-if="selectedView?.lock_type === type" />
<GeneralIcon v-if="selectedView?.lock_type === type" icon="check" />
<span v-else />
</template>
<div>
<div class="flex items-center gap-1">
<component :is="types[type].icon" class="text-gray-500" />
{{ $t(types[type].title) }}
</div>
<div class="nc-subtitle whitespace-normal">
{{ $t(types[type].subtitle) }}
</div>

2
packages/nc-gui/components/virtual-cell/BelongsTo.vue

@ -52,7 +52,7 @@ const { loadRelatedTableMeta, relatedTableDisplayValueProp, unlink } = useProvid
await loadRelatedTableMeta()
const addIcon = computed(() => (cellValue?.value ?'expand' : 'plus'))
const addIcon = computed(() => (cellValue?.value ? 'expand' : 'plus'))
const value = computed(() => {
if (cellValue?.value) {

2
packages/nc-gui/components/virtual-cell/HasMany.vue

@ -122,8 +122,8 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
/>
<GeneralIcon
icon="plus"
v-if="!readOnly && isUIAllowed('xcDatatableEditable')"
icon="plus"
class="select-none text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-plus"
@click.stop="listItemsDlg = true"
/>

3
packages/nc-gui/components/virtual-cell/ManyToMany.vue

@ -12,7 +12,6 @@ import {
RowInj,
computed,
createEventHook,
iconMap,
inject,
ref,
useProvideLTARStore,
@ -123,8 +122,8 @@ useSelectedCellKeyupListener(inject(ActiveCellInj, ref(false)), (e: KeyboardEven
/>
<GeneralIcon
icon="plus"
v-if="!readOnly && isUIAllowed('xcDatatableEditable')"
icon="plus"
class="text-sm nc-action-icon text-gray-500/50 hover:text-gray-500 nc-plus"
@click.stop="listItemsDlg = true"
/>

2
packages/nc-gui/nuxt.config.ts

@ -54,7 +54,7 @@ export default defineNuxtConfig({
rel: 'icon',
type: 'image/x-icon',
href: './favicon.ico',
}
},
],
meta: [
{ charset: 'utf-8' },

2
packages/nc-gui/pages/[projectType]/[projectId]/index.vue

@ -583,7 +583,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2"
>
<component
:is="iconMap.arrowDoubleLeft"
:is="iconMap.sidebarMinimise"
v-e="['c:grid:toggle-navdraw']"
class="cursor-pointer transform transition-transform duration-500"
:class="{ 'rotate-180': !isOpen }"

4
packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue

@ -42,10 +42,10 @@ const hideSidebarOnClickOrTouchIfMobileMode = () => {
<div class="flex items-end !min-h-[var(--header-height)] !bg-white-500 nc-tab-bar">
<div
v-if="!isOpen"
class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3 mb-1"
class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row py-2 px-3"
>
<component
:is="iconMap.arrowDoubleLeft"
:is="iconMap.sidebarMinimise"
v-e="['c:grid:toggle-navdraw']"
class="cursor-pointer transform transition-transform duration-500 text-gray-500/80 hover:text-gray-500"
:class="{ 'rotate-180': !isOpen }"

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

@ -15,141 +15,23 @@ import MdiFlagOutline from '~icons/mdi/flag-outline'
import MdiTableLarge from '~icons/mdi/table-large'
import MdiEyeCircleOutline from '~icons/mdi/eye-circle-outline'
import MdiAccountGroup from '~icons/mdi/account-group'
import PhTableThin from '~icons/ph/table-light'
import PhLockIcon from '~icons/ph/lock-key-light'
import PhAccountIcon from '~icons/ph/user-light'
import PhUsersThreeThin from '~icons/ph/users-three-light'
import PhDownloadThin from '~icons/ph/arrow-line-down-light'
import PhUploadThin from '~icons/ph/arrow-line-up-light'
import PhHookThin from '~icons/ph/anchor-light'
import PhTreeThin from '~icons/ph/tree-structure-light'
import PhPlusThin from '~icons/ph/plus-light'
import PhSearchThin from '~icons/ph/magnifying-glass-light'
import PhCopySimpleThin from '~icons/ph/copy-simple-light'
import PhClipboardThin from '~icons/ph/clipboard-text-light'
import PhGearThin from '~icons/ph/gear-light'
import PhImageThin from '~icons/ph/image-light'
import PhHardDriveThin from '~icons/ph/hard-drives-light'
import PhBookThin from '~icons/ph/book-bookmark-light'
import PhCaretDownLight from '~icons/ph/caret-down-light'
import PhCaretRightLight from '~icons/ph/caret-right-light'
import PhDotsThreeOutlineVerticalThin from '~icons/ph/dots-three-outline-vertical-light'
import PhDotsThreeOutlineThin from '~icons/ph/dots-three-outline-light'
import PhExcelThin from '~icons/ph/microsoft-excel-logo-light'
import PhCsvThin from '~icons/ph/file-csv-light'
import PhBracketsCurlyThin from '~icons/ph/brackets-curly-light'
import PhTrashThin from '~icons/ph/trash-light'
import PhPencilSimpleThin from '~icons/ph/pencil-simple-light'
import PhListMagnifyingGlassThin from '~icons/ph/list-magnifying-glass-light'
import PhStringIcon from '~icons/ph/text-aa-light'
import PhTextAreaIcon from '~icons/ph/text-align-left-light'
import FilePhoneIcon from '~icons/ph/phone-call-light'
import KeyIcon from '~icons/ph/key-light'
import ClockIcon from '~icons/ph/alarm-light'
import WebIcon from '~icons/ph/planet-light'
import BooleanIcon from '~icons/ph/check-square-light'
import CalendarIcon from '~icons/ph/calendar-blank-light'
import SingleSelectIcon from '~icons/ph/caret-circle-down-light'
import DatetimeIcon from '~icons/ph/calendar-light'
import GeoDataIcon from '~icons/ph/map-pin-light'
import GenericIcon from '~icons/ph/square-light'
import NumericIcon from '~icons/ph/number-square-one-light'
import EmailIcon from '~icons/ph/envelope-light'
import CurrencyIcon from '~icons/ph/currency-circle-dollar-light'
import PercentIcon from '~icons/ph/percent-light'
import DecimalIcon from '~icons/mdi/decimal'
import DurationIcon from '~icons/ph/clock-clockwise-light'
import PhFunctiontone from '~icons/ph/function-light'
import PhQrCodeThin from '~icons/ph/qr-code-light'
import MdiQrcodeScan from '~icons/mdi/qrcode-scan'
import PhBarcodeThin from '~icons/ph/barcode-light'
import PhCalculatorThin from '~icons/ph/calculator-light'
import PhEyeSlashThin from '~icons/ph/eye-slash-light'
import PhEyeThin from '~icons/ph/eye-light'
import PhExpandThin from '~icons/ph/arrows-out-simple-light'
import PhLifebuoyThin from '~icons/ph/lifebuoy-light'
import PhCheckThin from '~icons/ph/check-light'
import PhFolderLockThin from '~icons/ph/folder-simple-lock-light'
import MdiDatabaseSync from '~icons/mdi/database-sync'
import PhWarningThin from '~icons/ph/warning-light'
import HMIcon from '~icons/mdi/table-arrow-right'
import BTIcon from '~icons/mdi/table-arrow-left'
import MMIcon from '~icons/mdi/table-network'
import PhShareThin from '~icons/ph/share-light'
import PhReloadThin from '~icons/ph/arrow-clockwise-light'
import PhCodeThin from '~icons/ph/code-light'
import PhFunnelThin from '~icons/ph/funnel-light'
import PhGridNineThin from '~icons/ph/grid-nine-light'
import PhSplitVerticalThin from '~icons/ph/split-vertical-light'
import PhGridThin from '~icons/ph/grid-four'
import PhComputerTowerThin from '~icons/ph/computer-tower-light'
import PhSquareHalfBottomThin from '~icons/ph/square-half-bottom-light'
import MdiMapIcon from '~icons/mdi/map-outline'
import MdiDatabaseSettingsOutline from '~icons/mdi/database-settings-outline'
import PhXCircleLight from '~icons/ph/x-circle-light'
import PhXLight from '~icons/ph/x-light'
import PhXSquareLight from '~icons/ph/x-square-light'
import PhSignInLight from '~icons/ph/sign-in-light'
import PhSignOutLight from '~icons/ph/sign-out-light'
import PhCaretDoubleLeftLight from '~icons/ph/caret-double-left-light'
import MdiOpenInNew from '~icons/mdi/open-in-new'
import PhFloppyDiskLight from '~icons/ph/floppy-disk-light'
import PhPlusCircleLight from '~icons/ph/plus-circle-light'
import PhMinusCircleLight from '~icons/ph/minus-circle-light'
import PhAtLight from '~icons/ph/at-light'
import PhDatabaseLight from '~icons/ph/database-light'
import PhUserPlusLight from '~icons/ph/user-plus-light'
import PhDiscordLogoLight from '~icons/ph/discord-logo-light'
import PhRedditLogoLight from '~icons/ph/reddit-logo-light'
import PhTwitterLogoLight from '~icons/ph/twitter-logo-light'
import PhGithubLogoLight from '~icons/ph/github-logo-light'
import PhKeyboardLight from '~icons/ph/keyboard-light'
import PhUserCircleLight from '~icons/ph/user-circle-light'
import PhKeyReturnThin from '~icons/ph/key-return-light'
import PhLinkSimpleHorizontalLight from '~icons/ph/link-simple-horizontal-light'
import PhPresentationThin from '~icons/ph/presentation-light'
import PhTranslateThin from '~icons/ph/translate-light'
import PhSortAscendingThin from '~icons/ph/sort-ascending-light'
import PhChatTextThin from '~icons/ph/chat-text-light'
import PhCloudLightningThin from '~icons/ph/cloud-lightning-light'
import PhListBulletsThin from '~icons/ph/list-bullets-light'
import PhBracketsAngleThin from '~icons/ph/brackets-angle-light'
import MdiExitToApp from '~icons/mdi/exit-to-app'
import MdiKeyChange from '~icons/mdi/key-change'
import MdiMapMarker from '~icons/mdi/map-marker'
import MdiGpsFixed from '~icons/mdi/gps-fixed'
import MdiPlusThick from '~icons/mdi/plus-thick'
import MdiDragVertical from '~icons/mdi/drag-vertical'
import MdiFileUploadOutline from '~icons/mdi/file-upload-outline'
import MdiDrag from '~icons/mdi/drag'
import MdiCommentTextOutline from '~icons/mdi/comment-text-outline'
import MdiContentSave from '~icons/mdi/content-save'
import MdiContentSaveEdit from '~icons/mdi/content-save-edit'
import PhSortDescendingThin from '~icons/ph/sort-descending-light'
import PhStar from '~icons/ph/star-light'
import MdiTableColumnPlusAfter from '~icons/mdi/table-column-plus-after'
import MdiTableColumnPlusBefore from '~icons/mdi/table-column-plus-before'
import PhExportLight from '~icons/ph/export-light'
import MdiTableKey from '~icons/mdi/table-key'
import MdiDramaMasks from '~icons/mdi/drama-masks'
import MdiEmailArrowRightOutline from '~icons/mdi/email-arrow-right-outline'
import MdiCloseThick from '~icons/mdi/close-thick'
import MdiLinkVariantRemove from '~icons/mdi/link-variant-remove'
import MdiChevronLeft from '~icons/mdi/chevron-left'
import MdiChevronRight from '~icons/mdi/chevron-right'
import MdiFileImageBox from '~icons/mdi/file-image-box'
import MdiStorefrontOutline from '~icons/mdi/storefront-outline'
import MdiLoading from '~icons/mdi/loading'
import MdiArrowCollapse from '~icons/mdi/arrow-collapse'
import MdiInformationOutline from '~icons/mdi/information-outline'
import MdiMapMarkerAlert from '~icons/mdi/map-marker-alert'
import NcIconsRowHeightMedium from '~icons/nc-icons/row-height-medium'
import NcIconsRowHeightShort from '~icons/nc-icons/row-height-short'
import NcIconsRowHeightTall from '~icons/nc-icons/row-height-tall'
import NcIconsRowHeightExtraTall from '~icons/nc-icons/row-height-extra-tall'
export const iconMapOld = {
// keep it for reference
// todo: remove it after all icons are migrated
/* export const iconMapOld = {
info: MdiInformationOutline,
loading: MdiLoading,
arrowCollapse: MdiArrowCollapse,
@ -213,7 +95,7 @@ export const iconMapOld = {
book: PhBookThin,
arrowDown: PhCaretDownLight,
arrowRight: PhCaretRightLight,
arrowDoubleLeft: PhCaretDoubleLeftLight,
sidebarMinimise: PhCaretDoubleLeftLight,
threeDotVertical: PhDotsThreeOutlineVerticalThin,
threeDotHorizontal: PhDotsThreeOutlineThin,
table: PhTableThin,
@ -292,7 +174,7 @@ export const iconMapOld = {
heightMedium: NcIconsRowHeightMedium,
heightTall: NcIconsRowHeightTall,
heightExtra: NcIconsRowHeightExtraTall,
} as const
} as const */
export const iconMap = {
info: h('span', { class: 'material-symbols-outlined' }, 'info_outline'),
@ -354,14 +236,13 @@ export const iconMap = {
clipboard: h('span', { class: 'material-symbols-outlined' }, 'content_paste'),
settings: h('span', { class: 'material-symbols-outlined' }, 'settings'),
image: h('span', { class: 'material-symbols-outlined' }, 'image'),
datasource: h('span', { class: 'material-symbols-outlined' }, 'data_usage'),
datasource: h('span', { class: 'material-symbols-outlined' }, 'hard_drive'),
book: h('span', { class: 'material-symbols-outlined' }, 'menu_book'),
arrowDown: h('span', { class: 'material-symbols-outlined', style: { fontSize: '.8rem' } }, 'keyboard_arrow_down'),
arrowRight: h('span', { class: 'material-symbols-outlined' }, 'keyboard_arrow_right'),
arrowDoubleLeft: h('span', { class: 'material-symbols-outlined' }, 'first_page'),
sidebarMinimise: h('span', { class: 'material-symbols-outlined' }, 'left_panel_close'),
// threeDotVertical: h('span', { class: 'material-symbols-outlined' }, 'more_vert'),
// threeDotHorizontal: h('span', { class: 'material-symbols-outlined' }, 'more_horiz'),
threeDotVertical: PhDotsThreeOutlineVerticalThin,
threeDotHorizontal: PhDotsThreeOutlineThin,
table: h('span', { class: 'material-symbols-outlined' }, 'table_chart'),
@ -388,19 +269,19 @@ export const iconMap = {
sendEmail: h('span', { class: 'material-symbols-outlined' }, 'email'),
currency: h('span', { class: 'material-symbols-outlined' }, 'attach_money'),
percent: h('span', { class: 'material-symbols-outlined' }, 'percent'),
decimal: h('span', { class: 'material-symbols-outlined' }, 'functions'),
specificDbType: h('span', { class: 'material-symbols-outlined' }, 'storage'),
duration: h('span', { class: 'material-symbols-outlined' }, 'accesstime'),
decimal: h('span', { class: 'material-symbols-outlined' }, 'decimal_increase'),
specificDbType: h('span', { class: 'material-symbols-outlined' }, 'inbox_customize'),
duration: h('span', { class: 'material-symbols-outlined' }, 'timer'),
phone: h('span', { class: 'material-symbols-outlined' }, 'phone'),
formula: h('span', { class: 'material-symbols-outlined' }, 'function'),
function: h('span', { class: 'material-symbols-outlined' }, 'functions'),
key: h('span', { class: 'material-symbols-outlined' }, 'key'),
json: h('span', { class: 'material-symbols-outlined' }, 'code'),
qrCode: h('span', { class: 'material-symbols-outlined' }, 'qrcode'),
qrCodeScan: h('span', { class: 'material-symbols-outlined' }, 'qrcodescanner'),
qrCode: h('span', { class: 'material-symbols-outlined' }, 'qr_code'),
qrCodeScan: h('span', { class: 'material-symbols-outlined' }, 'qr_code_scanner'),
barCode: h('span', { class: 'material-symbols-outlined' }, 'barcode'),
calculator: h('span', { class: 'material-symbols-outlined' }, 'calculator'),
rollup: h('span', { class: 'material-symbols-outlined' }, 'aggregate'),
calculator: h('span', { class: 'material-symbols-outlined' }, 'calculate'),
rollup: h('span', { class: 'material-symbols-outlined' }, 'group_work'),
eye: h('span', { class: 'material-symbols-outlined' }, 'visibility'),
eyeSlash: h('span', { class: 'material-symbols-outlined' }, 'visibility_off'),
expand: h('span', { class: 'material-symbols-outlined' }, 'open_in_full'),
@ -413,7 +294,7 @@ export const iconMap = {
xml: h('span', { class: 'material-symbols-outlined' }, 'code'),
airtable: h('span', { class: 'material-symbols-outlined' }, 'grid_on'),
grid: h('span', { class: 'material-symbols-outlined' }, 'grid_on'),
gallery: h('span', { class: 'material-symbols-outlined' }, 'view_module'),
gallery: h('span', { class: 'material-symbols-outlined' }, 'image'),
form: h('span', { class: 'material-symbols-outlined' }, 'receipt'),
map: h('span', { class: 'material-symbols-outlined' }, 'map'),
kanban: h('span', { class: 'material-symbols-outlined' }, 'view_column'),

1
packages/nc-gui/utils/viewUtils.ts

@ -1,5 +1,4 @@
import { ViewTypes } from 'nocodb-sdk'
import { themeV2Colors } from '#imports'
import { iconMap } from '~/utils/iconUtils'
import type { Language } from '~/lib'

Loading…
Cancel
Save