Use ha-form for download dialog (#521)

hacs · Nov 7, 2021 · 23a36ab · 23a36ab
1 parent 519f37a
commit 23a36ab
Show file tree

Hide file tree

Showing 16 changed files with 175 additions and 151 deletions.
diff --git 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/[email protected]
         with:

diff --git 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
@@ -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%;

diff --git a/src/components/dialogs/hacs-custom-repositories-dialog.ts b/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;
         }

diff --git 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
@@ -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);
+        }
+      `,
+    ];
   }
 }
diff --git 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) =>