Browse Source

refactor: move all icons to iconMap (WIP)

Signed-off-by: Pranav C <pranavxc@gmail.com>
pull/5343/head
Pranav C 2 years ago
parent
commit
957df0735b
  1. 2
      packages/nc-gui/components/account/UsersModal.vue
  2. 8
      packages/nc-gui/components/cell/attachment/Carousel.vue
  3. 5
      packages/nc-gui/components/cell/attachment/Modal.vue
  4. 28
      packages/nc-gui/components/dashboard/TreeView.vue
  5. 4
      packages/nc-gui/components/dashboard/settings/UIAcl.vue
  6. 6
      packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue
  7. 8
      packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue
  8. 2
      packages/nc-gui/components/dlg/AirtableImport.vue
  9. 3
      packages/nc-gui/components/dlg/QuickImport.vue
  10. 18
      packages/nc-gui/components/dlg/TableCreate.vue
  11. 4
      packages/nc-gui/components/general/AddBaseButton.vue
  12. 4
      packages/nc-gui/components/general/HelpAndSupport.vue
  13. 6
      packages/nc-gui/components/general/JoinCloud.vue
  14. 10
      packages/nc-gui/components/general/MiniSidebar.vue
  15. 2
      packages/nc-gui/components/general/PreviewAs.vue
  16. 4
      packages/nc-gui/components/general/ShareBaseButton.vue
  17. 26
      packages/nc-gui/components/general/Social.vue
  18. 18
      packages/nc-gui/components/general/SocialCard.vue
  19. 3
      packages/nc-gui/components/smartsheet/column/SelectOptions.vue
  20. 12
      packages/nc-gui/components/smartsheet/expanded-form/Comments.vue
  21. 6
      packages/nc-gui/components/smartsheet/expanded-form/Header.vue
  22. 8
      packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue
  23. 2
      packages/nc-gui/components/smartsheet/toolbar/Erd.vue
  24. 5
      packages/nc-gui/components/smartsheet/toolbar/SortListMenu.vue
  25. 4
      packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue
  26. 17
      packages/nc-gui/pages/[projectType]/[projectId]/index.vue
  27. 3
      packages/nc-gui/pages/[projectType]/[projectId]/index/index.vue
  28. 5
      packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue
  29. 6
      packages/nc-gui/pages/index/index/create-external.vue
  30. 57
      packages/nc-gui/utils/iconUtils.ts

2
packages/nc-gui/components/account/UsersModal.vue

@ -6,12 +6,12 @@ import {
computed,
emailValidator,
extractSdkResponseErrorMsg,
iconMap,
message,
ref,
useCopy,
useDashboard,
useI18n,
iconMap,
useNuxtApp,
} from '#imports'
import type { User } from '~/lib'

8
packages/nc-gui/components/cell/attachment/Carousel.vue

@ -1,7 +1,7 @@
<script lang="ts" setup>
import { onKeyDown } from '@vueuse/core'
import { useAttachmentCell } from './utils'
import { computed, isImage, onClickOutside, ref, useAttachment , iconMap} from '#imports'
import { computed, iconMap, isImage, onClickOutside, ref, useAttachment } from '#imports'
const { selectedImage, visibleItems, downloadFile } = useAttachmentCell()!
@ -53,7 +53,11 @@ onClickOutside(carouselRef, () => {
<template v-if="selectedImage">
<div class="overflow-hidden p-12 text-center relative">
<div class="text-white group absolute top-5 right-5">
<component :is="iconMap.closeCircle" class="group-hover:text-red-500 cursor-pointer text-4xl" @click.stop="selectedImage = false" />
<component
:is="iconMap.closeCircle"
class="group-hover:text-red-500 cursor-pointer text-4xl"
@click.stop="selectedImage = false"
/>
</div>
<div

5
packages/nc-gui/components/cell/attachment/Modal.vue

@ -2,7 +2,7 @@
import { onKeyDown } from '@vueuse/core'
import { useAttachmentCell } from './utils'
import { useSortable } from './sort'
import { isImage, ref, useAttachment, useDropZone, useUIPermission, watch , iconMap} from '#imports'
import { iconMap, isImage, ref, useAttachment, useDropZone, useUIPermission, watch } from '#imports'
const { isUIAllowed } = useUIPermission()
@ -133,7 +133,8 @@ function onRemoveFileClick(title: any, i: number) {
<a-tooltip v-if="!readOnly">
<template #title> Remove File </template>
<component :is="iconMap.closeCircle"
<component
:is="iconMap.closeCircle"
v-if="isSharedForm || (isUIAllowed('tableAttachment') && !isPublic && !isLocked)"
class="nc-attachment-remove"
@click.stop="onRemoveFileClick(item.title, i)"

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

@ -372,7 +372,12 @@ const setIcon = async (icon: string, table: TableType) => {
</Transition>
<Transition name="layout" mode="out-in">
<component :is="iconMap.close" v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
<component
:is="iconMap.close"
v-if="searchActive"
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)" />
</Transition>
</div>
@ -399,7 +404,12 @@ const setIcon = async (icon: string, table: TableType) => {
</Transition>
<Transition name="slide-right" mode="out-in">
<component :is="iconMap.close" v-if="searchActive" class="text-gray-500 text-lg mx-1 mt-0.5" @click="onSearchCloseIconClick" />
<component
:is="iconMap.close"
v-if="searchActive"
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="onSearchIconClick" />
</Transition>
@ -456,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)"
>
<MdiOpenInNew class="group-hover:text-accent" />
<component :is="iconMap.openInNew" class="group-hover:text-accent" />
<!-- Request a data source you need? -->
{{ $t('labels.requestDataSource') }}
</a>
@ -579,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)"
>
<MdiOpenInNew class="group-hover:text-accent" />
<component :is="iconMap.openInNew" class="group-hover:text-accent" />
<!-- Request a data source you need? -->
{{ $t('labels.requestDataSource') }}
</a>
@ -846,7 +856,7 @@ const setIcon = async (icon: string, table: TableType) => {
@click="openAirtableImportDialog(base.id)"
>
<div class="color-transition nc-project-menu-item group">
<MdiTableLarge class="group-hover:text-accent" />
<component :is="iconMap.airtable" class="group-hover:text-accent" />
Airtable
</div>
</a-menu-item>
@ -857,7 +867,7 @@ const setIcon = async (icon: string, table: TableType) => {
@click="openQuickImportDialog('csv', base.id)"
>
<div class="color-transition nc-project-menu-item group">
<MdiFileDocumentOutline class="group-hover:text-accent" />
<component :is="iconMap.csv" class="group-hover:text-accent" />
CSV file
</div>
</a-menu-item>
@ -868,7 +878,7 @@ const setIcon = async (icon: string, table: TableType) => {
@click="openQuickImportDialog('json', base.id)"
>
<div class="color-transition nc-project-menu-item group">
<MdiCodeJson class="group-hover:text-accent" />
<component :is="iconMap.json" class="group-hover:text-accent" />
JSON file
</div>
</a-menu-item>
@ -879,7 +889,7 @@ const setIcon = async (icon: string, table: TableType) => {
@click="openQuickImportDialog('excel', base.id)"
>
<div class="color-transition nc-project-menu-item group">
<MdiFileExcel class="group-hover:text-accent" />
<component :is="iconMap.excel" class="group-hover:text-accent" />
Microsoft Excel
</div>
</a-menu-item>
@ -894,7 +904,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)"
>
<MdiOpenInNew class="group-hover:text-accent" />
<component :is="iconMap.openInNew" class="group-hover:text-accent" />
<!-- Request a data source you need? -->
{{ $t('labels.requestDataSource') }}
</a>

4
packages/nc-gui/components/dashboard/settings/UIAcl.vue

@ -121,7 +121,7 @@ const columns = [
<div class="flex flex-row items-center w-full mb-4 gap-2">
<a-input v-model:value="searchInput" placeholder="Search models" class="nc-acl-search">
<template #prefix>
<MdiMagnify />
<component :is="iconMap.search" />
</template>
</a-input>
@ -134,7 +134,7 @@ const columns = [
<a-button class="self-start nc-acl-save" @click="saveUIAcl">
<div class="flex items-center gap-2 text-gray-600 font-light">
<MdiContentSave />
<component :is="iconMap.save" />
Save
</div>
</a-button>

6
packages/nc-gui/components/dashboard/settings/data-sources/CreateBase.vue

@ -566,7 +566,11 @@ watch(
<a-input v-model:value="item.value" />
<component :is="iconMap.close" :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" />
<component
:is="iconMap.close"
:style="{ 'font-size': '1.5em', 'color': 'red' }"
@click="removeParam(index)"
/>
</div>
</div>
<a-button type="dashed" class="w-full caption mt-2" @click="addNewParam">

8
packages/nc-gui/components/dashboard/settings/data-sources/EditBase.vue

@ -538,7 +538,11 @@ onMounted(async () => {
<a-input v-model:value="item.value" />
<component :is="iconMap.close" :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" />
<component
:is="iconMap.close"
:style="{ 'font-size': '1.5em', 'color': 'red' }"
@click="removeParam(index)"
/>
</div>
</div>
<a-button type="dashed" class="w-full caption mt-2" @click="addNewParam">
@ -589,7 +593,7 @@ onMounted(async () => {
</div>
</a-form-item>
<div class="w-full flex items-center mt-2 text-[#e65100]">
<MdiWarning class="mr-1" />
<component :is="iconMap.warning" class="mr-1" />
Please make sure database you are trying to connect is valid! This operation can cause schema loss!!
</div>
</a-form>

2
packages/nc-gui/components/dlg/AirtableImport.vue

@ -3,11 +3,11 @@ import type { Socket } from 'socket.io-client'
import io from 'socket.io-client'
import type { Card as AntCard } from 'ant-design-vue'
import {
iconMap,
Form,
computed,
extractSdkResponseErrorMsg,
fieldRequiredValidator,
iconMap,
message,
nextTick,
onBeforeUnmount,

3
packages/nc-gui/components/dlg/QuickImport.vue

@ -12,6 +12,7 @@ import {
computed,
extractSdkResponseErrorMsg,
fieldRequiredValidator,
iconMap,
importCsvUrlValidator,
importExcelUrlValidator,
importUrlValidator,
@ -413,7 +414,7 @@ const beforeUpload = (file: UploadFile) => {
<a-tab-pane v-if="isImportTypeJson" key="jsonEditorTab" :closable="false">
<template #tab>
<span class="flex items-center gap-2">
<MdiCodeJson />
<component :is="iconMap.json" />
JSON Editor
</span>
</template>

18
packages/nc-gui/components/dlg/TableCreate.vue

@ -1,5 +1,17 @@
<script setup lang="ts">
import { Form, computed, nextTick, onMounted, ref, useProject, useTable, useTabs, useVModel, validateTableName } from '#imports'
import {
Form,
computed,
iconMap,
nextTick,
onMounted,
ref,
useProject,
useTable,
useTabs,
useVModel,
validateTableName,
} from '#imports'
import { TabType } from '~/lib'
const props = defineProps<{
@ -143,8 +155,8 @@ onMounted(() => {
<div class="pointer flex flex-row items-center gap-x-1" @click="isAdvanceOptVisible = !isAdvanceOptVisible">
{{ isAdvanceOptVisible ? $t('general.hideAll') : $t('general.showMore') }}
<MdiMinusCircleOutline v-if="isAdvanceOptVisible" class="text-gray-500" />
<MdiPlusCircleOutline v-else class="text-gray-500" />
<component :is="iconMap.minusCircle" v-if="isAdvanceOptVisible" class="text-gray-500" />
<component :is="iconMap.plusCircle" v-else class="text-gray-500" />
</div>
</div>
<div class="nc-table-advanced-options" :class="{ active: isAdvanceOptVisible }">

4
packages/nc-gui/components/general/AddBaseButton.vue

@ -1,4 +1,6 @@
<script setup lang="ts">
import { iconMap } from '#imports'
const { isUIAllowed } = useUIPermission()
const { t } = useI18n()
@ -14,7 +16,7 @@ const toggleDialog = inject(ToggleDialogInj, () => {})
>
<div>
<div class="flex items-center space-x-1">
<PhUsersThreeThin class="mr-1 nc-new-base" />
<component :is="iconMap.users" class="mr-1 nc-new-base" />
<div>{{ t('title.teamAndSettings') }}</div>
</div>
</div>

4
packages/nc-gui/components/general/HelpAndSupport.vue

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { ref, storeToRefs, useGlobal, useProject, useRoute } from '#imports'
import { iconMap, ref, storeToRefs, useGlobal, useProject, useRoute } from '#imports'
const showDrawer = ref(false)
@ -19,7 +19,7 @@ const openSwaggerLink = () => {
class="flex items-center space-x-1 w-full cursor-pointer pl-3 py-1.5 hover:(text-primary bg-primary bg-opacity-5)"
@click="showDrawer = true"
>
<PhChatTextThin class="mr-1" />
<component :is="iconMap.apiAndSupport" class="mr-1" />
<!-- APIs & Support -->
<div>{{ $t('title.APIsAndSupport') }}</div>

6
packages/nc-gui/components/general/JoinCloud.vue

@ -1,3 +1,7 @@
<script lang="ts" setup>
import { iconMap } from '#imports'
</script>
<template>
<a
v-e="['c:navbar:join-cloud']"
@ -5,7 +9,7 @@
href="https://docs.google.com/forms/d/e/1FAIpQLSfKLe8Rcrq0uo2_jM5W1kbVBbzDiQ3IvlP8Iov61FTekVAvzA/viewform?usp=pp_url"
target="_blank"
>
<PhCloudLightningThin class="mr-1" />
<component :is="iconMap.cloud" class="mr-1" />
Join NocoDB Cloud
</a>
</template>

10
packages/nc-gui/components/general/MiniSidebar.vue

@ -42,7 +42,7 @@ const logout = async () => {
<a-menu-item-group title="User Settings">
<a-menu-item key="email" class="!rounded-t">
<nuxt-link v-e="['c:navbar:user:email']" class="group flex items-center no-underline py-2" to="/user">
<MdiAt class="mt-1 group-hover:text-success" />
<component :is="iconMap.at" class="mt-1 group-hover:text-success" />
&nbsp;
<span class="prose group-hover:text-black nc-user-menu-email">{{ email }}</span>
</nuxt-link>
@ -52,7 +52,7 @@ const logout = async () => {
<a-menu-item key="signout" class="!rounded-b">
<div v-e="['a:navbar:user:sign-out']" class="group flex items-center py-2" @click="logout">
<MdiLogout class="group-hover:(!text-red-500)" />&nbsp;
<component :is="iconMap.signout" class="group-hover:(!text-red-500)" />&nbsp;
<span class="prose font-semibold text-gray-500 group-hover:text-black nc-user-menu-signout">
{{ $t('general.signOut') }}
</span>
@ -66,7 +66,7 @@ const logout = async () => {
<div id="sidebar" ref="sidebar" class="text-white flex-auto flex flex-col items-center w-full">
<a-dropdown :trigger="['contextmenu']" placement="right" overlay-class-name="nc-dropdown">
<div :class="[route.name === 'index' ? 'active' : '']" class="nc-mini-sidebar-item" @click="navigateTo('/')">
<MdiFolder class="cursor-pointer transform hover:scale-105 text-2xl" />
<component :is="iconMap.folder" class="cursor-pointer transform hover:scale-105 text-2xl" />
</div>
<template #overlay>
@ -95,7 +95,7 @@ const logout = async () => {
class="group flex items-center gap-2 py-2 hover:text-primary"
@click="navigateTo('/project/create-external')"
>
<MdiDatabaseOutline class="text-lg group-hover:text-accent" />
<component :is="iconMap.database" class="text-lg group-hover:text-accent" />
<div v-html="$t('activity.createProjectExtended.extDB')" />
</div>
</a-menu-item>
@ -112,7 +112,7 @@ const logout = async () => {
class="nc-mini-sidebar-item"
@click="navigateTo(`/${route.params.projectType}/${route.params.projectId}`)"
>
<MdiDatabase class="cursor-pointer transform hover:scale-105 text-2xl" />
<component :is="iconMap.database" class="cursor-pointer transform hover:scale-105 text-2xl" />
</div>
</a-tooltip>
</div>

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

@ -82,7 +82,7 @@ watch(previewAs, (newRole) => {
<!-- Close -->
<div class="flex items-center gap-2 cursor-pointer nc-preview-btn-exit-to-app" @click="previewAs = null">
<MdiExitToApp />
<component :is="iconMap.exit" />
{{ $t('general.close') }}
</div>
</div>

4
packages/nc-gui/components/general/ShareBaseButton.vue

@ -1,5 +1,5 @@
<script setup lang="ts">
import { isDrawerOrModalExist, isMac, useNuxtApp, useRoute, useUIPermission } from '#imports'
import { iconMap, isDrawerOrModalExist, isMac, useNuxtApp, useRoute, useUIPermission } from '#imports'
const route = useRoute()
@ -45,7 +45,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
</template>
<a-button type="primary" class="!rounded-md mr-1" size="medium">
<div class="flex items-center space-x-1 cursor-pointer text-xs font-weight-bold">
<MdiAccountPlusOutline class="mr-1 nc-share-base hover:text-accent text-sm" />
<component :is="iconMap.accountPlus" class="mr-1 nc-share-base hover:text-accent text-sm" />
{{ $t('activity.share') }}
</div>
</a-button>

26
packages/nc-gui/components/general/Social.vue

@ -1,5 +1,5 @@
<script lang="ts" setup>
import { useI18n } from '#imports'
import { iconMap, useI18n } from '#imports'
const { locale } = useI18n()
@ -19,7 +19,12 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
/>
<div v-else class="flex justify-between gap-1 w-full px-2">
<MdiDiscord v-e="['e:community:discord']" class="icon text-[#7289DA]" @click="open('https://discord.gg/5RgZmkW')" />
<component
:is="iconMap.discord"
v-e="['e:community:discord']"
class="icon text-[#7289DA]"
@click="open('https://discord.gg/5RgZmkW')"
/>
<div
v-e="['e:community:discourse']"
@ -29,11 +34,22 @@ const isZhLang = $computed(() => locale.value.startsWith('zh'))
<div class="discourse" />
</div>
<MdiReddit v-e="['e:community:reddit']" class="icon text-[#FF4600]" @click="open('https://www.reddit.com/r/NocoDB/')" />
<component
:is="iconMap.reddit"
v-e="['e:community:reddit']"
class="icon text-[#FF4600]"
@click="open('https://www.reddit.com/r/NocoDB/')"
/>
<MdiTwitter v-e="['e:community:twitter']" class="icon text-[#1DA1F2]" @click="open('https://twitter.com/NocoDB')" />
<component
:is="iconMap.twitter"
v-e="['e:community:twitter']"
class="icon text-[#1DA1F2]"
@click="open('https://twitter.com/NocoDB')"
/>
<MdiCalendarMonth
<component
:is="iconMap.calendar"
v-e="['e:community:book-demo']"
class="icon text-green-500"
@click="open('https://calendly.com/nocodb-meeting')"

18
packages/nc-gui/components/general/SocialCard.vue

@ -1,5 +1,5 @@
<script setup lang="ts">
import { enumColor as colors, useDialog, useGlobal, useNuxtApp } from '#imports'
import { enumColor as colors, iconMap, useDialog, useGlobal, useNuxtApp } from '#imports'
const { $e } = useNuxtApp()
@ -39,7 +39,7 @@ function openKeyboardShortcutDialog() {
to="https://docs.nocodb.com/"
>
<div class="ml-3 flex items-center text-sm">
<MdiBookOpenOutline class="text-lg text-accent" />
<component :is="iconMap.book" class="text-lg text-accent" />
<span class="ml-3">{{ $t('labels.documentation') }}</span>
</div>
</nuxt-link>
@ -55,7 +55,7 @@ function openKeyboardShortcutDialog() {
to="https://apis.nocodb.com/"
>
<div class="ml-3 flex items-center text-sm">
<MdiJson class="text-lg text-green-500" />
<component :is="iconMap.json" class="text-lg text-green-500" />
<!-- todo: i18n -->
<span class="ml-3">API {{ $t('labels.documentation') }}</span>
</div>
@ -72,7 +72,7 @@ function openKeyboardShortcutDialog() {
target="_blank"
>
<div class="flex items-center text-sm">
<mdi-github class="mx-3 text-lg" />
<component :is="iconMap.github" class="mx-3 text-lg" />
<div v-if="isRtlLang">
<!-- us on Github -->
{{ $t('labels.community.starUs2') }}
@ -101,7 +101,7 @@ function openKeyboardShortcutDialog() {
target="_blank"
>
<div class="flex items-center text-sm">
<mdi-calendar-month class="mx-3 text-lg" :color="colors.dark[3 % colors.dark.length]" />
<component :is="iconMap.calendar" class="mx-3 text-lg" :color="colors.dark[3 % colors.dark.length]" />
<!-- Book a Free DEMO -->
<div>
{{ $t('labels.community.bookDemo') }}
@ -120,7 +120,7 @@ function openKeyboardShortcutDialog() {
target="_blank"
>
<div class="flex items-center text-sm">
<mdi-discord class="mx-3 text-lg" :color="colors.dark[0 % colors.dark.length]" />
<component :is="iconMap.discord" class="mx-3 text-lg" :color="colors.dark[0 % colors.dark.length]" />
<!-- Get your questions answered -->
<div>
{{ $t('labels.community.getAnswered') }}
@ -139,7 +139,7 @@ function openKeyboardShortcutDialog() {
target="_blank"
>
<div class="flex items-center text-sm">
<mdi-twitter class="mx-3 text-lg" :color="colors.dark[1 % colors.dark.length]" />
<component :is="iconMap.twitter" class="mx-3 text-lg" :color="colors.dark[1 % colors.dark.length]" />
<!-- Follow NocoDB -->
<div>
{{ $t('labels.community.followNocodb') }}
@ -176,7 +176,7 @@ function openKeyboardShortcutDialog() {
to="https://www.reddit.com/r/NocoDB/"
>
<div class="ml-3 flex items-center text-sm">
<LogosRedditIcon />
<component :is="iconMap.reddit" color="red" />
<span class="ml-4">/r/NocoDB/</span>
</div>
</nuxt-link>
@ -184,7 +184,7 @@ function openKeyboardShortcutDialog() {
<a-list-item @click="openKeyboardShortcutDialog">
<div class="ml-3 flex items-center text-sm">
<MdiKeyboard class="text-lg text-primary" />
<component :is="iconMap.keyboard" class="text-lg text-primary" />
<span class="ml-4">{{ $t('title.keyboardShortcut') }}</span>
</div>
</a-list-item>

3
packages/nc-gui/components/smartsheet/column/SelectOptions.vue

@ -208,7 +208,8 @@ watch(inputs, () => {
/>
</div>
<component :is="iconMap.close"
<component
:is="iconMap.close"
v-if="element.status !== 'remove'"
class="ml-2 hover:!text-black-500 text-gray-500 cursor-pointer"
:data-testid="`select-column-option-remove-${index}`"

12
packages/nc-gui/components/smartsheet/expanded-form/Comments.vue

@ -1,7 +1,7 @@
<script setup lang="ts">
import type { VNodeRef } from '@vue/runtime-core'
import type { AuditType } from 'nocodb-sdk'
import { enumColor, ref, timeAgo, useCopy, useExpandedFormStoreOrThrow, useGlobal, useI18n, watch } from '#imports'
import { enumColor, iconMap, ref, timeAgo, useCopy, useExpandedFormStoreOrThrow, useGlobal, useI18n, watch } from '#imports'
const { loadCommentsAndLogs, commentsAndLogs, isCommentsLoading, commentsOnly, saveComment, isYou, comment, updateComment } =
useExpandedFormStoreOrThrow()
@ -133,7 +133,11 @@ watch(
<div v-for="(log, idx) of commentsAndLogs" :key="log.id">
<a-dropdown :trigger="['contextmenu']" :overlay-class-name="`nc-dropdown-comment-context-menu-${idx}`">
<div class="flex gap-1 text-xs">
<MdiAccountCircle class="row-span-2" :class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '" />
<component
:is="iconMap.accountCircle"
class="row-span-2"
:class="isYou(log.user) ? 'text-pink-300' : 'text-blue-300 '"
/>
<div class="flex-1">
<p class="mb-1 caption edited-text text-[10px] text-gray-500">
@ -208,12 +212,12 @@ watch(
>
<template #addonBefore>
<div class="flex items-center">
<mdi-account-circle class="text-lg text-pink-300" small @click="saveComment" />
<component :is="iconMap.accountCircle" class="text-lg text-pink-300" small @click="saveComment" />
</div>
</template>
<template #suffix>
<mdi-keyboard-return v-if="comment" class="text-sm" small @click="saveComment" />
<component :is="iconMap.returnKey" v-if="comment" class="text-sm" small @click="saveComment" />
</template>
</a-input>
</div>

6
packages/nc-gui/components/smartsheet/expanded-form/Header.vue

@ -107,7 +107,8 @@ const onConfirmDeleteRowClick = async () => {
<!-- todo: i18n -->
<div class="text-center w-full">Copy record URL</div>
</template>
<mdi-link
<component
:is="iconMap.link"
v-if="!isNew"
class="nc-icon-transition cursor-pointer select-none text-gray-500 mx-1 nc-copy-row-url min-w-4"
@click="copyRecordUrl"
@ -186,7 +187,8 @@ const onConfirmDeleteRowClick = async () => {
</a-menu-item>
<a-menu-item @click="emit('cancel')">
<div v-e="['c:row-expand:delete']" class="py-2 flex gap-2 items-center">
<component :is="iconMap.closeCircle"
<component
:is="iconMap.closeCircle"
class="nc-icon-transition cursor-pointer select-none nc-delete-row text-gray-500 mx-1 min-w-4"
/>
{{ $t('general.close') }}

8
packages/nc-gui/components/smartsheet/toolbar/ColumnFilter.vue

@ -2,13 +2,13 @@
import type { ColumnType, FilterType } from 'nocodb-sdk'
import { UITypes } from 'nocodb-sdk'
import {
iconMap,
ActiveViewInj,
MetaInj,
ReloadViewDataHookInj,
comparisonOpList,
comparisonSubOpList,
computed,
iconMap,
inject,
ref,
useNuxtApp,
@ -214,7 +214,8 @@ defineExpose({
<template v-for="(filter, i) in filters" :key="i">
<template v-if="filter.status !== 'delete'">
<template v-if="filter.is_group">
<component :is="iconMap.closeBox"
<component
:is="iconMap.closeBox"
v-if="!filter.readOnly"
:key="i"
small
@ -252,7 +253,8 @@ defineExpose({
</div>
</template>
<template v-else>
<component :is="iconMap.closeBox"
<component
:is="iconMap.closeBox"
v-if="!filter.readOnly"
class="nc-filter-item-remove-btn text-grey self-center"
@click.stop="deleteFilter(filter, i)"

2
packages/nc-gui/components/smartsheet/toolbar/Erd.vue

@ -1,5 +1,5 @@
<script lang="ts" setup>
import {iconMap} from '#imports'
import { iconMap } from '#imports'
interface Props {
modelValue: boolean

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

@ -76,7 +76,7 @@ useMenuCloseOnEsc(open)
<div :class="{ 'nc-badge nc-active-btn': sorts?.length }">
<a-button v-e="['c:sort']" class="nc-sort-menu-btn nc-toolbar-btn" :disabled="isLocked">
<div class="flex items-center gap-1">
<PhSortAscendingThin />
<component :is="iconMap.sort" />
<!-- Sort -->
<span v-if="!isMobileMode" class="text-capitalize !text-xs font-weight-normal">{{ $t('activity.sort') }}</span>
@ -94,7 +94,8 @@ useMenuCloseOnEsc(open)
>
<div v-if="sorts?.length" class="sort-grid mb-2 max-h-420px overflow-y-auto" @click.stop>
<template v-for="(sort, i) of sorts" :key="i">
<component :is="iconMap.closeBox"
<component
:is="iconMap.closeBox"
ref="removeIcon"
class="nc-sort-item-remove-btn text-grey self-center"
small

4
packages/nc-gui/components/smartsheet/toolbar/ViewActions.vue

@ -206,7 +206,7 @@ useMenuCloseOnEsc(open)
<a-menu-item v-if="isUIAllowed('SharedViewList') && !isView && !isPublicView">
<div v-e="['a:actions:shared-view-list']" class="py-2 flex gap-2 items-center" @click="sharedViewListDlg = true">
<PhListBulletsThin class="text-gray-500" />
<component :is="iconMap.list" class="text-gray-500" />
<!-- Shared View List -->
{{ $t('activity.listSharedView') }}
</div>
@ -226,7 +226,7 @@ useMenuCloseOnEsc(open)
<a-menu-item v-if="!isSharedBase && !isPublicView && !isMobileMode">
<div v-e="['c:snippet:open']" class="py-2 flex gap-2 items-center" @click="showApiSnippetDrawer = true">
<PhBracketsAngleThin class="text-gray-500" />
<component :is="iconMap.snippet" class="text-gray-500" />
<!-- Get API Snippet -->
{{ $t('activity.getApiSnippet') }}
</div>

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

@ -321,7 +321,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
</template>
<template v-else>
<PhFolderSimpleThin class="text-primary cursor-pointer transform hover:scale-105 text-2xl" />
<component :is="iconMap.folder" class="text-primary cursor-pointer transform hover:scale-105 text-2xl" />
</template>
</div>
@ -330,7 +330,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
<a-menu-item-group>
<template #title>
<div class="group select-none flex items-center gap-4 py-1">
<PhFolderThin class="group-hover:text-accent text-xl" />
<component :is="iconMap.folder" class="group-hover:text-accent text-xl" />
<div class="flex flex-col">
<div class="text-lg group-hover:(!text-primary) font-semibold capitalize">
@ -368,7 +368,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
class="nc-project-menu-item group"
@click.stop="openLink(`/api/v1/db/meta/projects/${route.params.projectId}/swagger`, appInfo.ncSiteUrl)"
>
<PhBracketsCurlyThin class="group-hover:text-accent" />
<component :is="iconMap.json" class="group-hover:text-accent" />
{{ $t('activity.account.swagger') }}
</div>
</a-menu-item>
@ -493,7 +493,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
<a-sub-menu v-if="isUIAllowed('previewAs') && !isMobileMode" key="preview-as">
<template #title>
<div v-e="['c:navdraw:preview-as']" class="nc-project-menu-item group">
<PhPresentationThin class="group-hover:text-accent" />
<component :is="iconMap.preview" class="group-hover:text-accent" />
{{ $t('activity.previewAs') }}
<div class="flex-1" />
@ -517,7 +517,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
>
<template #title>
<div class="nc-project-menu-item group">
<PhTranslateThin class="group-hover:text-accent nc-language" />
<component :is="iconMap.translate" class="group-hover:text-accent nc-language" />
{{ $t('labels.language') }}
<div class="flex items-center text-gray-400 text-xs">(Community Translated)</div>
<div class="flex-1" />
@ -556,7 +556,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
class="nc-project-menu-item group !no-underline"
to="/account/users"
>
<PhAtThin class="mt-1 group-hover:text-accent" />&nbsp;
<component :is="iconMap.at" class="mt-1 group-hover:text-accent" />&nbsp;
<div class="prose-sm group-hover:text-primary">
<div>Account</div>
<div class="text-xs text-gray-500">{{ email }}</div>
@ -566,7 +566,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
<a-menu-item key="1" class="!rounded-b">
<div v-e="['a:navbar:user:sign-out']" class="nc-project-menu-item group" @click="logout">
<PhSignOutThin class="group-hover:(!text-accent)" />&nbsp;
<component :is="iconMap.signout" class="group-hover:(!text-accent)" />&nbsp;
<span class="prose-sm nc-user-menu-signout">
{{ $t('general.signOut') }}
@ -583,7 +583,8 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
<div
class="nc-sidebar-left-toggle-icon hover:after:(bg-primary bg-opacity-75) group nc-sidebar-add-row flex items-center px-2"
>
<PhCaretDoubleLeftThin
<component
:is="iconMap.arrowDoubleLeft"
v-e="['c:grid:toggle-navdraw']"
class="cursor-pointer transform transition-transform duration-500"
:class="{ 'rotate-180': !isOpen }"

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

@ -44,7 +44,8 @@ const hideSidebarOnClickOrTouchIfMobileMode = () => {
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"
>
<PhCaretDoubleLeftThin
<component
:is="iconMap.arrowDoubleLeft"
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 }"

5
packages/nc-gui/pages/[projectType]/form/[viewId]/index/survey.vue

@ -3,10 +3,10 @@ import type { ColumnType, LinkToAnotherRecordType } from 'nocodb-sdk'
import { RelationTypes, UITypes, isVirtualCol } from 'nocodb-sdk'
import { SwipeDirection, breakpointsTailwind } from '@vueuse/core'
import {
iconMap,
DropZoneRef,
IsSurveyFormInj,
computed,
iconMap,
isValidURL,
onKeyStroke,
onMounted,
@ -366,7 +366,8 @@ onMounted(() => {
</Transition>
<Transition name="slide-right" mode="out-in">
<component :is="iconMap.closeCircle"
<component
:is="iconMap.closeCircle"
v-if="v$.localState[field.title]?.$error || columnValidationError"
class="text-red-500 md:text-md"
/>

6
packages/nc-gui/pages/index/index/create-external.vue

@ -559,7 +559,11 @@ onMounted(async () => {
<a-input v-model:value="item.value" />
<component :is="iconMap.close" :style="{ 'font-size': '1.5em', 'color': 'red' }" @click="removeParam(index)" />
<component
:is="iconMap.close"
:style="{ 'font-size': '1.5em', 'color': 'red' }"
@click="removeParam(index)"
/>
</div>
</div>
<a-button type="dashed" class="w-full caption mt-2" @click="addNewParam">

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

@ -41,7 +41,6 @@ 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 PhLinkSimpleThin from '~icons/ph/link-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'
@ -52,7 +51,6 @@ 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 MultiSelectIcon from '~icons/ph/list-bullets-light'
import DatetimeIcon from '~icons/ph/calendar-light'
import GeoDataIcon from '~icons/ph/map-pin-light'
import RatingIcon from '~icons/ph/star-light'
@ -92,10 +90,60 @@ 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'
export const iconMap = {
exit: MdiExitToApp,
snippet: PhBracketsAngleThin,
list: PhListBulletsThin,
cloud: PhCloudLightningThin,
apiAndSupport: PhChatTextThin,
sort: PhSortAscendingThin,
translate: PhTranslateThin,
preview: PhPresentationThin,
link: PhLinkSimpleHorizontalLight,
returnKey: PhKeyReturnThin,
keyboard: PhKeyboardLight,
accountPlus: PhUserPlusLight,
database: PhDatabaseLight,
discord: PhDiscordLogoLight,
reddit: PhRedditLogoLight,
github: PhGithubLogoLight,
twitter: PhTwitterLogoLight,
at: PhAtLight,
plusCircle: PhPlusCircleLight,
minusCircle: PhMinusCircleLight,
save: PhFloppyDiskLight,
signin: PhSignInLight,
signout: PhSignOutLight,
lock: PhLockIcon,
account: PhAccountIcon,
accountCircle: PhUserCircleLight,
users: PhUsersThreeThin,
download: PhDownloadThin,
upload: PhUploadThin,
@ -111,6 +159,7 @@ export const iconMap = {
book: PhBookThin,
arrowDown: PhCaretDownLight,
arrowRight: PhCaretRightLight,
arrowDoubleLeft: PhCaretDoubleLeftLight,
threeDotVertical: PhDotsThreeOutlineVerticalThin,
threeDotHorizontal: PhDotsThreeOutlineThin,
table: PhTableThin,
@ -119,7 +168,6 @@ export const iconMap = {
code: PhBracketsCurlyThin,
delete: PhTrashThin,
edit: PhPencilSimpleThin,
link: PhLinkSimpleThin,
lookup: PhListMagnifyingGlassThin,
text: PhStringIcon,
longText: PhTextAreaIcon,
@ -128,7 +176,7 @@ export const iconMap = {
boolean: BooleanIcon,
calendar: CalendarIcon,
singleSelect: SingleSelectIcon,
multiSelect: MultiSelectIcon,
multiSelect: PhListBulletsThin,
datetime: DatetimeIcon,
geoData: GeoDataIcon,
rating: RatingIcon,
@ -171,6 +219,7 @@ export const iconMap = {
closeBox: PhXSquareLight,
close: PhXLight,
openInNew: MdiOpenInNew,
mm: MMIcon,
hm: HMIcon,
bt: BTIcon,

Loading…
Cancel
Save