diff --git a/src/components/dialogs/hacs-custom-repositories-dialog.ts b/src/components/dialogs/hacs-custom-repositories-dialog.ts index fe2a944b..586f7354 100644 --- a/src/components/dialogs/hacs-custom-repositories-dialog.ts +++ b/src/components/dialogs/hacs-custom-repositories-dialog.ts @@ -1,16 +1,14 @@ import "@material/mwc-button/mwc-button"; import { mdiDelete, mdiGithub } from "@mdi/js"; -import "@polymer/paper-item/paper-icon-item"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-listbox/paper-listbox"; import { css, html, PropertyValues, TemplateResult } from "lit"; -import { customElement, property, query } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { computeRTL } from "../../../homeassistant-frontend/src/common/util/compute_rtl"; import "../../../homeassistant-frontend/src/components/ha-alert"; +import "../../../homeassistant-frontend/src/components/ha-form/ha-form"; +import type { HaFormSchema } from "../../../homeassistant-frontend/src/components/ha-form/types"; import "../../../homeassistant-frontend/src/components/ha-paper-dropdown-menu"; +import "../../../homeassistant-frontend/src/components/ha-settings-row"; import "../../../homeassistant-frontend/src/components/ha-svg-icon"; -import { brandsUrl } from "../../../homeassistant-frontend/src/util/brands-url"; import { getRepositories, repositoryAdd, repositoryDelete } from "../../data/websocket"; import { hacsIconStyle, scrollBarStyle } from "../../styles/element-styles"; import "./hacs-dialog"; @@ -18,19 +16,16 @@ import { HacsDialogBase } from "./hacs-dialog-base"; @customElement("hacs-custom-repositories-dialog") export class HacsCustomRepositoriesDialog extends HacsDialogBase { - @property() private _inputRepository?: string; - @property() private _error: any; - @query("#add-input") private _addInput?: any; - - @query("#category") private _addCategory?: any; + @state() private _addRepositoryData = { category: undefined, repository: undefined }; shouldUpdate(changedProperties: PropertyValues) { return ( changedProperties.has("narrow") || changedProperties.has("active") || changedProperties.has("_error") || + changedProperties.has("_addRepositoryData") || changedProperties.has("repositories") ); } @@ -38,12 +33,28 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase { protected render(): TemplateResult | void { if (!this.active) return html``; const repositories = this.repositories?.filter((repo) => repo.custom); + const addRepositorySchema: HaFormSchema[] = [ + { + type: "string", + name: "repository", + }, + { + type: "select", + name: "category", + optional: true, + options: this.hacs.configuration.categories.map((category) => [ + category, + this.hacs.localize(`common.${category}`), + ]), + }, + ]; return html`
@@ -55,71 +66,42 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase { ${repositories ?.filter((repo) => this.hacs.configuration.categories.includes(repo.category)) .map( - (repo) => html` - ${repo.category === "integration" - ? html` - - ` - : html``} - this._showReopsitoryInfo(String(repo.id))} - three-line - >${repo.name} -
${repo.description}
-
Category: ${repo.category}
 + (repo) => html` this._showReopsitoryInfo(String(repo.id))} + > + ${!this.narrow + ? html`` + : ""} + ${repo.name} + ${repo.full_name} (${repo.category}) + this._removeRepository(repo.id)}> - ` + ` )}
-
-
- - - - - ${this.hacs.configuration.categories.map( - (category) => html` - - ${this.hacs.localize(`common.${category}`)} - - ` - )} - - - + schema.name === "category" + ? this.hacs.localize("dialog_custom_repositories.category") + : this.hacs.localize("common.repository")} + @value-changed=${this._valueChanged} > - ${this.hacs.localize("common.add")} - +
+ + ${this.hacs.localize("common.add")} + `; } @@ -128,27 +110,29 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase { this.hass.connection.subscribeEvents((msg) => (this._error = (msg as any).data), "hacs/error"); } - private _inputValueChanged() { - this._inputRepository = this._addInput?.value; + private _valueChanged(ev) { + this._addRepositoryData = ev.detail.value; } private async _addRepository() { this._error = undefined; - const repository = this._inputRepository; - const category = this._addCategory?.selectedItem?.category; - if (!category) { + if (!this._addRepositoryData.category) { this._error = { message: this.hacs.localize("dialog_custom_repositories.no_category"), }; return; } - if (!repository) { + if (!this._addRepositoryData.repository) { this._error = { message: this.hacs.localize("dialog_custom_repositories.no_repository"), }; return; } - await repositoryAdd(this.hass, repository, category); + await repositoryAdd( + this.hass, + this._addRepositoryData.repository, + this._addRepositoryData.category + ); this.repositories = await getRepositories(this.hass); } @@ -158,16 +142,6 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase { this.repositories = await getRepositories(this.hass); } - private _onImageLoad(ev) { - ev.target.style.visibility = "initial"; - } - - private _onImageError(ev) { - if (ev.target) { - ev.target.outerHTML = ``; - } - } - private async _showReopsitoryInfo(repository: string) { this.dispatchEvent( new CustomEvent("hacs-dialog-secondary", { @@ -186,92 +160,33 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase { scrollBarStyle, hacsIconStyle, css` - .content { - width: 1024px; - display: contents; - } .list { position: relative; - margin-top: 16px; + margin-top: -16px; max-height: 870px; overflow: auto; } - ha-svg-icon { - --mdc-icon-size: 36px; - } - img { - align-items: center; + ha-form { display: block; - justify-content: center; - margin-bottom: 16px; - max-height: 36px; - max-width: 36px; - position: absolute; - } - .delete { - color: var(--hacs-error-color, var(--google-red-500)); - } - paper-item-body { - cursor: pointer; - } - - paper-item-body { - width: 100%; - min-height: var(--paper-item-body-two-line-min-height, 72px); - display: var(--layout-vertical_-_display); - flex-direction: var(--layout-vertical_-_flex-direction); - justify-content: var(--layout-center-justified_-_justify-content); - } - paper-item-body div { - font-size: 14px; - color: var(--secondary-text-color); - } - .add-repository { - display: grid; - width: 100%; - justify-items: right; + padding-bottom: 25px; } - - .add-input { - width: 100%; - height: 40px; - margin-top: 32px; - border: 0; - border-bottom: 1px var(--mdc-theme-primary) solid; - text-align: left; - padding: 0px; - font-size: initial; - color: var(--sidebar-text-color); - font-family: var(--paper-font-body1_-_font-family); - } - input:focus { - outline-offset: 0; - outline: 0; - } - input { - background-color: var(--sidebar-background-color); + ha-form[narrow] { + bottom: 0; + position: absolute; + width: calc(100% - 48px); } - ha-paper-dropdown-menu { - width: 100%; + ha-svg-icon { + --mdc-icon-size: 36px; } - mwc-button { - width: fit-content; - margin-top: 16px; + ha-svg-icon:not(.delete) { + margin-right: 4px; } - - input[narrow], - .add-repository[narrow], - ha-paper-dropdown-menu[narrow], - mwc-button[narrow] { - margin: 0; + ha-settings-row { + cursor: pointer; padding: 0; - left: 0; - top: 0; - width: 100%; - max-width: 100%; } - .add-repository[narrow] { - display: contents; + .delete { + color: var(--hcv-color-error); } `, ]; diff --git a/src/components/dialogs/hacs-dialog.ts b/src/components/dialogs/hacs-dialog.ts index 883f9f59..0d2fae3a 100644 --- a/src/components/dialogs/hacs-dialog.ts +++ b/src/components/dialogs/hacs-dialog.ts @@ -7,10 +7,14 @@ import { HacsDialogBase } from "./hacs-dialog-base"; @customElement("hacs-dialog") export class HacsDialog extends HacsDialogBase { - @property({ type: Boolean }) public hideActions: boolean = false; - @property({ type: Boolean }) public scrimClickAction: boolean = false; - @property({ type: Boolean }) public escapeKeyAction: boolean = false; - @property({ type: Boolean }) public noClose: boolean = false; + @property({ type: Boolean }) public hideActions = false; + + @property({ type: Boolean }) public scrimClickAction = false; + + @property({ type: Boolean }) public escapeKeyAction = false; + + @property({ type: Boolean }) public noClose = false; + @property() public title!: string; protected render(): TemplateResult | void { diff --git a/src/panels/hacs-store-panel.ts b/src/panels/hacs-store-panel.ts index 81d1923a..8793691e 100644 --- a/src/panels/hacs-store-panel.ts +++ b/src/panels/hacs-store-panel.ts @@ -150,7 +150,14 @@ export class HacsStorePanel extends LitElement { { path: mdiBroom, label: this.hacs.localize("menu.dismiss"), - disabled: this.repositories?.filter((repo) => repo.new).length === 0, + disabled: + this.repositories?.filter( + (repo) => + repo.new && + this.hacs.sections + ?.find((panel) => panel.id === this.section) + ?.categories?.includes(repo.category) + ).length === 0, action: () => this._clearAllNewRepositories(), }, {