mirror of
https://github.com/n8n-io/n8n.git
synced 2025-01-12 13:27:31 -08:00
⚡ Improve support for svg-icons
This commit is contained in:
parent
ada65ebcbb
commit
1a80a6afed
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="node-icon-wrapper" :style="iconStyleData">
|
||||
<div class="node-icon-wrapper" :style="iconStyleData" :class="{full: isSvgIcon}">
|
||||
<div v-if="nodeIconData !== null" class="icon">
|
||||
<img :src="nodeIconData.path" style="width: 100%; height: 100%;" v-if="nodeIconData.type === 'file'"/>
|
||||
<font-awesome-icon :icon="nodeIconData.path" v-else-if="nodeIconData.type === 'fa'" />
|
||||
|
@ -17,6 +17,7 @@ import Vue from 'vue';
|
|||
interface NodeIconData {
|
||||
type: string;
|
||||
path: string;
|
||||
fileExtension?: string;
|
||||
}
|
||||
|
||||
export default Vue.extend({
|
||||
|
@ -41,6 +42,12 @@ export default Vue.extend({
|
|||
'border-radius': Math.ceil(size / 2) + 'px',
|
||||
};
|
||||
},
|
||||
isSvgIcon (): boolean {
|
||||
if (this.nodeIconData && this.nodeIconData.type === 'file' && this.nodeIconData.fileExtension === 'svg') {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
nodeIconData (): null | NodeIconData {
|
||||
if (this.nodeType === null) {
|
||||
return null;
|
||||
|
@ -51,13 +58,14 @@ export default Vue.extend({
|
|||
if (this.nodeType.icon) {
|
||||
let type, path;
|
||||
[type, path] = this.nodeType.icon.split(':');
|
||||
const returnData = {
|
||||
const returnData: NodeIconData = {
|
||||
type,
|
||||
path,
|
||||
};
|
||||
|
||||
if (type === 'file') {
|
||||
returnData.path = restUrl + '/node-icon/' + this.nodeType.name;
|
||||
returnData.fileExtension = path.split('.').slice(-1).join();
|
||||
}
|
||||
|
||||
return returnData;
|
||||
|
@ -83,6 +91,10 @@ export default Vue.extend({
|
|||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
|
||||
&.full .icon {
|
||||
margin: 0.24em;
|
||||
}
|
||||
|
||||
.node-icon-placeholder {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue