Use ha-form for download dialog

.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:

.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

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
  >
  <div class="searchandfilter" ?narrow=${this.narrow}>
  <search-input
@@ -229,7 +231,7 @@ export class HacsAddRepositoryDialog extends HacsDialogBase {
  return [
  searchStyles,
  scrollBarStyle,
- hacsIconStyle,
+ HacsStyles,
  css`
  .content {
  width: 100%;

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

@@ -4,20 +4,23 @@ import { css, html, PropertyValues, TemplateResult } from "lit";
 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-circular-progress";
 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 { getRepositories, repositoryAdd, repositoryDelete } from "../../data/websocket";
-import { hacsIconStyle, scrollBarStyle } from "../../styles/element-styles";
+import { scrollBarStyle } from "../../styles/element-styles";
+import { HacsStyles } from "../../styles/hacs-common-style";
 import "./hacs-dialog";
 import { HacsDialogBase } from "./hacs-dialog-base";
 
 @customElement("hacs-custom-repositories-dialog")
 export class HacsCustomRepositoriesDialog extends HacsDialogBase {
  @property() private _error: any;
 
+ @state() private _progress = false;
+
  @state() private _addRepositoryData = { category: undefined, repository: undefined };
 
  shouldUpdate(changedProperties: PropertyValues) {
@@ -26,6 +29,7 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
  changedProperties.has("active") ||
  changedProperties.has("_error") ||
  changedProperties.has("_addRepositoryData") ||
+ changedProperties.has("_progress") ||
  changedProperties.has("repositories")
  );
  }
@@ -105,7 +109,9 @@ export class HacsCustomRepositoriesDialog extends HacsDialogBase {
  this._addRepositoryData.repository === undefined}
  @click=${this._addRepository}
  >
- ${this.hacs.localize("common.add")}
+ ${this._progress
+ ? html`<ha-circular-progress active size="small"></ha-circular-progress>`
+ : this.hacs.localize("common.add")}
  </mwc-button>
  </hacs-dialog>
  `;
@@ -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;
  }

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"';

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,16 +25,15 @@ export class HacsDialog extends HacsDialogBase {
  }
 
  return html`<ha-dialog
+ ?maxWidth=${this.maxWidth}
  ?open=${this.active}
  ?scrimClickAction=${this.scrimClickAction}
  ?escapeKeyAction=${this.escapeKeyAction}
  @closed=${this.closeDialog}
  ?hideActions=${this.hideActions}
  .heading=${!this.noClose ? createCloseHeading(this.hass, this.title) : this.title}
  >
- <div class="content scroll" ?narrow=${this.narrow}>
- <slot></slot>
- </div>
+ <slot></slot>
  <slot class="primary" name="primaryaction" slot="primaryAction"></slot>
  <slot class="secondary" name="secondaryaction" slot="secondaryAction"></slot>
  </ha-dialog>`;
@@ -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);
+ }
+ `,
+ ];
  }
 }

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) =>