Browse Source

fix(nc-gui): update base icon in cmd k

pull/7807/head
Ramesh Mane 9 months ago
parent
commit
c0630b4000
  1. 38
      packages/nc-gui/components/cmd-k/index.vue
  2. 8
      packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue
  3. 3
      packages/nocodb/src/services/command-palette.service.ts

38
packages/nc-gui/components/cmd-k/index.vue

@ -17,6 +17,7 @@ interface CmdAction {
keywords?: string[] keywords?: string[]
section?: string section?: string
is_default?: number | null is_default?: number | null
iconHue?: number
} }
const props = defineProps<{ const props = defineProps<{
@ -385,20 +386,29 @@ defineExpose({
@click="fireAction(act)" @click="fireAction(act)"
> >
<div class="cmdk-action-content w-full"> <div class="cmdk-action-content w-full">
<component <template v-if="title === 'Bases' || act.icon === 'project'">
:is="(iconMap as any)[act.icon]" <LazyGeneralBaseIconColorPicker :key="act.iconHue" :hue="act.iconHue" size="small" readonly>
v-if="act.icon && typeof act.icon === 'string' && (iconMap as any)[act.icon]" <template #default>
class="cmdk-action-icon" <GeneralProjectIcon type="database" />
:class="{ </template>
'!text-blue-500': act.icon === 'grid', </LazyGeneralBaseIconColorPicker>
'!text-purple-500': act.icon === 'form', </template>
'!text-[#FF9052]': act.icon === 'kanban', <template v-else>
'!text-pink-500': act.icon === 'gallery', <component
}" :is="(iconMap as any)[act.icon]"
/> v-if="act.icon && typeof act.icon === 'string' && (iconMap as any)[act.icon]"
<div v-else-if="act.icon" class="cmdk-action-icon max-w-4 flex items-center justify-center"> class="cmdk-action-icon"
<LazyGeneralEmojiPicker class="!text-sm !h-4 !w-4" size="small" :emoji="act.icon" readonly /> :class="{
</div> '!text-blue-500': act.icon === 'grid',
'!text-purple-500': act.icon === 'form',
'!text-[#FF9052]': act.icon === 'kanban',
'!text-pink-500': act.icon === 'gallery',
}"
/>
<div v-else-if="act.icon" class="cmdk-action-icon max-w-4 flex items-center justify-center">
<LazyGeneralEmojiPicker class="!text-sm !h-4 !w-4" size="small" :emoji="act.icon" readonly />
</div>
</template>
<a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg"> <a-tooltip overlay-class-name="!px-2 !py-1 !rounded-lg">
<template #title> <template #title>
{{ act.title }} {{ act.title }}

8
packages/nc-gui/components/dashboard/TreeView/ProjectNode.vue

@ -420,12 +420,12 @@ const projectDelete = () => {
</NcButton> </NcButton>
<div class="flex items-center mr-1" @click="onProjectClick(base)"> <div class="flex items-center mr-1" @click="onProjectClick(base)">
<div v-e="['c:base:emojiSelect']" class="flex items-center select-none w-6 h-full"> <div v-e="['c:base:iconColorChange']" class="flex items-center select-none w-6 h-full">
<a-spin v-if="base.isLoading" class="!ml-1.25 !flex !flex-row !items-center !my-0.5 w-8" :indicator="indicator" /> <a-spin v-if="base.isLoading" class="!ml-1.25 !flex !flex-row !items-center !my-0.5 w-8" :indicator="indicator" />
<LazyGeneralBaseIconColorPicker <GeneralBaseIconColorPicker
v-else v-else
:key="parseProp(base.meta).iconHue" :key="`${base.id}_${parseProp(base.meta).iconHue}`"
:hue="parseProp(base.meta).iconHue" :hue="parseProp(base.meta).iconHue"
size="small" size="small"
:readonly="base?.type && base?.type !== 'database'" :readonly="base?.type && base?.type !== 'database'"
@ -434,7 +434,7 @@ const projectDelete = () => {
<template #default> <template #default>
<GeneralProjectIcon :type="base?.type" /> <GeneralProjectIcon :type="base?.type" />
</template> </template>
</LazyGeneralBaseIconColorPicker> </GeneralBaseIconColorPicker>
</div> </div>
</div> </div>

3
packages/nocodb/src/services/command-palette.service.ts

@ -2,6 +2,7 @@ import { Injectable } from '@nestjs/common';
import { type UserType, ViewTypes } from 'nocodb-sdk'; import { type UserType, ViewTypes } from 'nocodb-sdk';
import { Base } from '~/models'; import { Base } from '~/models';
import { TablesService } from '~/services/tables.service'; import { TablesService } from '~/services/tables.service';
import { deserializeJSON } from '~/utils/serialize';
const viewTypeAlias: Record<number, string> = { const viewTypeAlias: Record<number, string> = {
[ViewTypes.GRID]: 'grid', [ViewTypes.GRID]: 'grid',
@ -28,6 +29,7 @@ export class CommandPaletteService {
id: `p-${base.id}`, id: `p-${base.id}`,
title: base.title, title: base.title,
icon: 'project', icon: 'project',
iconHue: deserializeJSON(base.meta)?.iconHue,
section: 'Bases', section: 'Bases',
scopePayload: { scopePayload: {
scope: `p-${base.id}`, scope: `p-${base.id}`,
@ -70,6 +72,7 @@ export class CommandPaletteService {
id: `p-${b.id}`, id: `p-${b.id}`,
title: b.title, title: b.title,
icon: 'project', icon: 'project',
iconHue: deserializeJSON(b.meta)?.iconHue,
section: 'Bases', section: 'Bases',
}); });
} }

Loading…
Cancel
Save