Use icon image where available (#4721)

* Use iconimg where available

* Adjust margin for icon

* remove log

* Fix property casing

* Add blue topbar, and generalize properties

* Inline checks

* inline property functions

* Limit compute

* Linting

* lovercase const

* Review comments and move update dot to line

* Add roboto font to hassio

* Fix update and stopped styles colliding

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

hassio/src/addon-store/hassio-addon-repository.ts

@@ -39,6 +39,7 @@ class HassioAddonRepositoryEl extends LitElement {
   protected render(): TemplateResult {
     const repo = this.repo;
     const addons = this._getAddons(this.addons, this.filter);
+    const ha105pluss = this._computeHA105plus;
 
     if (this.filter && addons.length < 1) {
       return html`
@@ -64,7 +65,7 @@ class HassioAddonRepositoryEl extends LitElement {
               <paper-card
                 .addon=${addon}
                 class=${addon.available ? "" : "not_available"}
-                @click=${this.addonTapped}
+                @click=${this._addonTapped}
               >
                 <div class="card-content">
                   <hassio-card-content
@@ -72,9 +73,34 @@ class HassioAddonRepositoryEl extends LitElement {
                     .title=${addon.name}
                     .description=${addon.description}
                     .available=${addon.available}
-                    .icon=${this.computeIcon(addon)}
-                    .iconTitle=${this.computeIconTitle(addon)}
-                    .iconClass=${this.computeIconClass(addon)}
+                    .icon=${addon.installed && addon.installed !== addon.version
+                      ? "hassio:arrow-up-bold-circle"
+                      : "hassio:puzzle"}
+                    .iconTitle=${addon.installed
+                      ? addon.installed !== addon.version
+                        ? "New version available"
+                        : "Add-on is installed"
+                      : addon.available
+                      ? "Add-on is not installed"
+                      : "Add-on is not available on your system"}
+                    .iconClass=${addon.installed
+                      ? addon.installed !== addon.version
+                        ? "update"
+                        : "installed"
+                      : !addon.available
+                      ? "not_available"
+                      : ""}
+                    .iconImage=${ha105pluss && addon.icon
+                      ? `/api/hassio/addons/${addon.slug}/icon`
+                      : undefined}
+                    .showTopbar=${addon.installed || !addon.available}
+                    .topbarClass=${addon.installed
+                      ? addon.installed !== addon.version
+                        ? "update"
+                        : "installed"
+                      : !addon.available
+                      ? "unavailable"
+                      : ""}
                   ></hassio-card-content>
                 </div>
               </paper-card>
@@ -85,34 +111,15 @@ class HassioAddonRepositoryEl extends LitElement {
     `;
   }
 
-  private computeIcon(addon) {
-    return addon.installed && addon.installed !== addon.version
-      ? "hassio:arrow-up-bold-circle"
-      : "hassio:puzzle";
-  }
-
-  private computeIconTitle(addon) {
-    if (addon.installed) {
-      return addon.installed !== addon.version
-        ? "New version available"
-        : "Add-on is installed";
-    }
-    return addon.available
-      ? "Add-on is not installed"
-      : "Add-on is not available on your system";
-  }
-
-  private computeIconClass(addon) {
-    if (addon.installed) {
-      return addon.installed !== addon.version ? "update" : "installed";
-    }
-    return !addon.available ? "not_available" : "";
-  }
-
-  private addonTapped(ev) {
+  private _addonTapped(ev) {
     navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
   }
 
+  private get _computeHA105plus(): boolean {
+    const [major, minor] = this.hass.config.version.split(".", 2);
+    return Number(major) > 0 || (major === "0" && Number(minor) >= 105);
+  }
+
   static get styles(): CSSResultArray {
     return [
       hassioStyle,

hassio/src/addon-view/hassio-addon-info.ts

@@ -454,7 +454,6 @@ class HassioAddonInfo extends LitElement {
                 <ha-progress-button
                   .disabled=${!this.addon.available}
                   .progress=${this._installing}
-                  class="right"
                   @click=${this._installClicked}
                 >
                   Install

hassio/src/components/hassio-card-content.ts

@@ -7,6 +7,7 @@ import {
   property,
   customElement,
 } from "lit-element";
+import { classMap } from "lit-html/directives/class-map";
 import "@polymer/iron-icon/iron-icon";
 
 import "../../../src/components/ha-relative-time";
@@ -17,21 +18,40 @@ class HassioCardContent extends LitElement {
   @property() public hass!: HomeAssistant;
   @property() public title!: string;
   @property() public description?: string;
-  @property({ type: Boolean }) public available?: boolean;
+  @property({ type: Boolean }) public available: boolean = true;
+  @property({ type: Boolean }) public showTopbar: boolean = false;
+  @property() public topbarClass?: string;
   @property() public datetime?: string;
   @property() public iconTitle?: string;
   @property() public iconClass?: string;
   @property() public icon = "hass:help-circle";
+  @property() public iconImage?: string;
 
   protected render(): TemplateResult {
     return html`
-      <iron-icon
-        class=${this.iconClass}
-        .icon=${this.icon}
-        .title=${this.iconTitle}
-      ></iron-icon>
+      ${this.showTopbar
+        ? html`
+            <div class="topbar ${this.topbarClass}"></div>
+          `
+        : ""}
+      ${this.iconImage
+        ? html`
+            <div class="icon_image ${this.iconClass}">
+              <img src="${this.iconImage}" title="${this.iconTitle}" />
+              <div></div>
+            </div>
+          `
+        : html`
+            <iron-icon
+              class=${this.iconClass}
+              .icon=${this.icon}
+              .title=${this.iconTitle}
+            ></iron-icon>
+          `}
       <div>
-        <div class="title">${this.title}</div>
+        <div class="title">
+          ${this.title}
+        </div>
         <div class="addition">
           ${this.description}
           ${/* treat as available when undefined */
@@ -53,8 +73,9 @@ class HassioCardContent extends LitElement {
   static get styles(): CSSResult {
     return css`
       iron-icon {
-        margin-right: 16px;
-        margin-top: 16px;
+        margin-right: 24px;
+        margin-left: 8px;
+        margin-top: 12px;
         float: left;
         color: var(--secondary-text-color);
       }
@@ -88,6 +109,44 @@ class HassioCardContent extends LitElement {
       ha-relative-time {
         display: block;
       }
+      .icon_image img {
+        max-height: 40px;
+        max-width: 40px;
+        margin-top: 4px;
+        margin-right: 16px;
+        float: left;
+      }
+      .icon_image.stopped,
+      .icon_image.not_available {
+        filter: grayscale(1);
+      }
+      .dot {
+        position: absolute;
+        background-color: var(--paper-orange-400);
+        width: 12px;
+        height: 12px;
+        top: 8px;
+        right: 8px;
+        border-radius: 50%;
+      }
+      .topbar {
+        position: absolute;
+        width: 100%;
+        height: 2px;
+        top: 0;
+        left: 0;
+        border-top-left-radius: 2px;
+        border-top-right-radius: 2px;
+      }
+      .topbar.installed {
+        background-color: var(--primary-color);
+      }
+      .topbar.update {
+        background-color: var(--accent-color);
+      }
+      .topbar.unavailable {
+        background-color: var(--error-color);
+      }
     `;
   }
 }

hassio/src/dashboard/hassio-addons.ts

@@ -22,6 +22,9 @@ class HassioAddons extends LitElement {
   @property() public addons?: HassioAddonInfo[];
 
   protected render(): TemplateResult {
+    const [major, minor] = this.hass.config.version.split(".", 2);
+    const ha105pluss =
+      Number(major) > 0 || (major === "0" && Number(minor) >= 105);
     return html`
       <div class="content">
         <h1>Add-ons</h1>
@@ -44,12 +47,30 @@ class HassioAddons extends LitElement {
                       <div class="card-content">
                         <hassio-card-content
                           .hass=${this.hass}
-                          title=${addon.name}
-                          description=${addon.description}
-                          ?available=${addon.available}
-                          icon=${this._computeIcon(addon)}
-                          .iconTitle=${this._computeIconTitle(addon)}
-                          .iconClass=${this._computeIconClass(addon)}
+                          .title=${addon.name}
+                          .description=${addon.description}
+                          available
+                          .showTopbar=${addon.installed !== addon.version}
+                          topbarClass="update"
+                          .icon=${addon.installed !== addon.version
+                            ? "hassio:arrow-up-bold-circle"
+                            : "hassio:puzzle"}
+                          .iconTitle=${addon.state !== "started"
+                            ? "Add-on is stopped"
+                            : addon.installed !== addon.version
+                            ? "New version available"
+                            : "Add-on is running"}
+                          .iconClass=${addon.installed &&
+                          addon.installed !== addon.version
+                            ? addon.state === "started"
+                              ? "update"
+                              : "update stopped"
+                            : addon.installed && addon.state === "started"
+                            ? "running"
+                            : "stopped"}
+                          .iconImage=${ha105pluss && addon.icon
+                            ? `/api/hassio/addons/${addon.slug}/icon`
+                            : undefined}
                         ></hassio-card-content>
                       </div>
                     </paper-card>
@@ -72,28 +93,6 @@ class HassioAddons extends LitElement {
     ];
   }
 
-  private _computeIcon(addon: HassioAddonInfo): string {
-    return addon.installed !== addon.version
-      ? "hassio:arrow-up-bold-circle"
-      : "hassio:puzzle";
-  }
-
-  private _computeIconTitle(addon: HassioAddonInfo): string {
-    if (addon.installed !== addon.version) {
-      return "New version available";
-    }
-    return addon.state === "started"
-      ? "Add-on is running"
-      : "Add-on is stopped";
-  }
-
-  private _computeIconClass(addon: HassioAddonInfo): string {
-    if (addon.installed !== addon.version) {
-      return "update";
-    }
-    return addon.state === "started" ? "running" : "";
-  }
-
   private _addonTapped(ev: any): void {
     navigate(this, `/hassio/addon/${ev.currentTarget.addon.slug}`);
   }

hassio/src/entrypoint.ts

@@ -1,9 +1,12 @@
 window.loadES5Adapter().then(() => {
+  // eslint-disable-next-line
+  import(/* webpackChunkName: "roboto" */ "../../src/resources/roboto");
   // eslint-disable-next-line
   import(/* webpackChunkName: "hassio-icons" */ "./resources/hassio-icons");
   // eslint-disable-next-line
   import(/* webpackChunkName: "hassio-main" */ "./hassio-main");
 });
+
 const styleEl = document.createElement("style");
 styleEl.innerHTML = `
 body {

hassio/src/resources/hassio-style.ts

@@ -17,11 +17,11 @@ export const hassioStyle = css`
     font-weight: var(--paper-font-headline_-_font-weight);
     letter-spacing: var(--paper-font-headline_-_letter-spacing);
     line-height: var(--paper-font-headline_-_line-height);
-    padding-left: 16px;
+    padding-left: 8px;
   }
   .description {
     margin-top: 4px;
-    padding-left: 16px;
+    padding-left: 8px;
   }
   .card-group {
     display: grid;