From 80470076a9abbd36eba5f6426460d9376642cd09 Mon Sep 17 00:00:00 2001 From: Pranav C Date: Mon, 20 Feb 2023 11:22:20 +0530 Subject: [PATCH 01/24] feat(gui): replace icons with light icon Signed-off-by: Pranav C --- 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 ++++++++++----- 7 files changed, 23 insertions(+), 16 deletions(-) diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue index bf4ffb4b61..b7f69a4bdc 100644 --- a/packages/nc-gui/components/dashboard/TreeView.vue +++ b/packages/nc-gui/components/dashboard/TreeView.vue @@ -30,8 +30,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 { isMobileMode } = useGlobal() @@ -152,10 +152,10 @@ watchEffect(() => { const icon = (table: TableType) => { if (table.type === 'table') { - return MdiTableLarge + return PhTableThin } if (table.type === 'view') { - return MdiView + return PhEyeThin } } @@ -1028,7 +1028,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 9a522c6907..6861b990d9 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 2595788282..2f24546e10 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/FieldsMenu.vue @@ -156,7 +156,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 d70ee0d4b8..5fda4fe6f3 100644 --- a/packages/nc-gui/utils/viewUtils.ts +++ b/packages/nc-gui/utils/viewUtils.ts @@ -9,15 +9,20 @@ import MdiKanbanIcon from '~icons/mdi/tablet-dashboard' import MdiMapIcon from '~icons/mdi/map-outline' 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.GALLERY]: { icon: PhImageThin, color: 'orange' }, [ViewTypes.MAP]: { icon: MdiMapIcon, color: 'blue' }, - [ViewTypes.KANBAN]: { icon: MdiKanbanIcon, color: 'green' }, - view: { icon: MdiEyeIcon, color: 'blue' }, + [ViewTypes.KANBAN]: { icon: PhSquareHalfBottomThin, color: 'green' }, + view: { icon: PhEyeThin, color: 'blue' }, } export const viewTypeAlias: Record = { From f8d798b86611cc91e9f368d16bdff8ebc1010f19 Mon Sep 17 00:00:00 2001 From: Pranav C Date: Wed, 22 Mar 2023 19:17:32 +0530 Subject: [PATCH 02/24] refactor: update icons in dashboard (WIP) Signed-off-by: Pranav C --- packages/nc-gui/components.d.ts | 24 ++++++++++ .../nc-gui/components/dashboard/TreeView.vue | 17 +++---- .../nc-gui/components/general/PreviewAs.vue | 6 +-- .../components/smartsheet/header/CellIcon.ts | 46 +++++++++---------- .../components/smartsheet/toolbar/AddRow.vue | 3 +- .../smartsheet/toolbar/ColumnFilterMenu.vue | 2 +- .../smartsheet/toolbar/ExportSubActions.vue | 7 ++- .../smartsheet/toolbar/FieldsMenu.vue | 2 +- .../smartsheet/toolbar/LockType.vue | 7 +-- .../components/smartsheet/toolbar/Reload.vue | 2 +- .../smartsheet/toolbar/RowHeight.vue | 3 +- .../smartsheet/toolbar/SearchData.vue | 5 +- .../smartsheet/toolbar/ShareView.vue | 2 +- .../smartsheet/toolbar/SortListMenu.vue | 2 +- .../smartsheet/toolbar/ViewActions.vue | 24 +++++----- packages/nc-gui/package-lock.json | 34 ++++++++++---- packages/nc-gui/package.json | 3 +- .../pages/[projectType]/[projectId]/index.vue | 29 ++++++------ .../[projectType]/[projectId]/index/index.vue | 2 +- packages/nc-gui/utils/iconUtils.ts | 31 ++++++++++++- 20 files changed, 166 insertions(+), 85 deletions(-) diff --git a/packages/nc-gui/components.d.ts b/packages/nc-gui/components.d.ts index 7c5b61f85e..d5f1e1f92d 100644 --- a/packages/nc-gui/components.d.ts +++ b/packages/nc-gui/components.d.ts @@ -258,10 +258,34 @@ 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'] + 'Ph:clockClockwiseThin': typeof import('~icons/ph/clock-clockwise-thin')['default'] + PhArrowClockwiseThin: typeof import('~icons/ph/arrow-clockwise-thin')['default'] + PhAtThin: typeof import('~icons/ph/at-thin')['default'] + PhBracketsAngleThin: typeof import('~icons/ph/brackets-angle-thin')['default'] + PhBracketsCurlyThin: typeof import('~icons/ph/brackets-curly-thin')['default'] + PhCaretDoubleLeftThin: typeof import('~icons/ph/caret-double-left-thin')['default'] + PhCaretDoubleRightThin: typeof import('~icons/ph/caret-double-right-thin')['default'] + PhCaretDoubleThin: typeof import('~icons/ph/caret-double-thin')['default'] + PhCaretDownThin: typeof import('~icons/ph/caret-down-thin')['default'] PhChatTextThin: typeof import('~icons/ph/chat-text-thin')['default'] + PhClockClockwiseThin: typeof import('~icons/ph/clock-clockwise-thin')['default'] PhCloudLightningDuotone: typeof import('~icons/ph/cloud-lightning-duotone')['default'] PhCloudLightningThin: typeof import('~icons/ph/cloud-lightning-thin')['default'] + PhEyeThin: typeof import('~icons/ph/eye-thin')['default'] PhFileCsv: typeof import('~icons/ph/file-csv')['default'] + PhFolderSimpleThin: typeof import('~icons/ph/folder-simple-thin')['default'] + PhFolderThin: typeof import('~icons/ph/folder-thin')['default'] + PhFunnelThin: typeof import('~icons/ph/funnel-thin')['default'] + PhlistBulletsThin: typeof import('~icons/ph/list-bullets-thin')['default'] + PhListBulletsThin: typeof import('~icons/ph/list-bullets-thin')['default'] + PhMagnifyingGlassThin: typeof import('~icons/ph/magnifying-glass-thin')['default'] + PhPlusThin: typeof import('~icons/ph/plus-thin')['default'] + PhPresentationThin: typeof import('~icons/ph/presentation-thin')['default'] + PhShareThin: typeof import('~icons/ph/share-thin')['default'] + PhSignOutThin: typeof import('~icons/ph/sign-out-thin')['default'] + PhSortAscendingThin: typeof import('~icons/ph/sort-ascending-thin')['default'] + PhSplitVerticalThin: typeof import('~icons/ph/split-vertical-thin')['default'] + PhTranslateThin: typeof import('~icons/ph/translate-thin')['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'] diff --git a/packages/nc-gui/components/dashboard/TreeView.vue b/packages/nc-gui/components/dashboard/TreeView.vue index b7f69a4bdc..519a7df0a1 100644 --- a/packages/nc-gui/components/dashboard/TreeView.vue +++ b/packages/nc-gui/components/dashboard/TreeView.vue @@ -32,6 +32,7 @@ import { } from '#imports' import PhEyeThin from '~icons/ph/EyeThin' import PhTableThin from '~icons/ph/TableThin' +import { iconMap } from '~/utils'; const { isMobileMode } = useGlobal() @@ -374,7 +375,7 @@ const setIcon = async (icon: string, table: TableType) => { - +
{
- + @click="openTableCreateDialog(bases[0].id)"> + {{ $t('tooltip.addTable') }} @@ -724,8 +724,8 @@ const setIcon = async (icon: string, table: TableType) => { v-if="index === '0' && isUIAllowed('table-create')" class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none" @click="openTableCreateDialog(bases[0].id)" - > - + > + {{ $t('tooltip.addTable') @@ -811,7 +811,8 @@ const setIcon = async (icon: string, table: TableType) => { class="group flex items-center gap-2 pl-8 pr-3 py-2 text-primary/70 hover:(text-primary/100) cursor-pointer select-none" @click="openTableCreateDialog(base.id)" > - + {{ $t('tooltip.addTable') @@ -1028,7 +1029,7 @@ const setIcon = async (icon: string, table: TableType) => {
diff --git a/packages/nc-gui/components/general/PreviewAs.vue b/packages/nc-gui/components/general/PreviewAs.vue index 4faf78f335..fd43bc0bd8 100644 --- a/packages/nc-gui/components/general/PreviewAs.vue +++ b/packages/nc-gui/components/general/PreviewAs.vue @@ -2,9 +2,9 @@ import { onUnmounted, ref, useEventListener, useGlobal, useI18n, useNuxtApp, watch } from '#imports' import MdiAccountStar from '~icons/mdi/account-star' import MdiAccountHardHat from '~icons/mdi/account-hard-hat' -import MdiAccountEdit from '~icons/mdi/account-edit' -import MdiEyeOutline from '~icons/mdi/eye-outline' -import MdiCommentAccountOutline from '~icons/mdi/comment-account-outline' +import MdiAccountEdit from '~icons/ph/pencil-circle-thin' +import MdiEyeOutline from '~icons/ph/eye-thin' +import MdiCommentAccountOutline from '~icons/ph/chat-teardrop-text-thin' import { ProjectRole } from '~/lib' const { float } = defineProps<{ float?: boolean }>() diff --git a/packages/nc-gui/components/smartsheet/header/CellIcon.ts b/packages/nc-gui/components/smartsheet/header/CellIcon.ts index 81eb67604b..e747447757 100644 --- a/packages/nc-gui/components/smartsheet/header/CellIcon.ts +++ b/packages/nc-gui/components/smartsheet/header/CellIcon.ts @@ -34,29 +34,29 @@ import { toRef, useProject, } from '#imports' -import FilePhoneIcon from '~icons/mdi/file-phone' -import KeyIcon from '~icons/mdi/key-variant' -import JSONIcon from '~icons/mdi/code-json' -import ClockIcon from '~icons/mdi/clock-time-five' -import WebIcon from '~icons/mdi/web' -import TextAreaIcon from '~icons/mdi/card-text-outline' -import StringIcon from '~icons/mdi/alpha-a-box-outline' -import BooleanIcon from '~icons/mdi/check-box-outline' -import CalendarIcon from '~icons/mdi/calendar' -import SingleSelectIcon from '~icons/mdi/arrow-down-drop-circle' -import MultiSelectIcon from '~icons/mdi/format-list-bulleted-square' -import DatetimeIcon from '~icons/mdi/calendar-clock' -import GeoDataIcon from '~icons/mdi/map-marker' -import RatingIcon from '~icons/mdi/star' -import GenericIcon from '~icons/mdi/square-rounded' -import NumericIcon from '~icons/mdi/numeric' -import AttachmentIcon from '~icons/mdi/image-multiple-outline' -import EmailIcon from '~icons/mdi/email' -import CurrencyIcon from '~icons/mdi/currency-usd-circle-outline' -import PercentIcon from '~icons/mdi/percent-outline' +import FilePhoneIcon from '~icons/ph/text-align-left-thin' +import KeyIcon from '~icons/ph/text-align-left-thin' +import JSONIcon from '~icons/ph/text-align-left-thin' +import ClockIcon from '~icons/ph/alarm-thin' +import WebIcon from '~icons/ph/planet-thin' +import TextAreaIcon from '~icons/ph/text-align-left-thin' +import StringIcon from '~icons/ph/text-aa-thin' +import BooleanIcon from '~icons/ph/check-square-thin' +import CalendarIcon from '~icons/ph/calendar-blank-thin' +import SingleSelectIcon from '~icons/ph/caret-circle-down-thin' +import MultiSelectIcon from '~icons/ph/list-bullets-thin' +import DatetimeIcon from '~icons/ph/calendar-thin' +import GeoDataIcon from '~icons/ph/map-pin-thin' +import RatingIcon from '~icons/ph/star-thin' +import GenericIcon from '~icons/ph/square-thin' +import NumericIcon from '~icons/ph/number-square-one-thin' +import AttachmentIcon from '~icons/ph/image-thin' +import EmailIcon from '~icons/ph/envelope-thin' +import CurrencyIcon from '~icons/ph/currency-circle-dollar-thin' +import PercentIcon from '~icons/ph/percent-thin' import DecimalIcon from '~icons/mdi/decimal' -import SpecificDBTypeIcon from '~icons/mdi/database-settings' -import DurationIcon from '~icons/mdi/timer-outline' +import SpecificDBTypeIcon from '~icons/ph/database-thin' +import DurationIcon from '~icons/ph/clock-clockwise-thin' const renderIcon = (column: ColumnType, abstractType: any) => { if (isPrimaryKey(column)) { @@ -133,7 +133,7 @@ export default defineComponent({ return () => { if (!column.value) return null - return h(renderIcon(column.value, abstractType.value), { class: 'text-grey mx-1 !text-xs' }) + return h(renderIcon(column.value, abstractType.value), { class: 'text-black mx-1', style:{ fontSize: '16px'} }) } }, }) diff --git a/packages/nc-gui/components/smartsheet/toolbar/AddRow.vue b/packages/nc-gui/components/smartsheet/toolbar/AddRow.vue index 33f6279dba..e8b37ad419 100644 --- a/packages/nc-gui/components/smartsheet/toolbar/AddRow.vue +++ b/packages/nc-gui/components/smartsheet/toolbar/AddRow.vue @@ -13,12 +13,13 @@ const onClick = () => {
- +
@@ -850,7 +860,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
- +
@@ -863,7 +873,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
- +
@@ -876,7 +886,7 @@ function isSelectDisabled(uidt: string, disableSelect = false) {
- +
diff --git a/packages/nc-gui/components/virtual-cell/components/ItemChip.vue b/packages/nc-gui/components/virtual-cell/components/ItemChip.vue index 6665dd9187..1202bd19a3 100644 --- a/packages/nc-gui/components/virtual-cell/components/ItemChip.vue +++ b/packages/nc-gui/components/virtual-cell/components/ItemChip.vue @@ -4,6 +4,7 @@ import { IsFormInj, IsLockedInj, ReadonlyInj, + iconMap, inject, ref, useExpandedFormDetached, @@ -62,7 +63,11 @@ export default { {{ value }}
- +
diff --git a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue index 474f490deb..a06d8ed36f 100644 --- a/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue +++ b/packages/nc-gui/components/virtual-cell/components/ListChildItems.vue @@ -130,7 +130,7 @@ const onClick = (row: Row) => { @click="emit('attachRecord')" >
- + Link to ' {{ relatedTableMeta.title }}' @@ -153,7 +153,8 @@ const onClick = (row: Row) => {
- {
- + {{ $t('general.save') }}
@@ -520,9 +521,9 @@ onMounted(async () => { >
- + - + diff --git a/packages/nc-gui/layouts/base.vue b/packages/nc-gui/layouts/base.vue index 61465fe8da..16f41326e9 100644 --- a/packages/nc-gui/layouts/base.vue +++ b/packages/nc-gui/layouts/base.vue @@ -89,7 +89,7 @@ hooks.hook('page:finish', () => { -   +  
Account
{{ email }}
@@ -115,7 +115,7 @@ hooks.hook('page:finish', () => {
-   +   {{ $t('general.signOut') }} diff --git a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue index f8d23b6dc6..4ccd03274e 100644 --- a/packages/nc-gui/pages/[projectType]/[projectId]/index.vue +++ b/packages/nc-gui/pages/[projectType]/[projectId]/index.vue @@ -316,8 +316,7 @@ useEventListener(document, 'keydown', async (e: KeyboardEvent) => {
{{ project.title }}
- - +