Browse Source

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

pull/7807/head
Ramesh Mane 10 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[]
section?: string
is_default?: number | null
iconHue?: number
}
const props = defineProps<{
@ -385,20 +386,29 @@ defineExpose({
@click="fireAction(act)"
>
<div class="cmdk-action-content w-full">
<component
:is="(iconMap as any)[act.icon]"
v-if="act.icon && typeof act.icon === 'string' && (iconMap as any)[act.icon]"
class="cmdk-action-icon"
:class="{
'!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 v-if="title === 'Bases' || act.icon === 'project'">
<LazyGeneralBaseIconColorPicker :key="act.iconHue" :hue="act.iconHue" size="small" readonly>
<template #default>
<GeneralProjectIcon type="database" />
</template>
</LazyGeneralBaseIconColorPicker>
</template>
<template v-else>
<component
:is="(iconMap as any)[act.icon]"
v-if="act.icon && typeof act.icon === 'string' && (iconMap as any)[act.icon]"
class="cmdk-action-icon"
:class="{
'!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">
<template #title>
{{ act.title }}

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

@ -420,12 +420,12 @@ const projectDelete = () => {
</NcButton>
<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" />
<LazyGeneralBaseIconColorPicker
<GeneralBaseIconColorPicker
v-else
:key="parseProp(base.meta).iconHue"
:key="`${base.id}_${parseProp(base.meta).iconHue}`"
:hue="parseProp(base.meta).iconHue"
size="small"
:readonly="base?.type && base?.type !== 'database'"
@ -434,7 +434,7 @@ const projectDelete = () => {
<template #default>
<GeneralProjectIcon :type="base?.type" />
</template>
</LazyGeneralBaseIconColorPicker>
</GeneralBaseIconColorPicker>
</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 { Base } from '~/models';
import { TablesService } from '~/services/tables.service';
import { deserializeJSON } from '~/utils/serialize';
const viewTypeAlias: Record<number, string> = {
[ViewTypes.GRID]: 'grid',
@ -28,6 +29,7 @@ export class CommandPaletteService {
id: `p-${base.id}`,
title: base.title,
icon: 'project',
iconHue: deserializeJSON(base.meta)?.iconHue,
section: 'Bases',
scopePayload: {
scope: `p-${base.id}`,
@ -70,6 +72,7 @@ export class CommandPaletteService {
id: `p-${b.id}`,
title: b.title,
icon: 'project',
iconHue: deserializeJSON(b.meta)?.iconHue,
section: 'Bases',
});
}

Loading…
Cancel
Save