Codesplit Supervisor panel icons

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

@@ -1,4 +1,4 @@
-import "@polymer/paper-card/paper-card";
+import { mdiArrowUpBoldCircle, mdiPuzzle } from "@mdi/js";
 import {
   css,
   CSSResultArray,
@@ -10,6 +10,7 @@ import {
 import memoizeOne from "memoize-one";
 import { atLeastVersion } from "../../../src/common/config/version";
 import { navigate } from "../../../src/common/navigate";
+import "../../../src/components/ha-card";
 import {
   HassioAddonInfo,
   HassioAddonRepository,
@@ -66,7 +67,7 @@ class HassioAddonRepositoryEl extends LitElement {
         <div class="card-group">
           ${addons.map(
             (addon) => html`
-              <paper-card
+              <ha-card
                 .addon=${addon}
                 class=${addon.available ? "" : "not_available"}
                 @click=${this._addonTapped}
@@ -78,8 +79,8 @@ class HassioAddonRepositoryEl extends LitElement {
                     .description=${addon.description}
                     .available=${addon.available}
                     .icon=${addon.installed && addon.installed !== addon.version
-                      ? "hassio:arrow-up-bold-circle"
-                      : "hassio:puzzle"}
+                      ? mdiArrowUpBoldCircle
+                      : mdiPuzzle}
                     .iconTitle=${addon.installed
                       ? addon.installed !== addon.version
                         ? "New version available"
@@ -111,7 +112,7 @@ class HassioAddonRepositoryEl extends LitElement {
                       : ""}
                   ></hassio-card-content>
                 </div>
-              </paper-card>
+              </ha-card>
             `
           )}
         </div>
@@ -127,7 +128,7 @@ class HassioAddonRepositoryEl extends LitElement {
     return [
       hassioStyle,
       css`
-        paper-card {
+        ha-card {
           cursor: pointer;
         }
         .not_available {

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

@@ -1,3 +1,6 @@
+import "@material/mwc-icon-button/mwc-icon-button";
+import "@material/mwc-list/mwc-list-item";
+import { mdiDotsVertical } from "@mdi/js";
 import {
   css,
   CSSResult,
@@ -6,22 +9,21 @@ import {
   PropertyValues,
 } from "lit-element";
 import { html, TemplateResult } from "lit-html";
+import "../../../src/common/search/search-input";
+import "../../../src/components/ha-button-menu";
+import "../../../src/components/ha-svg-icon";
 import {
   fetchHassioAddonsInfo,
   HassioAddonInfo,
   HassioAddonRepository,
   reloadHassioAddons,
 } from "../../../src/data/hassio/addon";
-import "../../../src/components/ha-icon-button";
-import "../../../src/layouts/loading-screen";
 import "../../../src/layouts/hass-tabs-subpage";
+import "../../../src/layouts/loading-screen";
 import { HomeAssistant, Route } from "../../../src/types";
-import "../../../src/common/search/search-input";
-import "./hassio-addon-repository";
-
-import { supervisorTabs } from "../hassio-panel";
-
 import { showRepositoriesDialog } from "../dialogs/repositories/show-dialog-repositories";
+import { supervisorTabs } from "../hassio-panel";
+import "./hassio-addon-repository";
 
 const sortRepos = (a: HassioAddonRepository, b: HassioAddonRepository) => {
   if (a.slug === "local") {
@@ -94,27 +96,17 @@ class HassioAddonStore extends LitElement {
         .tabs=${supervisorTabs}
       >
         <span slot="header">Add-on store</span>
-        <paper-menu-button
-          close-on-activate
-          no-animations
-          horizontal-align="right"
-          horizontal-offset="-5"
-          slot="toolbar-icon"
-        >
-          <ha-icon-button
-            icon="hassio:dots-vertical"
-            slot="dropdown-trigger"
-            alt="menu"
-          ></ha-icon-button>
-          <paper-listbox slot="dropdown-content" role="listbox">
-            <paper-item @tap=${this._manageRepositories}>
-              Repositories
-            </paper-item>
-            <paper-item @tap=${this.refreshData}>
-              Reload
-            </paper-item>
-          </paper-listbox>
-        </paper-menu-button>
+        <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
+          <mwc-icon-button slot="trigger" alt="menu">
+            <ha-svg-icon path=${mdiDotsVertical}></ha-svg-icon>
+          </mwc-icon-button>
+          <mwc-list-item @tap=${this._manageRepositories}>
+            Repositories
+          </mwc-list-item>
+          <mwc-list-item @tap=${this.refreshData}>
+            Reload
+          </mwc-list-item>
+        </ha-button-menu>
         ${repos.length === 0
           ? html`<loading-screen></loading-screen>`
           : html`

hassio/src/addon-view/config/hassio-addon-audio.ts

@@ -1,5 +1,4 @@
 import "@material/mwc-button";
-import "@polymer/paper-card/paper-card";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
 import "@polymer/paper-listbox/paper-listbox";
@@ -14,6 +13,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import "web-animations-js/web-animations-next-lite.min";
+import "../../../../src/components/ha-card";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
@@ -23,9 +23,9 @@ import {
   fetchHassioHardwareAudio,
   HassioHardwareAudioDevice,
 } from "../../../../src/data/hassio/hardware";
-import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
+import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
 
 @customElement("hassio-addon-audio")
@@ -46,7 +46,7 @@ class HassioAddonAudio extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <paper-card heading="Audio">
+      <ha-card header="Audio">
         <div class="card-content">
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
 
@@ -92,7 +92,7 @@ class HassioAddonAudio extends LitElement {
         <div class="card-actions">
           <mwc-button @click=${this._saveSettings}>Save</mwc-button>
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -102,7 +102,7 @@ class HassioAddonAudio extends LitElement {
       hassioStyle,
       css`
         :host,
-        paper-card,
+        ha-card,
         paper-dropdown-menu {
           display: block;
         }

hassio/src/addon-view/config/hassio-addon-config-tab.ts

@@ -8,12 +8,10 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-
-import { HomeAssistant } from "../../../../src/types";
 import { HassioAddonDetails } from "../../../../src/data/hassio/addon";
-import { hassioStyle } from "../../resources/hassio-style";
 import { haStyle } from "../../../../src/resources/styles";
-
+import { HomeAssistant } from "../../../../src/types";
+import { hassioStyle } from "../../resources/hassio-style";
 import "./hassio-addon-audio";
 import "./hassio-addon-config";
 import "./hassio-addon-network";

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

@@ -1,6 +1,5 @@
 import "@material/mwc-button";
 import "@polymer/iron-autogrow-textarea/iron-autogrow-textarea";
-import "@polymer/paper-card/paper-card";
 import {
   css,
   CSSResult,
@@ -13,6 +12,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-card";
 import "../../../../src/components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../src/components/ha-yaml-editor";
 import {
@@ -23,9 +23,8 @@ import {
 import { showConfirmationDialog } from "../../../../src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../../../src/resources/styles";
 import type { HomeAssistant } from "../../../../src/types";
-import { hassioStyle } from "../../resources/hassio-style";
-
 import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
+import { hassioStyle } from "../../resources/hassio-style";
 
 @customElement("hassio-addon-config")
 class HassioAddonConfig extends LitElement {
@@ -46,7 +45,7 @@ class HassioAddonConfig extends LitElement {
 
     return html`
       <h1>${this.addon.name}</h1>
-      <paper-card heading="Configuration">
+      <ha-card header="Configuration">
         <div class="card-content">
           <ha-yaml-editor
             @value-changed=${this._configChanged}
@@ -65,7 +64,7 @@ class HassioAddonConfig extends LitElement {
             Save
           </mwc-button>
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -77,7 +76,7 @@ class HassioAddonConfig extends LitElement {
         :host {
           display: block;
         }
-        paper-card {
+        ha-card {
           display: block;
         }
         .card-actions {

hassio/src/addon-view/config/hassio-addon-network.ts

@@ -1,4 +1,3 @@
-import "@polymer/paper-card/paper-card";
 import { PaperInputElement } from "@polymer/paper-input/paper-input";
 import {
   css,
@@ -11,15 +10,15 @@ import {
   TemplateResult,
 } from "lit-element";
 import { fireEvent } from "../../../../src/common/dom/fire_event";
+import "../../../../src/components/ha-card";
 import {
   HassioAddonDetails,
   HassioAddonSetOptionParams,
   setHassioAddonOption,
 } from "../../../../src/data/hassio/addon";
-import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
-
 import { haStyle } from "../../../../src/resources/styles";
 import { HomeAssistant } from "../../../../src/types";
+import { suggestAddonRestart } from "../../dialogs/suggestAddonRestart";
 import { hassioStyle } from "../../resources/hassio-style";
 
 interface NetworkItem {
@@ -53,7 +52,7 @@ class HassioAddonNetwork extends LitElement {
     }
 
     return html`
-      <paper-card heading="Network">
+      <ha-card header="Network">
         <div class="card-content">
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
 
@@ -90,7 +89,7 @@ class HassioAddonNetwork extends LitElement {
           </mwc-button>
           <mwc-button @click=${this._saveTapped}>Save</mwc-button>
         </div>
-      </paper-card>
+      </ha-card>
     `;
   }
 
@@ -102,7 +101,7 @@ class HassioAddonNetwork extends LitElement {
         :host {
           display: block;
         }
-        paper-card {
+        ha-card {
           display: block;
         }
         .errors {

hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts

@@ -1,5 +1,4 @@
 import "@polymer/paper-spinner/paper-spinner-lite";
-import "@polymer/paper-card/paper-card";
 import {
   css,
   CSSResult,
@@ -9,16 +8,15 @@ import {
   property,
   TemplateResult,
 } from "lit-element";
-
-import { HomeAssistant } from "../../../../src/types";
+import "../../../../src/components/ha-markdown";
 import {
-  HassioAddonDetails,
   fetchHassioAddonDocumentation,
+  HassioAddonDetails,
 } from "../../../../src/data/hassio/addon";
-import "../../../../src/components/ha-markdown";
 import "../../../../src/layouts/loading-screen";
-import { hassioStyle } from "../../resources/hassio-style";
 import { haStyle } from "../../../../src/resources/styles";
+import { HomeAssistant } from "../../../../src/types";
+import { hassioStyle } from "../../resources/hassio-style";
 
 @customElement("hassio-addon-documentation-tab")
 class HassioAddonDocumentationDashboard extends LitElement {
@@ -41,14 +39,14 @@ class HassioAddonDocumentationDashboard extends LitElement {
     }
     return html`
       <div class="content">
-        <paper-card>
+        <ha-card>
           ${this._error ? html` <div class="errors">${this._error}</div> ` : ""}
           <div class="card-content">
             ${this._content
               ? html`<ha-markdown .content=${this._content}></ha-markdown>`
               : html`<loading-screen></loading-screen>`}
           </div>
-        </paper-card>
+        </ha-card>
       </div>
     `;
   }
@@ -58,7 +56,7 @@ class HassioAddonDocumentationDashboard extends LitElement {
       haStyle,
       hassioStyle,
       css`
-        paper-card {
+        ha-card {
           display: block;
         }
         .content {