Remove ha-icon usage (#500)

package.json

@@ -150,9 +150,12 @@
     "@material/mwc-menu": "0.25.1",
     "@material/mwc-radio": "0.25.1",
     "@material/mwc-ripple": "0.25.1",
+    "@material/mwc-select": "^0.25.1",
+    "@material/mwc-slider": "^0.25.1",
     "@material/mwc-switch": "0.25.1",
     "@material/mwc-tab": "0.25.1",
     "@material/mwc-tab-bar": "0.25.1",
+    "@material/mwc-textfield": "^0.25.1",
     "@material/top-app-bar": "13.0.0-canary.65125b3a6.0",
     "@mdi/js": "6.2.95",
     "@mdi/svg": "6.2.95",

script/gulp/common.js

@@ -1,7 +1,5 @@
 const gulp = require("gulp");
 const del = require("del");
-const fs = require("fs-extra");
-const makeDir = require("make-dir");
 require("./rollup.js");
 require("./translations");
 
@@ -11,13 +9,4 @@ gulp.task("cleanup", (task) => {
   task();
 });
 
-gulp.task("create-icon-metadata", async function (task) {
-  await makeDir("./homeassistant-frontend/build/mdi");
-  await fs.outputJson("./homeassistant-frontend/build/mdi/iconMetadata.json", {
-    version: "0",
-    parts: [],
-  });
-  task();
-});
-
-gulp.task("common", gulp.series("cleanup", "create-icon-metadata", "generate-translations"));
+gulp.task("common", gulp.series("cleanup", "generate-translations"));

script/gulp/rollup.js

@@ -72,7 +72,8 @@ const outputconfig = (isDev) => {
     assetFileNames: !isDev ? "a.[hash].js" : "[name]-dev.js",
     entryFileNames: !isDev ? "[name]-[hash].js" : "[name]-dev.js",
     format: "es",
-    intro: "const __DEMO__ = false;",
+    intro: `const __DEMO__ = false;
+    const __SUPERVISOR__ = true`,
   };
 };
 

src/components/dialogs/hacs-add-repository-dialog.ts

@@ -1,3 +1,4 @@
+import "@polymer/paper-item/paper-item";
 import { mdiGithub } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
@@ -11,21 +12,27 @@ import "../../../homeassistant-frontend/src/components/ha-svg-icon";
 import "../../../homeassistant-frontend/src/components/ha-paper-dropdown-menu";
 import { Repository } from "../../data/common";
 import { activePanel } from "../../panels/hacs-sections";
-import { scrollBarStyle, searchStyles } from "../../styles/element-styles";
+import { hacsIconStyle, scrollBarStyle, searchStyles } from "../../styles/element-styles";
 import { filterRepositoriesByInput } from "../../tools/filter-repositories-by-input";
 import "../hacs-chip";
 import "../hacs-filter";
 import { hacsIcon } from "../hacs-icon";
 import "./hacs-dialog";
 import { HacsDialogBase } from "./hacs-dialog-base";
+import { brandsUrl } from "../../../homeassistant-frontend/src/util/brands-url";
 
 @customElement("hacs-add-repository-dialog")
 export class HacsAddRepositoryDialog extends HacsDialogBase {
   @property({ attribute: false }) public filters: any = [];
-  @property({ type: Number }) private _load: number = 30;
-  @property({ type: Number }) private _top: number = 0;
-  @property() private _searchInput: string = "";
-  @property() private _sortBy: string = "stars";
+
+  @property({ type: Number }) private _load = 30;
+
+  @property({ type: Number }) private _top = 0;
+
+  @property() private _searchInput = "";
+
+  @property() private _sortBy = "stars";
+
   @property() public section!: string;
 
   shouldUpdate(changedProperties: PropertyValues) {
@@ -116,15 +123,15 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
               ?narrow=${this.narrow}
             >
               <paper-listbox slot="dropdown-content" selected="0">
-                <paper-item @tap=${() => (this._sortBy = "stars")}
-                  >${this.hacs.localize("store.stars")}</paper-item
-                >
-                <paper-item @tap=${() => (this._sortBy = "name")}
-                  >${this.hacs.localize("store.name")}</paper-item
-                >
-                <paper-item @tap=${() => (this._sortBy = "last_updated")}
-                  >${this.hacs.localize("store.last_updated")}</paper-item
-                >
+                <paper-item @tap=${() => (this._sortBy = "stars")}>
+                  ${this.hacs.localize("store.stars")}
+                </paper-item>
+                <paper-item @tap=${() => (this._sortBy = "name")}>
+                  ${this.hacs.localize("store.name")}
+                </paper-item>
+                <paper-item @tap=${() => (this._sortBy = "last_updated")}>
+                  ${this.hacs.localize("store.last_updated")}
+                </paper-item>
               </paper-listbox>
             </ha-paper-dropdown-menu>
           </div>
@@ -153,7 +160,11 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
                     ? html`
                         <img
                           loading="lazy"
-                          src="https://brands.home-assistant.io/_/${repo.domain}/icon.png"
+                          .src=${brandsUrl({
+                            domain: repo.domain,
+                            darkOptimized: this.hass.themes.darkMode,
+                            type: "icon",
+                          })}
                           referrerpolicy="no-referrer"
                           @error=${this._onImageError}
                           @load=${this._onImageLoad}
@@ -215,13 +226,15 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
 
   private _onImageError(ev) {
     if (ev.target) {
-      ev.target.outerHTML = `<ha-svg-icon .path=${mdiGithub} slot="item-icon"></ha-svg-icon>`;
+      ev.target.outerHTML = `<ha-svg-icon path="${mdiGithub}" slot="item-icon"></ha-svg-icon>`;
     }
   }
+
   static get styles() {
     return [
       searchStyles,
       scrollBarStyle,
+      hacsIconStyle,
       css`
         .content {
           width: 100%;
@@ -246,7 +259,7 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
           top: 8px;
           right: 8px;
         }
-        ha-icon {
+        ha-svg-icon {
           --mdc-icon-size: 36px;
         }
         search-input {

src/components/dialogs/hacs-custom-repositories-dialog.ts

@@ -1,3 +1,5 @@
+import "@material/mwc-button/mwc-button";
+import "@polymer/paper-item/paper-item";
 import { mdiDelete, mdiGithub } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
@@ -7,15 +9,19 @@ import { customElement, property, query } from "lit/decorators";
 import "../../../homeassistant-frontend/src/components/ha-svg-icon";
 import "../../../homeassistant-frontend/src/components/ha-paper-dropdown-menu";
 import { getRepositories, repositoryAdd, repositoryDelete } from "../../data/websocket";
-import { scrollBarStyle } from "../../styles/element-styles";
+import { hacsIconStyle, scrollBarStyle } from "../../styles/element-styles";
 import "./hacs-dialog";
 import { HacsDialogBase } from "./hacs-dialog-base";
+import { brandsUrl } from "../../../homeassistant-frontend/src/util/brands-url";
 
 @customElement("hacs-custom-repositories-dialog")
 export class HacsCustomRepositoriesDialog extends HacsDialogBase {
-  @property() private _inputRepository: string;
+  @property() private _inputRepository?: string;
+
   @property() private _error: any;
+
   @query("#add-input") private _addInput?: any;
+
   @query("#category") private _addCategory?: any;
 
   shouldUpdate(changedProperties: PropertyValues) {
@@ -48,7 +54,11 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
                     ? html`
                         <img
                           loading="lazy"
-                          src="https://brands.home-assistant.io/_/${repo.domain}/icon.png"
+                          .src=${brandsUrl({
+                            domain: repo.domain,
+                            darkOptimized: this.hass.themes.darkMode,
+                            type: "icon",
+                          })}
                           referrerpolicy="no-referrer"
                           @error=${this._onImageError}
                           @load=${this._onImageLoad}
@@ -147,10 +157,9 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
   }
 
   private _onImageError(ev) {
-    ev.target.outerHTML = `<ha-icon
-      icon="mdi:github-circle"
-      slot="item-icon"
-    ></ha-icon>`;
+    if (ev.target) {
+      ev.target.outerHTML = `<ha-svg-icon path="${mdiGithub}" slot="item-icon"></ha-svg-icon>`;
+    }
   }
 
   private async _showReopsitoryInfo(repository: string) {
@@ -169,6 +178,7 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
   static get styles() {
     return [
       scrollBarStyle,
+      hacsIconStyle,
       css`
         .content {
           width: 1024px;
@@ -180,10 +190,7 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
           max-height: 870px;
           overflow: auto;
         }
-        ha-icon {
-          color: var(--secondary-text-color);
-        }
-        ha-icon {
+        ha-svg-icon {
           --mdc-icon-size: 36px;
         }
         img {

src/styles/element-styles.ts

@@ -16,7 +16,7 @@ export const hacsButtonStyle = css`
 
 export const hacsIconStyle = css`
   paper-menu-button,
-  ha-icon {
+  ha-svg-icon {
     color: var(--hcv-color-icon);
   }
 `;