[UI] Added icons to plugins and backends.

This commit is contained in:
Fabio Manganiello 2024-02-26 17:39:19 +01:00
parent 2d8c34522f
commit e7c1e2f44e
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
3 changed files with 84 additions and 4 deletions

View file

@ -0,0 +1,57 @@
<template>
<div class="extension-icon" :style="{ width: `${size}`, height: `${size}` }">
<a :href="docsUrl" target="_blank">
<img :src="iconUrl" :alt="extensionName" :title="extensionName" />
</a>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
required: true,
},
size: {
type: String,
default: '1.75em',
},
},
computed: {
iconUrl() {
return `https://static.platypush.tech/icons/${this.extensionName}-64.png`
},
extensionType() {
return this.name.split('.')[0] == 'backend' ? 'backend' : 'plugin'
},
extensionName() {
const words = this.name.split('.')
if (words.length < 1)
return this.name
if (words[0] == 'backend')
words.shift()
return words.join('.')
},
docsUrl() {
return `https://docs.platypush.tech/platypush/${this.extensionType}s/${this.extensionName}.html`
},
},
}
</script>
<style lang="scss" scoped>
.extension-icon {
img {
width: 100%;
height: 100%;
}
}
</style>

View file

@ -3,8 +3,8 @@
<header>
<h2>
<a class="title" :href="extension.doc_url" target="_blank">
<i class="icon fas fa-book" />
{{ extension.name }}
<ExtensionIcon :name="extension.name" size="2em" />
<span class="name" v-text="extension.name" />
</a>
</h2>
</header>
@ -46,12 +46,17 @@
</template>
<script>
import ExtensionIcon from "@/components/elements/ExtensionIcon"
import Utils from "@/Utils"
import { bus } from "@/bus";
export default {
name: "Doc",
mixins: [Utils],
components: {
ExtensionIcon,
},
props: {
extension: {
type: Object,
@ -132,7 +137,7 @@ export default {
</script>
<style lang="scss" scoped>
$header-height: 3em;
$header-height: 3.5em;
section {
height: 100%;
@ -147,6 +152,15 @@ section {
padding: 0;
font-size: 1.25em;
}
.title {
display: flex;
align-items: center;
.name {
margin-left: 0.5em;
}
}
}
article {

View file

@ -20,6 +20,7 @@
:class="{selected: name === selectedExtension}"
:data-name="name"
@click="onClick(name, false)">
<ExtensionIcon :name="name" size="1.75em" />
<span class="name">{{ extensions[name].name }}</span>
<span class="enabled icon" title="Enabled" v-if="enabledExtensions[name]">
<i class="enabled icon fas fa-circle-check" v-if="enabledExtensions[name]" />
@ -47,9 +48,10 @@
</template>
<script>
import Extension from "./Extension"
import ExtensionIcon from "@/components/elements/ExtensionIcon"
import Loading from "@/components/Loading"
import Utils from "@/Utils"
import Extension from "./Extension"
import { bus } from "@/bus"
export default {
@ -57,6 +59,7 @@ export default {
mixins: [Utils],
components: {
Extension,
ExtensionIcon,
Loading,
},
@ -254,6 +257,12 @@ $header-height: 3.25em;
display: flex;
flex-direction: column;
:deep(.item) {
.extension-icon {
margin-right: 0.5em;
}
}
.item {
width: 100%;
display: flex;