feat: Add support for dark mode node icons and colors (#9412)

Co-authored-by: Giulio Andreini <g.andreini@gmail.com>
This commit is contained in:
Elias Meire
2024-06-06 13:34:30 +02:00
committed by GitHub
parent 68e856d155
commit 600013a1ab
294 changed files with 1421 additions and 519 deletions

View File

@@ -15,6 +15,8 @@ import { useRootStore } from '@/stores/n8nRoot.store';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import type { ICredentialType, INodeTypeDescription } from 'n8n-workflow';
import NodeIcon from '@/components/NodeIcon.vue';
import { getThemedValue } from '@/utils/nodeTypesUtils';
import { useUIStore } from '@/stores/ui.store';
export default defineComponent({
components: {
@@ -26,22 +28,28 @@ export default defineComponent({
},
},
computed: {
...mapStores(useCredentialsStore, useNodeTypesStore, useRootStore),
...mapStores(useCredentialsStore, useNodeTypesStore, useRootStore, useUIStore),
credentialWithIcon(): ICredentialType | null {
return this.credentialTypeName ? this.getCredentialWithIcon(this.credentialTypeName) : null;
},
filePath(): string | null {
const iconUrl = this.credentialWithIcon?.iconUrl;
if (!iconUrl) {
const themeIconUrl = getThemedValue(
this.credentialWithIcon?.iconUrl,
this.uiStore.appliedTheme,
);
if (!themeIconUrl) {
return null;
}
return this.rootStore.getBaseUrl + iconUrl;
return this.rootStore.getBaseUrl + themeIconUrl;
},
relevantNode(): INodeTypeDescription | null {
if (this.credentialWithIcon?.icon?.startsWith('node:')) {
const nodeType = this.credentialWithIcon.icon.replace('node:', '');
const icon = this.credentialWithIcon?.icon;
if (typeof icon === 'string' && icon.startsWith('node:')) {
const nodeType = icon.replace('node:', '');
return this.nodeTypesStore.getNodeType(nodeType);
}
if (!this.credentialTypeName) {