mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-11-10 06:34:05 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(editor): Fix node icon in node creator header (#9782)

Browse source
This commit is contained in:
Elias Meire 2024-06-18 10:05:18 +02:00 committed by GitHub
parent 08c6e9b571
commit b7d356f49c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 26 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
packages/editor-ui/src/components/Node/NodeCreator/Modes/NodesMode.vue
View file

@ -24,6 +24,8 @@ import CategorizedItemsRenderer from '../Renderers/CategorizedItemsRenderer.vue'
import NoResults from '../Panel/NoResults.vue'; import NoResults from '../Panel/NoResults.vue';
import { useI18n } from '@/composables/useI18n'; import { useI18n } from '@/composables/useI18n';
import { useTelemetry } from '@/composables/useTelemetry'; import { useTelemetry } from '@/composables/useTelemetry';
import { getNodeIcon, getNodeIconColor, getNodeIconUrl } from '@/utils/nodeTypesUtils';
import { useUIStore } from '@/stores/ui.store';
export interface Props { export interface Props {
rootView: 'trigger' | 'action'; rootView: 'trigger' | 'action';
@ -35,6 +37,8 @@ const emit = defineEmits({
const i18n = useI18n(); const i18n = useI18n();
const telemetry = useTelemetry(); const telemetry = useTelemetry();
const uiStore = useUIStore();
const rootStore = useRootStore();
const { mergedNodes, actions } = useNodeCreatorStore(); const { mergedNodes, actions } = useNodeCreatorStore();
const { baseUrl } = useRootStore(); const { baseUrl } = useRootStore();
@ -86,11 +90,10 @@ function onSelected(item: INodeCreateElement) {
return; return;
} }
const icon = item.properties.iconUrl const iconUrl = getNodeIconUrl(item.properties, uiStore.appliedTheme);
? `${baseUrl}${item.properties.iconUrl}` const icon = iconUrl
: typeof item.properties.icon === 'string' ? rootStore.baseUrl + iconUrl
? item.properties.icon?.split(':')[1] : getNodeIcon(item.properties, uiStore.appliedTheme)?.split(':')[1];
: undefined;
const transformedActions = nodeActions?.map((a) => const transformedActions = nodeActions?.map((a) =>
transformNodeType(a, item.properties.displayName, 'action'), transformNodeType(a, item.properties.displayName, 'action'),
@ -100,9 +103,9 @@ function onSelected(item: INodeCreateElement) {
subcategory: item.properties.displayName, subcategory: item.properties.displayName,
title: item.properties.displayName, title: item.properties.displayName,
nodeIcon: { nodeIcon: {
color: item.properties.defaults?.color?.toString(), color: getNodeIconColor(item.properties),
icon, icon,
iconType: item.properties.iconUrl ? 'file' : 'icon', iconType: iconUrl ? 'file' : 'icon',
}, },
rootView: activeViewStack.value.rootView, rootView: activeViewStack.value.rootView,

16
packages/editor-ui/src/components/NodeIcon.vue
View file

@ -19,7 +19,12 @@
import type { IVersionNode, SimplifiedNodeType } from '@/Interface'; import type { IVersionNode, SimplifiedNodeType } from '@/Interface';
import { useRootStore } from '@/stores/n8nRoot.store'; import { useRootStore } from '@/stores/n8nRoot.store';
import { useUIStore } from '@/stores/ui.store'; import { useUIStore } from '@/stores/ui.store';
import { getBadgeIconUrl, getNodeIcon, getNodeIconUrl } from '@/utils/nodeTypesUtils'; import {
getBadgeIconUrl,
getNodeIcon,
getNodeIconColor,
getNodeIconUrl,
} from '@/utils/nodeTypesUtils';
import type { INodeTypeDescription } from 'n8n-workflow'; import type { INodeTypeDescription } from 'n8n-workflow';
import { computed } from 'vue'; import { computed } from 'vue';
@ -75,14 +80,7 @@ const iconType = computed(() => {
return 'unknown'; return 'unknown';
}); });
const color = computed(() => { const color = computed(() => getNodeIconColor(props.nodeType) ?? props.colorDefault ?? '');
const nodeType = props.nodeType;
if (nodeType && 'iconColor' in nodeType && nodeType.iconColor) {
return `var(--color-node-icon-${nodeType.iconColor})`;
}
return nodeType?.defaults?.color?.toString() ?? props.colorDefault ?? '';
});
const iconSource = computed<NodeIconSource>(() => { const iconSource = computed<NodeIconSource>(() => {
const nodeType = props.nodeType; const nodeType = props.nodeType;

9
packages/editor-ui/src/utils/nodeTypesUtils.ts
View file

@ -471,3 +471,12 @@ export const getBadgeIconUrl = (
): string | null => { ): string | null => {
return getThemedValue(nodeType.badgeIconUrl, theme); return getThemedValue(nodeType.badgeIconUrl, theme);
}; };
export const getNodeIconColor = (
nodeType?: INodeTypeDescription | SimplifiedNodeType | IVersionNode | null,
) => {
if (nodeType && 'iconColor' in nodeType && nodeType.iconColor) {
return `var(--color-node-icon-${nodeType.iconColor})`;
}
return nodeType?.defaults?.color?.toString();
};