From e7c1e2f44e2fc0318c40ccd37c11ccf339c3ee1d Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Mon, 26 Feb 2024 17:39:19 +0100
Subject: [PATCH] [UI] Added icons to plugins and backends.

---
 .../src/components/elements/ExtensionIcon.vue | 57 +++++++++++++++++++
 .../src/components/panels/Extensions/Doc.vue  | 20 ++++++-
 .../components/panels/Extensions/Index.vue    | 11 +++-
 3 files changed, 84 insertions(+), 4 deletions(-)
 create mode 100644 platypush/backend/http/webapp/src/components/elements/ExtensionIcon.vue

diff --git a/platypush/backend/http/webapp/src/components/elements/ExtensionIcon.vue b/platypush/backend/http/webapp/src/components/elements/ExtensionIcon.vue
new file mode 100644
index 0000000000..a5bc6f7193
--- /dev/null
+++ b/platypush/backend/http/webapp/src/components/elements/ExtensionIcon.vue
@@ -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>
diff --git a/platypush/backend/http/webapp/src/components/panels/Extensions/Doc.vue b/platypush/backend/http/webapp/src/components/panels/Extensions/Doc.vue
index 58325d4e8a..e8bce5e246 100644
--- a/platypush/backend/http/webapp/src/components/panels/Extensions/Doc.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/Doc.vue
@@ -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 {
diff --git a/platypush/backend/http/webapp/src/components/panels/Extensions/Index.vue b/platypush/backend/http/webapp/src/components/panels/Extensions/Index.vue
index 77447c0334..f423dd2d91 100644
--- a/platypush/backend/http/webapp/src/components/panels/Extensions/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Extensions/Index.vue
@@ -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;