mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add icon to nodes om command bar

Browse source
This commit is contained in:
Elias Meire 2024-10-30 14:56:27 +01:00
parent 1487b7f58d
commit 3c628931e3
No known key found for this signature in database
1 changed files with 29 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
packages/editor-ui/src/views/NodeView.v2.vue
View file

@ -31,6 +31,7 @@ import type {
IWorkflowDb,
IWorkflowTemplate,
NodeCreatorOpenSource,
SimplifiedNodeType,
ToggleNodeCreatorOptions,
XYPosition,
} from '@/Interface';
@ -111,6 +112,7 @@ import { isResourceLocatorValue, isValidNodeConnectionType } from '@/utils/typeG
import 'ninja-keys';
import { useActionsGenerator } from '@/components/Node/NodeCreator/composables/useActionsGeneration';
import { get } from 'lodash-es';
import { getNodeIcon, getNodeIconUrl } from '@/utils/nodeTypesUtils';
const LazyNodeCreation = defineAsyncComponent(
async () => await import('@/components/Node/NodeCreation.vue'),
@ -1637,6 +1639,30 @@ const getAllNodesCommands = computed<NinjaKeysCommand[]>(() => {
});
});
function getIconSource(nodeType: SimplifiedNodeType) {
const baseUrl = rootStore.baseUrl;
const iconUrl = getNodeIconUrl(nodeType, uiStore.appliedTheme);
if (iconUrl) {
return { path: baseUrl + iconUrl };
}
// Otherwise, extract it from icon prop
if (nodeType.icon) {
const icon = getNodeIcon(nodeType, uiStore.appliedTheme);
if (icon) {
const [type, path] = icon.split(':');
if (type === 'file') {
throw new Error(`Unexpected icon: ${icon}`);
}
return { icon: path };
}
}
return {};
}
const addNodeCommand = computed<NinjaKeysCommand[]>(() => {
const httpOnlyCredentials = useCredentialsStore().httpOnlyCredentialTypes;
const nodeTypes = useNodeTypesStore().visibleNodeTypes;
@ -1645,9 +1671,12 @@ const addNodeCommand = computed<NinjaKeysCommand[]>(() => {
return mergedNodes.map((node) => {
const { name, displayName } = node;
const src = getIconSource(node);
return {
id: name,
title: `Add ${displayName} Node`,
icon: `<img src="${src?.path}" style="width: 24px;object-fit: contain;height: 24px;" />`,
parent: 'Add node',
handler: async () => {
await addNodes([{ type: name }]);