Improve support for svg-icons

This commit is contained in:
Jan Oberhauser 2020-10-03 14:10:08 +02:00
parent ada65ebcbb
commit 1a80a6afed

View file

@ -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;
}