From 23a36ab72193371973d6f668304ba015650bf38e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Joakim=20S=C3=B8rensen?= Date: Sun, 7 Nov 2021 12:55:02 +0100 Subject: [PATCH] Use ha-form for download dialog (#521) --- .github/workflows/ReleaseActions.yml | 5 +- .github/workflows/TestBuild.yml | 4 +- .../dialogs/hacs-add-repository-dialog.ts | 6 +- .../hacs-custom-repositories-dialog.ts | 17 +- src/components/dialogs/hacs-dialog-base.ts | 20 ++- src/components/dialogs/hacs-dialog.ts | 21 ++- src/components/dialogs/hacs-generic-dialog.ts | 5 +- src/components/dialogs/hacs-install-dialog.ts | 164 ++++++++---------- .../dialogs/hacs-navigate-dialog.ts | 2 + .../dialogs/hacs-progress-dialog.ts | 3 +- src/components/dialogs/hacs-removed-dialog.ts | 18 +- .../dialogs/hacs-repository-info-dialog.ts | 28 +-- src/components/dialogs/hacs-update-dialog.ts | 2 + src/components/hacs-repository-card.ts | 7 +- src/styles/element-styles.ts | 21 +-- src/styles/hacs-common-style.ts | 3 +- 16 files changed, 175 insertions(+), 151 deletions(-) diff --git a/.github/workflows/ReleaseActions.yml b/.github/workflows/ReleaseActions.yml index 98669d34..cec63d62 100644 --- a/.github/workflows/ReleaseActions.yml +++ b/.github/workflows/ReleaseActions.yml @@ -14,8 +14,9 @@ jobs: name: Deploy to PyPi steps: - uses: actions/checkout@v2 - - name: Checkout submodules - uses: textbook/git-checkout-submodule-action@master + with: + submodules: recursive + - name: Set up Python uses: actions/setup-python@v2.2.2 with: diff --git a/.github/workflows/TestBuild.yml b/.github/workflows/TestBuild.yml index ac97bffd..84af254e 100644 --- a/.github/workflows/TestBuild.yml +++ b/.github/workflows/TestBuild.yml @@ -18,8 +18,8 @@ jobs: steps: - uses: actions/checkout@v2 - - name: Checkout submodules - uses: textbook/git-checkout-submodule-action@master + with: + submodules: recursive - name: Set up Node ${{ env.NODE_VERSION }} uses: actions/setup-node@v2 diff --git a/src/components/dialogs/hacs-add-repository-dialog.ts b/src/components/dialogs/hacs-add-repository-dialog.ts index ebe4d854..b2e20b9a 100644 --- a/src/components/dialogs/hacs-add-repository-dialog.ts +++ b/src/components/dialogs/hacs-add-repository-dialog.ts @@ -14,7 +14,8 @@ import "../../../homeassistant-frontend/src/components/ha-svg-icon"; import { brandsUrl } from "../../../homeassistant-frontend/src/util/brands-url"; import { Repository } from "../../data/common"; import { activePanel } from "../../panels/hacs-sections"; -import { hacsIconStyle, scrollBarStyle, searchStyles } from "../../styles/element-styles"; +import { scrollBarStyle, searchStyles } from "../../styles/element-styles"; +import { HacsStyles } from "../../styles/hacs-common-style"; import { filterRepositoriesByInput } from "../../tools/filter-repositories-by-input"; import "../hacs-filter"; import "./hacs-dialog"; @@ -109,6 +110,7 @@ export class HacsAddRepositoryDialog extends HacsDialogBase { hideActions scrimClickAction escapeKeyAction + maxWidth >
- ${this.hacs.localize("common.add")} + ${this._progress + ? html`` + : this.hacs.localize("common.add")} `; @@ -121,6 +127,7 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase { private async _addRepository() { this._error = undefined; + this._progress = true; if (!this._addRepositoryData.category) { this._error = { message: this.hacs.localize("dialog_custom_repositories.no_category"), @@ -139,6 +146,7 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase { this._addRepositoryData.category ); this.repositories = await getRepositories(this.hass); + this._progress = false; } private async _removeRepository(repository: string) { @@ -163,11 +171,10 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase { static get styles() { return [ scrollBarStyle, - hacsIconStyle, + HacsStyles, css` .list { position: relative; - margin-top: -16px; max-height: 870px; overflow: auto; } diff --git a/src/components/dialogs/hacs-dialog-base.ts b/src/components/dialogs/hacs-dialog-base.ts index 099d7d32..bdcddfd2 100644 --- a/src/components/dialogs/hacs-dialog-base.ts +++ b/src/components/dialogs/hacs-dialog-base.ts @@ -13,18 +13,31 @@ import { Hacs } from "../../data/hacs"; export class HacsDialogBase extends LitElement { @property({ attribute: false }) public configuration: Configuration; + @property({ attribute: false }) public hacs: Hacs; + @property({ attribute: false }) public critical!: Critical[]; + @property({ attribute: false }) public hass!: HomeAssistant; + @property({ attribute: false }) public lovelace: LovelaceResource[]; + @property({ attribute: false }) public repositories: Repository[]; + @property({ attribute: false }) public route!: Route; + @property({ attribute: false }) public status: Status; + @property({ attribute: false }) public removed: RemovedRepository[]; - @property({ type: Boolean }) public active: boolean = false; - @property({ type: Boolean }) public secondary: boolean = false; - @property({ type: Boolean }) public loading: boolean = true; + + @property({ type: Boolean }) public active = false; + + @property({ type: Boolean }) public secondary = false; + + @property({ type: Boolean }) public loading = true; + @property({ type: Boolean }) public narrow!: boolean; + @property({ type: Boolean }) public sidebarDocked!: boolean; shouldUpdate(changedProperties: PropertyValues) { @@ -44,6 +57,7 @@ export class HacsDialogBase extends LitElement { changedProperties.has("_updating") ); } + public connectedCallback() { super.connectedCallback(); this.sidebarDocked = window.localStorage.getItem("dockedSidebar") === '"docked"'; diff --git a/src/components/dialogs/hacs-dialog.ts b/src/components/dialogs/hacs-dialog.ts index 3169b17e..f4bb9643 100644 --- a/src/components/dialogs/hacs-dialog.ts +++ b/src/components/dialogs/hacs-dialog.ts @@ -1,9 +1,9 @@ -import { html, TemplateResult } from "lit"; +import { css, html, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { createCloseHeading } from "../../../homeassistant-frontend/src/components/ha-dialog"; import { HacsStyles } from "../../styles/hacs-common-style"; -import { hacsStyleDialog, scrollBarStyle } from "../../styles/element-styles"; import { HacsDialogBase } from "./hacs-dialog-base"; +import { haStyleDialog } from "../../../homeassistant-frontend/src/resources/styles"; @customElement("hacs-dialog") export class HacsDialog extends HacsDialogBase { @@ -15,6 +15,8 @@ export class HacsDialog extends HacsDialogBase { @property({ type: Boolean }) public noClose = false; + @property({ type: Boolean }) public maxWidth = false; + @property() public title!: string; protected render(): TemplateResult | void { @@ -23,6 +25,7 @@ export class HacsDialog extends HacsDialogBase { } return html` -
- -
+ `; @@ -49,6 +50,14 @@ export class HacsDialog extends HacsDialogBase { } static get styles() { - return [hacsStyleDialog, scrollBarStyle, HacsStyles]; + return [ + haStyleDialog, + HacsStyles, + css` + ha-dialog[maxWidth] { + --mdc-dialog-max-width: calc(100vw - 32px); + } + `, + ]; } } diff --git a/src/components/dialogs/hacs-generic-dialog.ts b/src/components/dialogs/hacs-generic-dialog.ts index ff8ff306..226635d9 100644 --- a/src/components/dialogs/hacs-generic-dialog.ts +++ b/src/components/dialogs/hacs-generic-dialog.ts @@ -9,9 +9,12 @@ import { HacsDialogBase } from "./hacs-dialog-base"; @customElement("hacs-generic-dialog") export class HacsGenericDialog extends HacsDialogBase { - @property({ type: Boolean }) public markdown: boolean = false; + @property({ type: Boolean }) public markdown = false; + @property() public repository?: string; + @property() public header?: string; + @property() public content?: string; private _getRepository = memoizeOne((repositories: Repository[], repository: string) => diff --git a/src/components/dialogs/hacs-install-dialog.ts b/src/components/dialogs/hacs-install-dialog.ts index 0ff0a315..86469cb1 100644 --- a/src/components/dialogs/hacs-install-dialog.ts +++ b/src/components/dialogs/hacs-install-dialog.ts @@ -1,6 +1,3 @@ -import "@polymer/paper-item/paper-icon-item"; -import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, html, PropertyValues, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import memoizeOne from "memoize-one"; @@ -8,9 +5,8 @@ import { mainWindow } from "../../../homeassistant-frontend/src/common/dom/get_m import { computeRTL } from "../../../homeassistant-frontend/src/common/util/compute_rtl"; import "../../../homeassistant-frontend/src/components/ha-alert"; import "../../../homeassistant-frontend/src/components/ha-circular-progress"; -import "../../../homeassistant-frontend/src/components/ha-formfield"; -import "../../../homeassistant-frontend/src/components/ha-paper-dropdown-menu"; -import "../../../homeassistant-frontend/src/components/ha-switch"; +import "../../../homeassistant-frontend/src/components/ha-form/ha-form"; +import { HaFormSchema } from "../../../homeassistant-frontend/src/components/ha-form/types"; import { showConfirmationDialog } from "../../../homeassistant-frontend/src/dialogs/generic/show-dialog-box"; import { Repository } from "../../data/common"; import { @@ -20,6 +16,7 @@ import { repositoryToggleBeta, repositoryUpdate, } from "../../data/websocket"; +import { HacsStyles } from "../../styles/hacs-common-style"; import { generateLovelaceURL } from "../../tools/added-to-lovelace"; import { updateLovelaceResources } from "../../tools/update-lovelace-resources"; import "../hacs-link"; @@ -30,15 +27,15 @@ import { HacsDialogBase } from "./hacs-dialog-base"; export class HacsInstallDialog extends HacsDialogBase { @property() public repository?: string; - @property() public _repository?: Repository; + @state() private _toggle = true; - @property() private _toggle = true; + @state() private _installing = false; - @property() private _installing = false; + @state() private _error?: any; - @property() private _error?: any; + @state() public _repository?: Repository; - @state() private _version?: any; + @state() private _downloadRepositoryData = { beta: false, version: "" }; shouldUpdate(changedProperties: PropertyValues) { changedProperties.forEach((_oldValue, propName) => { @@ -46,7 +43,7 @@ export class HacsInstallDialog extends HacsDialogBase { this.sidebarDocked = window.localStorage.getItem("dockedSidebar") === '"docked"'; } if (propName === "repositories") { - this._repository = this._getRepository(this.repositories, this.repository); + this._repository = this._getRepository(this.repositories, this.repository!); } }); return ( @@ -55,8 +52,8 @@ export class HacsInstallDialog extends HacsDialogBase { changedProperties.has("active") || changedProperties.has("_toggle") || changedProperties.has("_error") || - changedProperties.has("_version") || changedProperties.has("_repository") || + changedProperties.has("_downloadRepositoryData") || changedProperties.has("_installing") ); } @@ -74,18 +71,44 @@ export class HacsInstallDialog extends HacsDialogBase { }); protected async firstUpdated() { - this._repository = this._getRepository(this.repositories, this.repository); - if (!this._repository.updated_info) { - await repositoryUpdate(this.hass, this._repository.id); + this._repository = this._getRepository(this.repositories, this.repository!); + if (!this._repository?.updated_info) { + await repositoryUpdate(this.hass, this._repository!.id); this.repositories = await getRepositories(this.hass); } this._toggle = false; this.hass.connection.subscribeEvents((msg) => (this._error = (msg as any).data), "hacs/error"); + this._downloadRepositoryData.beta = this._repository!.beta; + this._downloadRepositoryData.version = + this._repository?.version_or_commit === "version" ? this._repository.releases[0] : ""; } protected render(): TemplateResult | void { if (!this.active || !this._repository) return html``; const installPath = this._getInstallPath(this._repository); + + const donwloadRepositorySchema: HaFormSchema[] = [ + { + type: "boolean", + name: "beta", + }, + { + type: "select", + name: "version", + optional: true, + options: + this._repository.version_or_commit === "version" + ? this._repository.releases + .map((version) => [version, version]) + .concat([ + this._repository.full_name === "hacs/integration" || + this._repository.hide_default_branch + ? ["", ""] + : [this._repository.default_branch, this._repository.default_branch], + ]) + : [], + }, + ]; return html`
${this._repository.version_or_commit === "version" - ? html`
- - - -
-
- - - ${this._repository.releases.map( - (release) => - html`${release}` - )} - ${this._repository.full_name === "hacs/integration" || - this._repository.hide_default_branch - ? "" - : html` - ${this._repository.default_branch} - `} - - -
` + ? html` + + schema.name === "beta" + ? this.hacs.localize("dialog_install.show_beta") + : this.hacs.localize("dialog_install.select_version")} + @value-changed=${this._valueChanged} + > + + ` : ""} ${!this._repository.can_install ? html` @@ -171,8 +166,13 @@ export class HacsInstallDialog extends HacsDialogBase { : ""}
${this._installing @@ -186,18 +186,14 @@ export class HacsInstallDialog extends HacsDialogBase { `; } - private _versionSelectChanged(ev: CustomEvent): void { - const version = (ev.currentTarget as any).selectedItem.version; - if (version !== this._version) { - this._version = (ev.currentTarget as any).selectedItem.version; + private async _valueChanged(ev) { + if (this._downloadRepositoryData.beta !== ev.detail.value.beta) { + this._toggle = true; + await repositoryToggleBeta(this.hass, this.repository!); + this.repositories = await getRepositories(this.hass); + this._toggle = false; } - } - - private async _toggleBeta(): Promise { - this._toggle = true; - await repositoryToggleBeta(this.hass, this.repository); - this.repositories = await getRepositories(this.hass); - this._toggle = false; + this._downloadRepositoryData = ev.detail.value; } private async _installRepository(): Promise { @@ -205,9 +201,13 @@ export class HacsInstallDialog extends HacsDialogBase { if (!this._repository) { return; } + + const selectedVersion = + this._downloadRepositoryData.version || + this._repository.available_version || + this._repository.default_branch; + if (this._repository?.version_or_commit !== "commit") { - const selectedVersion = - this._version || this._repository.available_version || this._repository.default_branch; await repositoryInstallVersion(this.hass, this._repository.id, selectedVersion); } else { await repositoryInstall(this.hass, this._repository.id); @@ -215,7 +215,7 @@ export class HacsInstallDialog extends HacsDialogBase { this.hacs.log.debug(this._repository.category, "_installRepository"); this.hacs.log.debug(this.hacs.status.lovelace_mode, "_installRepository"); if (this._repository.category === "plugin" && this.hacs.status.lovelace_mode === "storage") { - await updateLovelaceResources(this.hass, this._repository, this._version); + await updateLovelaceResources(this.hass, this._repository, selectedVersion); } this._installing = false; @@ -250,30 +250,14 @@ export class HacsInstallDialog extends HacsDialogBase { static get styles(): CSSResultGroup { return [ + HacsStyles, css` - .version-select-dropdown { - width: 100%; - } - .content { - padding: 32px 8px; - } .note { - margin-bottom: -32px; margin-top: 12px; } .lovelace { margin-top: 8px; } - paper-menu-button { - color: var(--secondary-text-color); - padding: 0; - } - paper-item { - cursor: pointer; - } - paper-item-body { - opacity: var(--dark-primary-opacity); - } pre { white-space: pre-line; user-select: all; diff --git a/src/components/dialogs/hacs-navigate-dialog.ts b/src/components/dialogs/hacs-navigate-dialog.ts index 5d17d571..8ebcf376 100644 --- a/src/components/dialogs/hacs-navigate-dialog.ts +++ b/src/components/dialogs/hacs-navigate-dialog.ts @@ -3,6 +3,7 @@ import "@material/mwc-linear-progress"; import { css, html, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { navigate } from "../../../homeassistant-frontend/src/common/navigate"; +import { HacsStyles } from "../../styles/hacs-common-style"; import "./hacs-dialog"; import { HacsDialogBase } from "./hacs-dialog-base"; @@ -66,6 +67,7 @@ export class HacsNavigateDialog extends HacsDialogBase { static get styles() { return [ + HacsStyles, css` hacs-dialog { --hacs-dialog-max-width: 460px; diff --git a/src/components/dialogs/hacs-progress-dialog.ts b/src/components/dialogs/hacs-progress-dialog.ts index 6c8a1206..11ceac45 100644 --- a/src/components/dialogs/hacs-progress-dialog.ts +++ b/src/components/dialogs/hacs-progress-dialog.ts @@ -1,3 +1,4 @@ +import "@material/mwc-button/mwc-button"; import "../../../homeassistant-frontend/src/components/ha-circular-progress"; import { html, TemplateResult, PropertyValues } from "lit"; import { customElement, property } from "lit/decorators"; @@ -14,7 +15,7 @@ export class HacsProgressDialog extends HacsDialogBase { @property() public confirm: () => Promise; - @property({ type: Boolean }) private _inProgress: boolean = false; + @property({ type: Boolean }) private _inProgress = false; shouldUpdate(changedProperties: PropertyValues) { return ( diff --git a/src/components/dialogs/hacs-removed-dialog.ts b/src/components/dialogs/hacs-removed-dialog.ts index 8256a9b3..4355cef1 100644 --- a/src/components/dialogs/hacs-removed-dialog.ts +++ b/src/components/dialogs/hacs-removed-dialog.ts @@ -2,13 +2,15 @@ import { css, html, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { Repository } from "../../data/common"; import { deleteResource, fetchResources, repositoryUninstall } from "../../data/websocket"; +import { HacsStyles } from "../../styles/hacs-common-style"; import "./hacs-dialog"; import { HacsDialogBase } from "./hacs-dialog-base"; @customElement("hacs-removed-dialog") export class HacsRemovedDialog extends HacsDialogBase { @property({ attribute: false }) public repository: Repository; - @property({ type: Boolean }) private _updating: boolean = false; + + @property({ type: Boolean }) private _updating = false; protected render(): TemplateResult | void { if (!this.active) return html``; @@ -54,11 +56,14 @@ export class HacsRemovedDialog extends HacsDialogBase { } static get styles() { - return css` - .uninstall { - --mdc-theme-primary: var(--hcv-color-error); - } - `; + return [ + HacsStyles, + css` + .uninstall { + --mdc-theme-primary: var(--hcv-color-error); + } + `, + ]; } private _lovelaceUrl(): string { @@ -83,6 +88,7 @@ export class HacsRemovedDialog extends HacsDialogBase { this._updating = false; this.active = false; } + private async _ignoreMessage(): Promise { this._updating = false; this.active = false; diff --git a/src/components/dialogs/hacs-repository-info-dialog.ts b/src/components/dialogs/hacs-repository-info-dialog.ts index e9403c75..4d1f2c82 100644 --- a/src/components/dialogs/hacs-repository-info-dialog.ts +++ b/src/components/dialogs/hacs-repository-info-dialog.ts @@ -7,11 +7,11 @@ import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; import { Repository } from "../../data/common"; import { getRepositories, repositoryUpdate } from "../../data/websocket"; -import { scrollBarStyle } from "../../styles/element-styles"; import { markdown } from "../../tools/markdown/markdown"; import "../hacs-link"; import "./hacs-dialog"; import { HacsDialogBase } from "./hacs-dialog-base"; +import { HacsStyles } from "../../styles/hacs-common-style"; @customElement("hacs-repository-info-dialog") export class HacsRepositoryDialog extends HacsDialogBase { @@ -73,10 +73,12 @@ export class HacsRepositoryDialog extends HacsDialogBase { .active=${this.active} .title=${this._repository.name || ""} .hass=${this.hass} + maxWidth > -
- ${this._repository.updated_info - ? html`
+
+ ${!this.narrow + ? html` +
${this._repository.installed ? html`
- ${markdown.html( - this._repository.additional_info || this.hacs.localize("dialog_info.no_info"), - this._repository - )}` + ` + : ""} + ${this._repository.updated_info + ? markdown.html( + this._repository.additional_info || this.hacs.localize("dialog_info.no_info"), + this._repository + ) : html`
@@ -144,13 +149,8 @@ export class HacsRepositoryDialog extends HacsDialogBase { static get styles() { return [ - scrollBarStyle, + HacsStyles, css` - .content { - width: calc(100% - 12px); - max-height: 75vh; - padding-right: 12px; - } ha-chip { --ha-chip-icon-color: var(--hacs-chip-color, var(--primary-color)); } diff --git a/src/components/dialogs/hacs-update-dialog.ts b/src/components/dialogs/hacs-update-dialog.ts index 5a8ef60a..83a3c5f7 100644 --- a/src/components/dialogs/hacs-update-dialog.ts +++ b/src/components/dialogs/hacs-update-dialog.ts @@ -18,6 +18,7 @@ import { repositoryReleasenotes, } from "../../data/websocket"; import { scrollBarStyle } from "../../styles/element-styles"; +import { HacsStyles } from "../../styles/hacs-common-style"; import { markdown } from "../../tools/markdown/markdown"; import { updateLovelaceResources } from "../../tools/update-lovelace-resources"; import "../hacs-link"; @@ -216,6 +217,7 @@ export class HacsUpdateDialog extends HacsDialogBase { static get styles(): CSSResultGroup { return [ scrollBarStyle, + HacsStyles, css` .content { width: 360px; diff --git a/src/components/hacs-repository-card.ts b/src/components/hacs-repository-card.ts index 00e6ec40..b66bfd12 100644 --- a/src/components/hacs-repository-card.ts +++ b/src/components/hacs-repository-card.ts @@ -120,14 +120,9 @@ export class HacsRepositoryCard extends LitElement { ${this.repository.new && !this.repository.installed ? html`
- ${this.hacs.localize("common.install")}
-
- - ${this.hacs.localize("repository_card.information")} - -
${this.hacs.localize("common.repository")} diff --git a/src/styles/element-styles.ts b/src/styles/element-styles.ts index 2b196895..f7122632 100644 --- a/src/styles/element-styles.ts +++ b/src/styles/element-styles.ts @@ -1,6 +1,4 @@ import { css } from "lit"; -import { haStyleDialog } from "../../homeassistant-frontend/src/resources/styles"; - export const hacsLinkStyle = css` a { text-decoration: var(--hcv-text-decoration-link); @@ -9,12 +7,20 @@ export const hacsLinkStyle = css` `; export const hacsIconStyle = css` - paper-menu-button, ha-svg-icon { color: var(--hcv-color-icon); } `; +export const hacsButtonStyle = css` + mwc-button[raised] { + border-radius: 4px; + } + mwc-button[raised] > ha-circular-progress { + --mdc-theme-primary: var(--hcv-text-color-primary); + } +`; + export const hassTabsSubpage = css` hass-tabs-subpage { font-family: var(--paper-font-body1_-_font-family); @@ -71,12 +77,3 @@ export const scrollBarStyle = css` scrollbar-width: thin; } `; - -export const hacsStyleDialog = [ - haStyleDialog, - css` - .primary { - margin-left: 52px; - } - `, -]; diff --git a/src/styles/hacs-common-style.ts b/src/styles/hacs-common-style.ts index bd7be8a5..cd5c8e5b 100644 --- a/src/styles/hacs-common-style.ts +++ b/src/styles/hacs-common-style.ts @@ -1,5 +1,5 @@ import { css, CSSResultGroup } from "lit"; -import { hacsIconStyle, hacsLinkStyle } from "./element-styles"; +import { hacsButtonStyle, hacsIconStyle, hacsLinkStyle } from "./element-styles"; import { haStyle } from "../../homeassistant-frontend/src/resources/styles"; export const hacsCommonClasses = css` @@ -27,4 +27,5 @@ export const HacsStyles: CSSResultGroup = [ hacsIconStyle, hacsCommonClasses, hacsLinkStyle, + hacsButtonStyle, ];