Remove ha-icon usage

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);
  }
 `;