From 44ad75aead90acb6d4d44deb161f8129b8a92924 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= <joasoe@gmail.com>
Date: Thu, 7 May 2020 15:21:12 +0200
Subject: [PATCH] Implement add-on changelog (#5727)

---
 .../src/addon-view/info/hassio-addon-info.ts  | 34 ++++++++++++++-----
 1 file changed, 25 insertions(+), 9 deletions(-)

diff --git a/hassio/src/addon-view/info/hassio-addon-info.ts b/hassio/src/addon-view/info/hassio-addon-info.ts
index 8d4a3c0a8c..cc3539e49c 100644
--- a/hassio/src/addon-view/info/hassio-addon-info.ts
+++ b/hassio/src/addon-view/info/hassio-addon-info.ts
@@ -175,7 +175,6 @@ class HassioAddonInfo extends LitElement {
             <div class="addon-version light-color">
               ${this.addon.version
                 ? html`
-                    ${this.addon.version}
                     ${this._computeIsRunning
                       ? html`
                           <ha-icon
@@ -195,6 +194,19 @@ class HassioAddonInfo extends LitElement {
                 : html` ${this.addon.version_latest} `}
             </div>
           </div>
+          <div class="description light-color">
+            ${this.addon.version
+              ? html`
+                  Current version: ${this.addon.version}
+                  <div class="changelog" @click=${this._openChangelog}>
+                    (<span class="changelog-link">changelog</span>)
+                  </div>
+                `
+              : html`<span class="changelog-link" @click=${this._openChangelog}
+                  >Changelog</span
+                >`}
+          </div>
+
           <div class="description light-color">
             ${this.addon.description}.<br />
             Visit
@@ -205,14 +217,10 @@ class HassioAddonInfo extends LitElement {
           </div>
           ${this.addon.logo
             ? html`
-                <a
-                  href="${this.addon.url!}"
-                  target="_blank"
+                <img
                   class="logo"
-                  rel="noreferrer"
-                >
-                  <img src="/api/hassio/addons/${this.addon.slug}/logo" />
-                </a>
+                  src="/api/hassio/addons/${this.addon.slug}/logo"
+                />
               `
             : ""}
           <div class="security">
@@ -549,7 +557,7 @@ class HassioAddonInfo extends LitElement {
         .description {
           margin-bottom: 16px;
         }
-        .logo img {
+        img.logo {
           max-height: 60px;
           margin: 16px 0;
           display: block;
@@ -621,6 +629,14 @@ class HassioAddonInfo extends LitElement {
           --mdc-icon-size: 45px;
           --ha-label-badge-padding: 8px 0 0 0;
         }
+        .changelog {
+          display: contents;
+        }
+        .changelog-link {
+          color: var(--primary-color);
+          text-decoration: underline;
+          cursor: pointer;
+        }
       `,
     ];
   }