mirror of
https://github.com/Lissy93/dashy.git
synced 2025-07-23 13:45:33 +02:00
Adds ability to use Font Awesome for icon image
This commit is contained in:
parent
56f2ba4155
commit
4c07382dd3
@ -1,15 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<img
|
<i v-if="determineImageType(icon) === 'font-awesome'" :class="icon"></i>
|
||||||
v-if="icon"
|
<img v-else-if="icon" :src="getIconPath(icon, url)" class="tile-icon" />
|
||||||
:src="getAppropriateImgPath(icon, url)"
|
|
||||||
class="tile-icon"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Item',
|
name: 'Icon',
|
||||||
props: {
|
props: {
|
||||||
icon: String,
|
icon: String,
|
||||||
url: String,
|
url: String,
|
||||||
@ -41,40 +38,28 @@ export default {
|
|||||||
}
|
}
|
||||||
return '';
|
return '';
|
||||||
},
|
},
|
||||||
/* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
|
getLocalImagePath(img) {
|
||||||
getAppropriateImgPath(img, url) {
|
|
||||||
const imageType = this.determineImageType(img);
|
|
||||||
switch (imageType) {
|
|
||||||
case 'url':
|
|
||||||
return img;
|
|
||||||
case 'img':
|
|
||||||
return `/img/item-icons/tile-icons/${img}`;
|
return `/img/item-icons/tile-icons/${img}`;
|
||||||
case 'favicon':
|
},
|
||||||
return this.getFavicon(url);
|
/* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
|
||||||
case 'svg':
|
getIconPath(img, url) {
|
||||||
return img;
|
switch (this.determineImageType(img)) {
|
||||||
case 'fas':
|
case 'url': return img;
|
||||||
return img;
|
case 'img': return this.getLocalImagePath(img);
|
||||||
default:
|
case 'favicon': return this.getFavicon(url);
|
||||||
return '';
|
case 'svg': return img;
|
||||||
|
default: return '';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
/* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
|
/* Checks if the icon is from a local image, remote URL, SVG or font-awesome */
|
||||||
determineImageType(img) {
|
determineImageType(img) {
|
||||||
let imgType = '';
|
let imgType = '';
|
||||||
if (this.isUrl(img)) {
|
if (this.isUrl(img)) imgType = 'url';
|
||||||
imgType = 'url';
|
else if (this.isImage(img)) imgType = 'img';
|
||||||
} else if (this.isImage(img)) {
|
else if (img.substr(4) === ('.svg' || '.SVG')) imgType = 'svg';
|
||||||
imgType = 'img';
|
else if (img.includes('fa-')) imgType = 'font-awesome';
|
||||||
// } else if (fileExtRegex.exec(img)[1] === 'svg') {
|
else if (img === 'favicon') imgType = 'favicon';
|
||||||
// imgType = 'svg';
|
else imgType = 'none';
|
||||||
} else if (img.includes('fas')) {
|
|
||||||
imgType = 'fas';
|
|
||||||
} else if (img === 'favicon') {
|
|
||||||
imgType = 'favicon';
|
|
||||||
} else {
|
|
||||||
imgType = 'none';
|
|
||||||
}
|
|
||||||
return imgType;
|
return imgType;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
@ -82,9 +67,12 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
|
.tile-icon {
|
||||||
.tile-icon {
|
|
||||||
width: 60px;
|
width: 60px;
|
||||||
filter: var(--item-icon-transform);
|
filter: var(--item-icon-transform);
|
||||||
}
|
}
|
||||||
|
i.fas, i.fab {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: currentColor;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
@ -2,23 +2,12 @@
|
|||||||
pageInfo:
|
pageInfo:
|
||||||
title: Hello World
|
title: Hello World
|
||||||
description: 'This is a demo'
|
description: 'This is a demo'
|
||||||
appConfig:
|
|
||||||
theme: 'default'
|
|
||||||
externalStyleSheet: 'https://bootswatch.com/4/solar/bootstrap.min.css'
|
|
||||||
cssThemes: ['hello', 'world']
|
|
||||||
enableFontAwesome: true
|
|
||||||
fontAwesomeKey: ''
|
|
||||||
hiddenComponents:
|
|
||||||
- footer: true
|
|
||||||
navigation: false
|
|
||||||
pageTitle: false
|
|
||||||
sections:
|
sections:
|
||||||
- name: Firewall
|
- name: Firewall
|
||||||
items:
|
items:
|
||||||
- title: OPNsense
|
- title: OPNsense
|
||||||
description: Firewall Central Management
|
description: Firewall Central Management
|
||||||
icon: networking/opnsense.png
|
icon: networking/opnsense.png
|
||||||
iconType: img
|
|
||||||
target: iframe
|
target: iframe
|
||||||
url: https://192.168.1.1
|
url: https://192.168.1.1
|
||||||
- title: NetData
|
- title: NetData
|
||||||
@ -28,27 +17,22 @@ sections:
|
|||||||
- title: MalTrail
|
- title: MalTrail
|
||||||
description: Malicious traffic detection system
|
description: Malicious traffic detection system
|
||||||
icon: networking/maltrail.png
|
icon: networking/maltrail.png
|
||||||
iconType: img
|
|
||||||
url: http://192.168.1.1:8338
|
url: http://192.168.1.1:8338
|
||||||
- title: Ntopng
|
- title: Ntopng
|
||||||
description: Network traffic probe and network use monitor
|
description: Network traffic probe and network use monitor
|
||||||
icon: networking/ntop.png
|
icon: networking/ntop.png
|
||||||
iconType: img
|
|
||||||
url: http://192.168.1.1:3001
|
url: http://192.168.1.1:3001
|
||||||
- title: Sensei
|
- title: Sensei
|
||||||
description: Additional data features
|
description: Additional data features
|
||||||
icon: networking/sensei.png
|
icon: networking/sensei.png
|
||||||
iconType: img
|
|
||||||
url: https://192.168.1.1/ui/sensei/
|
url: https://192.168.1.1/ui/sensei/
|
||||||
- title: Monit
|
- title: Monit
|
||||||
description: Status of firewall system alerts
|
description: Status of firewall system alerts
|
||||||
icon: networking/monit.png
|
icon: networking/monit.png
|
||||||
iconType: img
|
|
||||||
url: https://192.168.1.1/ui/monit/status
|
url: https://192.168.1.1/ui/monit/status
|
||||||
- title: Firewall Logs
|
- title: Firewall Logs
|
||||||
description: Real-time view of firewall data and logs
|
description: Real-time view of firewall data and logs
|
||||||
icon: networking/logs.png
|
icon: networking/logs.png
|
||||||
iconType: img
|
|
||||||
url: https://192.168.1.1/ui/diagnostics/firewall/log
|
url: https://192.168.1.1/ui/diagnostics/firewall/log
|
||||||
- title: WireGuard
|
- title: WireGuard
|
||||||
description: Manage WireGuard client and server on firewall
|
description: Manage WireGuard client and server on firewall
|
||||||
|
Loading…
x
Reference in New Issue
Block a user