Adjust gap

hassio/src/dashboard/hassio-addons.ts

@@ -1,4 +1,4 @@
-import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
+import { mdiArrowUpBoldCircle, mdiPlay, mdiPuzzle, mdiStop } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import { atLeastVersion } from "../../../src/common/config/version";
@@ -17,7 +17,36 @@ class HassioAddons extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
+  @property({ type: Boolean }) public narrow!: boolean;
+
   protected render(): TemplateResult {
+    return html`<ha-card
+      .header=${this.supervisor.localize("dashboard.addons")}
+    >
+      <div class="addons" ?narrow=${this.narrow}>
+        ${this.supervisor.supervisor.addons.map(
+          (addon) => html`<div
+            class="addon"
+            @click=${this._addonTapped}
+            .addon=${addon}
+          >
+            <div class="icon">
+              <div class="overlay">
+                <ha-svg-icon
+                  .title=${addon.state}
+                  .path=${addon.state === "started" ? mdiPlay : mdiStop}
+                >
+                </ha-svg-icon>
+              </div>
+              ${addon.icon && atLeastVersion(this.hass.config.version, 0, 105)
+                ? html`<img src="/api/hassio/addons/${addon.slug}/icon" />`
+                : html`<ha-svg-icon .path=${mdiPuzzle}></ha-svg-icon>`}
+            </div>
+            <div class="name">${addon.name}</div>
+          </div>`
+        )}
+      </div>
+    </ha-card>`;
     return html`
       <div class="content">
         <h1>${this.supervisor.localize("dashboard.addons")}</h1>
@@ -88,9 +117,42 @@ class HassioAddons extends LitElement {
       haStyle,
       hassioStyle,
       css`
-        ha-card {
+        .addons {
+          display: grid;
+          grid-template-columns: repeat(4, auto);
+          padding-bottom: 16px;
+        }
+        .addons[narrow] {
+          grid-template-columns: repeat(2, auto);
+        }
+        .addon {
+          text-align: center;
+          max-width: 100px;
+          padding: 0 8px;
           cursor: pointer;
         }
+        .icon > *:not(.overlay) {
+          position: relative;
+          max-height: 60px;
+          max-width: 60px;
+          margin: auto;
+          --mdc-icon-size: 60px;
+          display: flex;
+        }
+        .icon {
+          margin-bottom: 4px;
+        }
+        .overlay {
+          position: absolute;
+          z-index: 2;
+          --mdc-icon-size: 24px;
+          color: var(--secondary-text-color);
+          background-color: var(--secondary-background-color);
+          opacity: 0.6;
+          border-radius: 100%;
+          margin-left: 12px;
+          border: 1px var(--secondary-text-color) solid;
+        }
       `,
     ];
   }

hassio/src/dashboard/hassio-dashboard.ts

@@ -5,6 +5,7 @@ import "../../../src/layouts/hass-tabs-subpage";
 import { haStyle } from "../../../src/resources/styles";
 import { HomeAssistant, Route } from "../../../src/types";
 import { supervisorTabs } from "../hassio-tabs";
+import { hassioStyle } from "../resources/hassio-style";
 import "./hassio-addons";
 import "./hassio-update";
 
@@ -32,14 +33,17 @@ class HassioDashboard extends LitElement {
         <span slot="header">
           ${this.supervisor.localize("panel.dashboard")}
         </span>
+
         <div class="content">
           <hassio-update
             .hass=${this.hass}
             .supervisor=${this.supervisor}
+            .narrow=${this.narrow}
           ></hassio-update>
           <hassio-addons
             .hass=${this.hass}
             .supervisor=${this.supervisor}
+            .narrow=${this.narrow}
           ></hassio-addons>
         </div>
       </hass-tabs-subpage>
@@ -49,9 +53,18 @@ class HassioDashboard extends LitElement {
   static get styles(): CSSResultGroup {
     return [
       haStyle,
+      hassioStyle,
       css`
         .content {
-          margin: 0 auto;
+          display: grid;
+          max-width: 1400px;
+          justify-content: center;
+          grid-template-columns: repeat(2, auto);
+          gap: 16px;
+        }
+        .content > * {
+          display: block;
+          min-width: 400px;
         }
       `,
     ];

hassio/src/dashboard/hassio-update.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button";
-import { mdiHomeAssistant } from "@mdi/js";
+import { mdiHomeAssistant, mdiPuzzle } from "@mdi/js";
 import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoizeOne from "memoize-one";
@@ -42,11 +42,15 @@ export class HassioUpdate extends LitElement {
 
   @property({ attribute: false }) public supervisor!: Supervisor;
 
+  @property({ type: Boolean }) public narrow!: boolean;
+
   private _pendingUpdates = memoizeOne(
     (supervisor: Supervisor): number =>
       Object.keys(supervisor).filter(
         (value) => supervisor[value].update_available
-      ).length
+      ).length +
+      supervisor.supervisor.addons.filter((addon) => addon.update_available)
+        .length
   );
 
   protected render(): TemplateResult {
@@ -60,15 +64,38 @@ export class HassioUpdate extends LitElement {
     }
 
     return html`
-      <div class="content">
-        <h1>
-          ${this.supervisor.localize(
-            "common.update_available",
-            "count",
-            updatesAvailable
+      <ha-card
+        .header="${this.supervisor.localize(
+          "common.update_available",
+          "count",
+          updatesAvailable + 1
+        )}
+          🎉"
+      >
+        ${this._renderUpdateRow({
+          type: "os",
+          heading: "Home Assistant Operating system",
+          icon: mdiHomeAssistant,
+          version: "5",
+          version_latest: "6",
+        })}
+        ${this.supervisor.addon.addons
+          .filter((addon) => addon.update_available)
+          .map((addon) =>
+            this._renderUpdateRow({
+              type: "addon",
+              heading: addon.name,
+              version: addon.version_latest,
+              version_latest: addon.version,
+              image: addon.icon
+                ? `/api/hassio/addons/${addon.slug}/icon`
+                : undefined,
+              icon: mdiPuzzle,
+            })
           )}
-          🎉
-        </h1>
+      </ha-card>
+      <div class="content">
+        <h1></h1>
         <div class="card-group">
           ${this._renderUpdateCard(
             "Home Assistant Core",
@@ -100,6 +127,37 @@ export class HassioUpdate extends LitElement {
     `;
   }
 
+  private _renderUpdateRow(options: {
+    type: "supervisor" | "os" | "core" | "addon";
+    heading: string;
+    version: string;
+    version_latest: string;
+    icon?: string;
+    image?: string;
+    release_notes?: string;
+    slug?: string;
+  }): TemplateResult {
+    return html`<div class="update-row">
+      <paper-icon-item>
+        <div class="icon" slot="item-icon">
+          ${options.image && atLeastVersion(this.hass.config.version, 0, 104)
+            ? html`<img src="${options.image}" />`
+            : options.icon
+            ? html`<ha-svg-icon .path=${options.icon}></ha-svg-icon>`
+            : ""}
+        </div>
+        <paper-item-body two-line>
+          ${options.heading}
+          <div secondary>Version ${options.version_latest} is available</div>
+        </paper-item-body>
+      </paper-icon-item>
+      <div class="update-row-actions" ?narrow=${false}>
+        <mwc-button>Releaese notes</mwc-button>
+        <mwc-button>Update</mwc-button>
+      </div>
+    </div>`;
+  }
+
   private _renderUpdateCard(
     name: string,
     key: string,
@@ -231,31 +289,21 @@ export class HassioUpdate extends LitElement {
       haStyle,
       hassioStyle,
       css`
-        .icon {
-          --mdc-icon-size: 48px;
-          float: right;
-          margin: 0 0 2px 10px;
-          color: var(--primary-text-color);
+        .update-row,
+        paper-icon-item {
+          display: flex;
+          align-items: center;
         }
-        .update-heading {
-          font-size: var(--paper-font-subhead_-_font-size);
-          font-weight: 500;
-          margin-bottom: 0.5em;
-          color: var(--primary-text-color);
+
+        .update-row {
+          padding: 8px;
+          justify-content: space-between;
         }
-        .card-content {
-          height: calc(100% - 47px);
-          box-sizing: border-box;
-        }
-        .card-actions {
-          text-align: right;
-        }
-        a {
-          text-decoration: none;
-        }
-        ha-settings-row {
-          padding: 0;
-          --paper-item-body-two-line-min-height: 32px;
+        .icon > * {
+          max-height: 32px;
+          max-width: 32px;
+          margin-right: 16px;
+          --mdc-icon-size: 32px;
         }
       `,
     ];