From 118cf892476a5b5cdbf37b94fb5b10c255ed42cd Mon Sep 17 00:00:00 2001 From: Pranav C Date: Mon, 20 Feb 2023 11:22:20 +0530 Subject: [PATCH] feat(gui): replace icons with light icon Signed-off-by: Pranav C --- packages/nc-gui/components.d.ts | 4 ++++ packages/nc-gui/components/dashboard/TreeView.vue | 10 +++++----- .../nc-gui/components/general/AddBaseButton.vue | 2 +- .../nc-gui/components/general/HelpAndSupport.vue | 2 +- packages/nc-gui/components/general/JoinCloud.vue | 2 +- .../components/smartsheet/toolbar/FieldsMenu.vue | 2 +- packages/nc-gui/utils/iconUtils.ts | 6 ++++-- packages/nc-gui/utils/viewUtils.ts | 15 ++++++++++----- 8 files changed, 27 insertions(+), 16 deletions(-) diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts index 99bc5645f2..5621973c45 100644 --- a/packages/nc-gui/components.d.ts +++ b/packages/nc-gui/components.d.ts @@ -249,8 +249,12 @@ declare module '@vue/runtime-core' { NcIconsRowHeightMedium: typeof import('~icons/nc-icons/row-height-medium')['default'] NcIconsRowHeightShort: typeof import('~icons/nc-icons/row-height-short')['default'] NcIconsRowHeightTall: typeof import('~icons/nc-icons/row-height-tall')['default'] + PhChatTextThin: typeof import('~icons/ph/chat-text-thin')['default'] PhCloudLightningDuotone: typeof import('~icons/ph/cloud-lightning-duotone')['default'] + PhCloudLightningThin: typeof import('~icons/ph/cloud-lightning-thin')['default'] PhFileCsv: typeof import('~icons/ph/file-csv')['default'] + PhUserPlusThin: typeof import('~icons/ph/user-plus-thin')['default'] + PhUsersThreeThin: typeof import('~icons/ph/users-three-thin')['default'] RiLineHeight: typeof import('~icons/ri/line-height')['default'] RiTeamFill: typeof import('~icons/ri/team-fill')['default'] RouterLink: typeof import('vue-router')['RouterLink'] diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue index 2c028ad472..d50ef37ddb 100644 --- a/packages/nc-gui/components/dashboard/TreeView.vue +++ b/packages/nc-gui/components/dashboard/TreeView.vue @@ -28,8 +28,8 @@ import { useUIPermission, watchEffect, } from '#imports' -import MdiView from '~icons/mdi/eye-circle-outline' -import MdiTableLarge from '~icons/mdi/table-large' +import PhEyeThin from '~icons/ph/EyeThin' +import PhTableThin from '~icons/ph/TableThin' const { addTab, updateTab } = useTabs() @@ -145,10 +145,10 @@ watchEffect(() => { const icon = (table: TableType) => { if (table.type === 'table') { - return MdiTableLarge + return PhTableThin } if (table.type === 'view') { - return MdiView + return PhEyeThin } } @@ -1009,7 +1009,7 @@ const setIcon = async (icon: string, table: TableType) => {
diff --git a/packages/nc-gui/components/general/AddBaseButton.vue b/packages/nc-gui/components/general/AddBaseButton.vue index 4f43a7be1b..58f916562f 100644 --- a/packages/nc-gui/components/general/AddBaseButton.vue +++ b/packages/nc-gui/components/general/AddBaseButton.vue @@ -14,7 +14,7 @@ const toggleDialog = inject(ToggleDialogInj, () => {}) >
- +
{{ t('title.teamAndSettings') }}
diff --git a/packages/nc-gui/components/general/HelpAndSupport.vue b/packages/nc-gui/components/general/HelpAndSupport.vue index 106ecc506e..38025c31b4 100644 --- a/packages/nc-gui/components/general/HelpAndSupport.vue +++ b/packages/nc-gui/components/general/HelpAndSupport.vue @@ -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" > - +
{{ $t('title.APIsAndSupport') }}
diff --git a/packages/nc-gui/components/general/JoinCloud.vue b/packages/nc-gui/components/general/JoinCloud.vue index 5b8b8e929b..596e035156 100644 --- a/packages/nc-gui/components/general/JoinCloud.vue +++ b/packages/nc-gui/components/general/JoinCloud.vue @@ -5,7 +5,7 @@ href="https://docs.google.com/forms/d/e/1FAIpQLSfKLe8Rcrq0uo2_jM5W1kbVBbzDiQ3IvlP8Iov61FTekVAvzA/viewform?usp=pp_url" target="_blank" > - + Join NocoDB Cloud diff --git a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue index b045826452..6766bcd718 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue @@ -154,7 +154,7 @@ useMenuCloseOnEsc(open)
- + {{ $t('objects.fields') }} diff --git a/packages/nc-gui/utils/iconUtils.ts b/packages/nc-gui/utils/iconUtils.ts index 45dd6f219d..ee52a2e0cb 100644 --- a/packages/nc-gui/utils/iconUtils.ts +++ b/packages/nc-gui/utils/iconUtils.ts @@ -15,6 +15,8 @@ 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 PhEyeThin from '~icons/ph/EyeThin' +import PhTableThin from '~icons/ph/TableThin' export const iconMap = { 'mdi-check-bold': MdiCheckBold, @@ -31,8 +33,8 @@ export const iconMap = { 'mdi-thumb-up-outline': MdiThumbUpOutline, 'mdi-flag': MdiFlag, 'mdi-flag-outline': MdiFlagOutline, - 'mdi-table-large': MdiTableLarge, - 'mdi-eye-circle-outline': MdiEyeCircleOutline, + 'mdi-table-large': PhTableThin, + 'mdi-eye-circle-outline': PhEyeThin, 'mdi-account-group': MdiAccountGroup, } as const diff --git a/packages/nc-gui/utils/viewUtils.ts b/packages/nc-gui/utils/viewUtils.ts index d373f8378d..d609242057 100644 --- a/packages/nc-gui/utils/viewUtils.ts +++ b/packages/nc-gui/utils/viewUtils.ts @@ -8,14 +8,19 @@ import MdiGalleryIcon from '~icons/mdi/camera-image' import MdiKanbanIcon from '~icons/mdi/tablet-dashboard' import MdiEyeIcon from '~icons/mdi/eye-circle-outline' import type { Language } from '~/lib' +import PhTableThin from '~icons/ph/TableThin' +import PhImageThin from '~icons/ph/ImageThin' +import PhComputerTowerThin from '~icons/ph/ComputerTowerThin' +import PhSquareHalfBottomThin from '~icons/ph/SquareHalfBottomThin' +import PhEyeThin from '~icons/ph/EyeThin' export const viewIcons: Record = { - [ViewTypes.GRID]: { icon: MdiGridIcon, color: '#8f96f2' }, - [ViewTypes.FORM]: { icon: MdiFormIcon, color: themeV2Colors.pink['500'] }, + [ViewTypes.GRID]: { icon: PhTableThin, color: '#8f96f2' }, + [ViewTypes.FORM]: { icon: PhComputerTowerThin, color: themeV2Colors.pink['500'] }, calendar: { icon: MdiCalendarIcon, color: 'purple' }, - [ViewTypes.GALLERY]: { icon: MdiGalleryIcon, color: 'orange' }, - [ViewTypes.KANBAN]: { icon: MdiKanbanIcon, color: 'green' }, - view: { icon: MdiEyeIcon, color: 'blue' }, + [ViewTypes.GALLERY]: { icon: PhImageThin, color: 'orange' }, + [ViewTypes.KANBAN]: { icon: PhSquareHalfBottomThin, color: 'green' }, + view: { icon: PhEyeThin, color: 'blue' }, } export const viewTypeAlias: Record = {