From 3b779bf423eb19e50c5b4b366854e24fddf19f84 Mon Sep 17 00:00:00 2001 From: Paulus Schoutsen Date: Mon, 22 Jun 2020 14:51:36 -0700 Subject: [PATCH] Add ha circular progress (#6205) --- demo/src/custom-cards/ha-demo-card.ts | 4 +- .../config/hassio-addon-config-tab.ts | 4 +- .../hassio-addon-documentation-tab.ts | 4 +- .../src/addon-view/hassio-addon-dashboard.ts | 4 +- .../addon-view/info/hassio-addon-info-tab.ts | 4 +- .../addon-view/log/hassio-addon-log-tab.ts | 4 +- .../dialog-hassio-repositories.ts | 4 +- package.json | 2 +- src/components/buttons/ha-progress-button.js | 6 +- src/components/ha-circular-progress.ts | 85 +++++++++++++++++++ src/components/state-history-charts.js | 2 +- .../dialog-config-entry-system-options.ts | 3 +- .../config-flow/dialog-data-entry-flow.ts | 2 +- src/dialogs/config-flow/step-flow-form.ts | 4 +- src/dialogs/config-flow/step-flow-loading.ts | 6 +- .../config-flow/step-flow-pick-handler.ts | 1 - .../controls/more-info-configurator.js | 8 +- src/layouts/ha-init-page.ts | 6 +- src/layouts/hass-loading-screen.ts | 4 +- src/layouts/hass-router-page.ts | 12 ++- src/layouts/loading-screen.ts | 4 +- .../automation/thingtalk/dialog-thingtalk.ts | 12 +-- .../config/cloud/account/cloud-webhooks.ts | 4 +- src/panels/config/ha-entity-config.js | 7 +- src/panels/config/info/system-health-card.ts | 4 +- .../zha/zha-add-devices-page.ts | 9 +- .../zha/zha-add-group-page.ts | 12 +-- .../integration-panels/zha/zha-group-page.ts | 16 ++-- .../integration-panels/zwave/zwave-network.ts | 4 +- src/panels/config/logs/system-log-card.ts | 4 +- .../ha-config-server-control.ts | 6 +- src/panels/config/users/dialog-add-user.ts | 4 +- .../template/developer-tools-template.js | 7 +- src/panels/history/ha-panel-history.ts | 8 +- src/panels/logbook/ha-panel-logbook.ts | 8 +- .../lovelace/cards/hui-starting-card.ts | 6 +- .../editor/card-editor/hui-card-editor.ts | 6 +- .../editor/card-editor/hui-card-picker.ts | 2 +- .../card-editor/hui-dialog-edit-card.ts | 14 +-- .../card-editor/hui-dialog-suggest-card.ts | 7 +- .../lovelace/editor/hui-dialog-save-config.ts | 12 +-- .../hui-dialog-edit-lovelace.ts | 12 +-- .../view-editor/hui-dialog-edit-view.ts | 12 +-- .../header-footer/hui-graph-header-footer.ts | 6 +- src/panels/lovelace/hui-editor.ts | 2 +- .../mailbox/ha-dialog-show-audio-message.js | 4 +- src/panels/profile/ha-change-password-card.js | 4 +- .../profile/ha-mfa-module-setup-flow.js | 6 +- src/resources/ha-style.ts | 6 -- yarn.lock | 27 ++++-- 50 files changed, 261 insertions(+), 143 deletions(-) create mode 100644 src/components/ha-circular-progress.ts diff --git a/demo/src/custom-cards/ha-demo-card.ts b/demo/src/custom-cards/ha-demo-card.ts index aeb248d79a..f2cfa88a47 100644 --- a/demo/src/custom-cards/ha-demo-card.ts +++ b/demo/src/custom-cards/ha-demo-card.ts @@ -1,5 +1,4 @@ import "@material/mwc-button"; -import "@polymer/paper-spinner/paper-spinner-lite"; import { css, CSSResult, @@ -10,6 +9,7 @@ import { } from "lit-element"; import { until } from "lit-html/directives/until"; import "../../../src/components/ha-card"; +import "../../../src/components/ha-circular-progress"; import { LovelaceCardConfig } from "../../../src/data/lovelace"; import { MockHomeAssistant } from "../../../src/fake_data/provide_hass"; import { Lovelace, LovelaceCard } from "../../../src/panels/lovelace/types"; @@ -49,7 +49,7 @@ export class HADemoCard extends LitElement implements LovelaceCard {
${this._switching - ? html` ` + ? html`` : until( selectedDemoConfig.then( (conf) => html` diff --git a/hassio/src/addon-view/config/hassio-addon-config-tab.ts b/hassio/src/addon-view/config/hassio-addon-config-tab.ts index d9bf1f12b3..29e3f1778e 100644 --- a/hassio/src/addon-view/config/hassio-addon-config-tab.ts +++ b/hassio/src/addon-view/config/hassio-addon-config-tab.ts @@ -1,4 +1,3 @@ -import "@polymer/paper-spinner/paper-spinner-lite"; import { css, CSSResult, @@ -12,6 +11,7 @@ import { HassioAddonDetails } from "../../../../src/data/hassio/addon"; import { haStyle } from "../../../../src/resources/styles"; import { HomeAssistant } from "../../../../src/types"; import { hassioStyle } from "../../resources/hassio-style"; +import "../../../../src/components/ha-circular-progress"; import "./hassio-addon-audio"; import "./hassio-addon-config"; import "./hassio-addon-network"; @@ -24,7 +24,7 @@ class HassioAddonConfigDashboard extends LitElement { protected render(): TemplateResult { if (!this.addon) { - return html` `; + return html``; } return html`
diff --git a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts index 34d0087120..9a96e96e7d 100644 --- a/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts +++ b/hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts @@ -1,4 +1,3 @@ -import "@polymer/paper-spinner/paper-spinner-lite"; import { css, CSSResult, @@ -14,6 +13,7 @@ import { HassioAddonDetails, } from "../../../../src/data/hassio/addon"; import "../../../../src/layouts/loading-screen"; +import "../../../../src/components/ha-circular-progress"; import { haStyle } from "../../../../src/resources/styles"; import { HomeAssistant } from "../../../../src/types"; import { hassioStyle } from "../../resources/hassio-style"; @@ -35,7 +35,7 @@ class HassioAddonDocumentationDashboard extends LitElement { protected render(): TemplateResult { if (!this.addon) { - return html` `; + return html``; } return html`
diff --git a/hassio/src/addon-view/hassio-addon-dashboard.ts b/hassio/src/addon-view/hassio-addon-dashboard.ts index 029880fb0f..9876486d5f 100644 --- a/hassio/src/addon-view/hassio-addon-dashboard.ts +++ b/hassio/src/addon-view/hassio-addon-dashboard.ts @@ -4,7 +4,6 @@ import { mdiInformationVariant, mdiMathLog, } from "@mdi/js"; -import "@polymer/paper-spinner/paper-spinner-lite"; import { css, CSSResult, @@ -20,6 +19,7 @@ import { HassioAddonDetails, } from "../../../src/data/hassio/addon"; import "../../../src/layouts/hass-tabs-subpage"; +import "../../../src/components/ha-circular-progress"; import type { PageNavigation } from "../../../src/layouts/hass-tabs-subpage"; import { haStyle } from "../../../src/resources/styles"; import { HomeAssistant, Route } from "../../../src/types"; @@ -56,7 +56,7 @@ class HassioAddonDashboard extends LitElement { protected render(): TemplateResult { if (!this.addon) { - return html` `; + return html``; } const addonTabs: PageNavigation[] = [ diff --git a/hassio/src/addon-view/info/hassio-addon-info-tab.ts b/hassio/src/addon-view/info/hassio-addon-info-tab.ts index 604868fad1..a2c8fc378b 100644 --- a/hassio/src/addon-view/info/hassio-addon-info-tab.ts +++ b/hassio/src/addon-view/info/hassio-addon-info-tab.ts @@ -1,4 +1,3 @@ -import "@polymer/paper-spinner/paper-spinner-lite"; import { css, CSSResult, @@ -9,6 +8,7 @@ import { TemplateResult, } from "lit-element"; import { HassioAddonDetails } from "../../../../src/data/hassio/addon"; +import "../../../../src/components/ha-circular-progress"; import { haStyle } from "../../../../src/resources/styles"; import { HomeAssistant } from "../../../../src/types"; import { hassioStyle } from "../../resources/hassio-style"; @@ -24,7 +24,7 @@ class HassioAddonInfoDashboard extends LitElement { protected render(): TemplateResult { if (!this.addon) { - return html` `; + return html``; } return html` diff --git a/hassio/src/addon-view/log/hassio-addon-log-tab.ts b/hassio/src/addon-view/log/hassio-addon-log-tab.ts index 66686b256e..8961e61dd9 100644 --- a/hassio/src/addon-view/log/hassio-addon-log-tab.ts +++ b/hassio/src/addon-view/log/hassio-addon-log-tab.ts @@ -1,4 +1,3 @@ -import "@polymer/paper-spinner/paper-spinner-lite"; import { css, CSSResult, @@ -9,6 +8,7 @@ import { TemplateResult, } from "lit-element"; import { HassioAddonDetails } from "../../../../src/data/hassio/addon"; +import "../../../../src/components/ha-circular-progress"; import { haStyle } from "../../../../src/resources/styles"; import { HomeAssistant } from "../../../../src/types"; import { hassioStyle } from "../../resources/hassio-style"; @@ -22,7 +22,7 @@ class HassioAddonLogDashboard extends LitElement { protected render(): TemplateResult { if (!this.addon) { - return html` `; + return html` `; } return html`
diff --git a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts index 47563e57b7..d32bfd756c 100644 --- a/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts +++ b/hassio/src/dialogs/repositories/dialog-hassio-repositories.ts @@ -5,7 +5,7 @@ import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-spinner/paper-spinner"; +import "../../../../src/components/ha-circular-progress"; import { css, CSSResult, @@ -108,7 +108,7 @@ class HassioRepositoriesDialog extends LitElement { > ${this._prosessing - ? html`` + ? html`` : "Add"}
diff --git a/package.json b/package.json index a6c8f904ef..7fc5052144 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,7 @@ "@fullcalendar/core": "^5.0.0-beta.2", "@fullcalendar/daygrid": "^5.0.0-beta.2", "@material/chips": "7.0.0-canary.d92d8c93e.0", + "@material/circular-progress": "7.0.0-canary.d92d8c93e.0", "@material/mwc-button": "^0.15.0", "@material/mwc-checkbox": "^0.15.0", "@material/mwc-dialog": "^0.15.0", @@ -64,7 +65,6 @@ "@polymer/paper-radio-group": "^3.0.1", "@polymer/paper-ripple": "^3.0.1", "@polymer/paper-slider": "^3.0.1", - "@polymer/paper-spinner": "^3.0.2", "@polymer/paper-styles": "^3.0.1", "@polymer/paper-tabs": "^3.0.1", "@polymer/paper-toast": "^3.0.1", diff --git a/src/components/buttons/ha-progress-button.js b/src/components/buttons/ha-progress-button.js index f9f7927172..a00e6209cb 100644 --- a/src/components/buttons/ha-progress-button.js +++ b/src/components/buttons/ha-progress-button.js @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import "@polymer/paper-spinner/paper-spinner"; +import "../ha-circular-progress"; import { html } from "@polymer/polymer/lib/utils/html-tag"; /* eslint-plugin-disable lit */ import { PolymerElement } from "@polymer/polymer/polymer-element"; @@ -51,7 +51,9 @@ class HaProgressButton extends PolymerElement {
`; diff --git a/src/components/ha-circular-progress.ts b/src/components/ha-circular-progress.ts new file mode 100644 index 0000000000..c15ce80fd4 --- /dev/null +++ b/src/components/ha-circular-progress.ts @@ -0,0 +1,85 @@ +import { + LitElement, + TemplateResult, + property, + svg, + html, + customElement, + unsafeCSS, + SVGTemplateResult, +} from "lit-element"; +// @ts-ignore +import progressStyles from "@material/circular-progress/dist/mdc.circular-progress.min.css"; +import { classMap } from "lit-html/directives/class-map"; + +@customElement("ha-circular-progress") +export class HaCircularProgress extends LitElement { + @property({ type: Boolean }) + public active = false; + + @property() + public alt = "Loading"; + + @property() + public size: "small" | "medium" | "large" = "medium"; + + protected render(): TemplateResult | void { + let indeterminatePart: SVGTemplateResult; + + if (this.size === "small") { + indeterminatePart = svg` + + + `; + } else if (this.size === "large") { + indeterminatePart = svg` + + + `; + } else { + // medium + indeterminatePart = svg` + + + `; + } + + // ignoring prettier as it will introduce unwanted whitespace + // We have not implemented the determinate support of mdc circular progress. + // prettier-ignore + return html` +
+
+ +
+
+ `; + } + + static get styles() { + return unsafeCSS(progressStyles); + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-circular-progress": HaCircularProgress; + } +} diff --git a/src/components/state-history-charts.js b/src/components/state-history-charts.js index 2f87327481..3127f00fac 100644 --- a/src/components/state-history-charts.js +++ b/src/components/state-history-charts.js @@ -1,4 +1,4 @@ -import "@polymer/paper-spinner/paper-spinner"; +import "./ha-circular-progress"; import { html } from "@polymer/polymer/lib/utils/html-tag"; /* eslint-plugin-disable lit */ import { PolymerElement } from "@polymer/polymer/polymer-element"; diff --git a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts index b995ce6d1d..b7cbcf4b39 100644 --- a/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts +++ b/src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts @@ -10,6 +10,7 @@ import { TemplateResult, } from "lit-element"; import "../../components/dialog/ha-paper-dialog"; +import "../../components/ha-circular-progress"; import "../../components/ha-switch"; import "../../components/ha-formfield"; import type { HaSwitch } from "../../components/ha-switch"; @@ -75,7 +76,7 @@ class DialogConfigEntrySystemOptions extends LitElement { ${this._loading ? html` ` : html` diff --git a/src/dialogs/config-flow/dialog-data-entry-flow.ts b/src/dialogs/config-flow/dialog-data-entry-flow.ts index a92f7e36d9..228cead5ce 100644 --- a/src/dialogs/config-flow/dialog-data-entry-flow.ts +++ b/src/dialogs/config-flow/dialog-data-entry-flow.ts @@ -1,7 +1,7 @@ import "@material/mwc-button"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import "../../components/ha-icon-button"; -import "@polymer/paper-spinner/paper-spinner"; +import "../../components/ha-circular-progress"; import "@polymer/paper-tooltip/paper-tooltip"; import type { UnsubscribeFunc } from "home-assistant-js-websocket"; import { diff --git a/src/dialogs/config-flow/step-flow-form.ts b/src/dialogs/config-flow/step-flow-form.ts index 7822a21f6f..a0d13a98e6 100644 --- a/src/dialogs/config-flow/step-flow-form.ts +++ b/src/dialogs/config-flow/step-flow-form.ts @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import "@polymer/paper-spinner/paper-spinner"; +import "../../components/ha-circular-progress"; import "@polymer/paper-tooltip/paper-tooltip"; import { css, @@ -76,7 +76,7 @@ class StepFlowForm extends LitElement { ${this._loading ? html` ` : html` diff --git a/src/dialogs/config-flow/step-flow-loading.ts b/src/dialogs/config-flow/step-flow-loading.ts index 94eceb6ce6..8b4d28735b 100644 --- a/src/dialogs/config-flow/step-flow-loading.ts +++ b/src/dialogs/config-flow/step-flow-loading.ts @@ -1,4 +1,3 @@ -import "@polymer/paper-spinner/paper-spinner-lite"; import { css, CSSResult, @@ -8,6 +7,7 @@ import { property, TemplateResult, } from "lit-element"; +import "../../components/ha-circular-progress"; @customElement("step-flow-loading") class StepFlowLoading extends LitElement { @@ -17,7 +17,7 @@ class StepFlowLoading extends LitElement { return html` `; } @@ -28,7 +28,7 @@ class StepFlowLoading extends LitElement { padding: 50px 100px; text-align: center; } - paper-spinner-lite { + ha-circular-progress { margin-top: 16px; } `; diff --git a/src/dialogs/config-flow/step-flow-pick-handler.ts b/src/dialogs/config-flow/step-flow-pick-handler.ts index 3383b094d2..3edd9cc581 100644 --- a/src/dialogs/config-flow/step-flow-pick-handler.ts +++ b/src/dialogs/config-flow/step-flow-pick-handler.ts @@ -1,6 +1,5 @@ import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-spinner/paper-spinner-lite"; import Fuse from "fuse.js"; import { css, diff --git a/src/dialogs/more-info/controls/more-info-configurator.js b/src/dialogs/more-info/controls/more-info-configurator.js index 4e6d7cdbd5..590e01b287 100644 --- a/src/dialogs/more-info/controls/more-info-configurator.js +++ b/src/dialogs/more-info/controls/more-info-configurator.js @@ -2,7 +2,7 @@ import "@material/mwc-button"; import "@polymer/iron-flex-layout/iron-flex-layout-classes"; import "@polymer/iron-input/iron-input"; import "@polymer/paper-input/paper-input"; -import "@polymer/paper-spinner/paper-spinner"; +import "../../../components/ha-circular-progress"; import { html } from "@polymer/polymer/lib/utils/html-tag"; /* eslint-plugin-disable lit */ import { PolymerElement } from "@polymer/polymer/polymer-element"; @@ -38,7 +38,7 @@ class MoreInfoConfigurator extends PolymerElement { height: 41px; } - paper-spinner { + ha-circular-progress { width: 14px; height: 14px; margin-right: 20px; @@ -75,11 +75,11 @@ class MoreInfoConfigurator extends PolymerElement { disabled="[[isConfiguring]]" on-click="submitClicked" > - + > [[stateObj.attributes.submit_caption]]

diff --git a/src/layouts/ha-init-page.ts b/src/layouts/ha-init-page.ts index 7a36e41448..3e98b1bea0 100644 --- a/src/layouts/ha-init-page.ts +++ b/src/layouts/ha-init-page.ts @@ -1,7 +1,7 @@ import "@material/mwc-button"; -import "@polymer/paper-spinner/paper-spinner-lite"; import { css, CSSResult, html, LitElement, property } from "lit-element"; import { removeInitSkeleton } from "../util/init-skeleton"; +import "../components/ha-circular-progress"; class HaInitPage extends LitElement { @property({ type: Boolean }) public error = false; @@ -28,7 +28,7 @@ class HaInitPage extends LitElement { : ""} ` : html` - +

Loading data

`}
@@ -52,7 +52,7 @@ class HaInitPage extends LitElement { justify-content: center; align-items: center; } - paper-spinner-lite { + ha-circular-progress { margin-top: 9px; } a { diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts index fbd0bb787a..83021927d9 100644 --- a/src/layouts/hass-loading-screen.ts +++ b/src/layouts/hass-loading-screen.ts @@ -1,5 +1,4 @@ import "@polymer/app-layout/app-toolbar/app-toolbar"; -import "@polymer/paper-spinner/paper-spinner-lite"; import { css, CSSResultArray, @@ -9,6 +8,7 @@ import { property, TemplateResult, } from "lit-element"; +import "../components/ha-circular-progress"; import "../components/ha-menu-button"; import "../components/ha-icon-button-arrow-prev"; import { haStyle } from "../resources/styles"; @@ -39,7 +39,7 @@ class HassLoadingScreen extends LitElement { `}
- +
`; } diff --git a/src/layouts/hass-router-page.ts b/src/layouts/hass-router-page.ts index dcb312bd26..d463b86ca6 100644 --- a/src/layouts/hass-router-page.ts +++ b/src/layouts/hass-router-page.ts @@ -147,6 +147,8 @@ export class HassRouterPage extends UpdatingElement { ? routeOptions.load() : Promise.resolve(); + let showLoadingScreenTimeout: undefined | number; + // Check when loading the page source failed. loadProm.catch((err) => { // eslint-disable-next-line @@ -158,7 +160,13 @@ export class HassRouterPage extends UpdatingElement { } // Removes either loading screen or the panel - this.removeChild(this.lastChild!); + if (this.lastChild) { + this.removeChild(this.lastChild!); + } + + if (showLoadingScreenTimeout) { + clearTimeout(showLoadingScreenTimeout); + } // Show error screen const errorEl = document.createElement("hass-error-screen"); @@ -177,7 +185,7 @@ export class HassRouterPage extends UpdatingElement { // That way we won't have a double fast flash on fast connections. let created = false; - setTimeout(() => { + showLoadingScreenTimeout = window.setTimeout(() => { if (created || this._currentPage !== newPage) { return; } diff --git a/src/layouts/loading-screen.ts b/src/layouts/loading-screen.ts index 060e97b147..5d0270c261 100644 --- a/src/layouts/loading-screen.ts +++ b/src/layouts/loading-screen.ts @@ -1,4 +1,3 @@ -import "@polymer/paper-spinner/paper-spinner-lite"; import { css, CSSResult, @@ -7,11 +6,12 @@ import { LitElement, TemplateResult, } from "lit-element"; +import "../components/ha-circular-progress"; @customElement("loading-screen") class LoadingScreen extends LitElement { protected render(): TemplateResult { - return html` `; + return html` `; } static get styles(): CSSResult { diff --git a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts index 096b1e0e5b..7f1a73d196 100644 --- a/src/panels/config/automation/thingtalk/dialog-thingtalk.ts +++ b/src/panels/config/automation/thingtalk/dialog-thingtalk.ts @@ -2,7 +2,7 @@ import "@material/mwc-button"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; -import "@polymer/paper-spinner/paper-spinner"; +import "../../../../components/ha-circular-progress"; import { css, CSSResult, @@ -132,10 +132,10 @@ class DialogThingtalk extends LitElement { Skip - + > Create automation
@@ -245,15 +245,15 @@ class DialogThingtalk extends LitElement { mwc-button.left { margin-right: auto; } - mwc-button paper-spinner { + mwc-button ha-circular-progress { width: 14px; height: 14px; margin-right: 20px; } - paper-spinner { + ha-circular-progress { display: none; } - paper-spinner[active] { + ha-circular-progress[active] { display: block; } .error { diff --git a/src/panels/config/cloud/account/cloud-webhooks.ts b/src/panels/config/cloud/account/cloud-webhooks.ts index 58a9053a91..bde7ec9f77 100644 --- a/src/panels/config/cloud/account/cloud-webhooks.ts +++ b/src/panels/config/cloud/account/cloud-webhooks.ts @@ -1,6 +1,6 @@ import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-spinner/paper-spinner"; +import "../../../../components/ha-circular-progress"; import { html, LitElement, property, PropertyValues } from "lit-element"; import "../../../../components/ha-card"; import "../../../../components/ha-switch"; @@ -119,7 +119,7 @@ export class CloudWebhooks extends LitElement { ${this._progress.includes(entry.webhook_id) ? html`
- +
` : this._cloudHooks![entry.webhook_id] diff --git a/src/panels/config/ha-entity-config.js b/src/panels/config/ha-entity-config.js index ed3bed78eb..7b774dde44 100644 --- a/src/panels/config/ha-entity-config.js +++ b/src/panels/config/ha-entity-config.js @@ -2,7 +2,7 @@ import "@material/mwc-button"; import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-listbox/paper-listbox"; -import "@polymer/paper-spinner/paper-spinner"; +import "../../components/ha-circular-progress"; import { html } from "@polymer/polymer/lib/utils/html-tag"; /* eslint-plugin-disable lit */ import { PolymerElement } from "@polymer/polymer/polymer-element"; @@ -65,7 +65,10 @@ class HaEntityConfig extends PolymerElement {
diff --git a/src/panels/config/info/system-health-card.ts b/src/panels/config/info/system-health-card.ts index 84a184c97e..4056d28b5c 100644 --- a/src/panels/config/info/system-health-card.ts +++ b/src/panels/config/info/system-health-card.ts @@ -1,4 +1,4 @@ -import "@polymer/paper-spinner/paper-spinner"; +import "../../../components/ha-circular-progress"; import { css, CSSResult, @@ -46,7 +46,7 @@ class SystemHealthCard extends LitElement { sections.push( html`
- +
` ); diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts index f39f60f90f..9b490d363c 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts @@ -1,6 +1,6 @@ import "@material/mwc-button"; import "../../../../../components/ha-icon-button"; -import "@polymer/paper-spinner/paper-spinner"; +import "../../../../../components/ha-circular-progress"; import { css, CSSResult, @@ -97,7 +97,10 @@ class ZHAAddDevicesPage extends LitElement { "ui.panel.config.zha.add_device_page.spinner" )} - + ` : html`
@@ -226,7 +229,7 @@ class ZHAAddDevicesPage extends LitElement { .error { color: var(--google-red-500); } - paper-spinner { + ha-circular-progress { padding: 20px; } .searching { diff --git a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts index cf1ba78960..f9935b1f06 100644 --- a/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts +++ b/src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts @@ -1,7 +1,7 @@ import "@material/mwc-button"; import "@polymer/paper-input/paper-input"; import type { PaperInputElement } from "@polymer/paper-input/paper-input"; -import "@polymer/paper-spinner/paper-spinner"; +import "../../../../../components/ha-circular-progress"; import { css, CSSResult, @@ -104,12 +104,12 @@ export class ZHAAddGroupPage extends LitElement { @click="${this._createGroup}" class="button" > - + > ${this.hass!.localize( "ui.panel.config.zha.groups.create" )} - + > ${this.hass!.localize( "ui.panel.config.zha.groups.remove_members" )} - + > ${this.hass!.localize( "ui.panel.config.zha.groups.add_members" )} + ${this.hass!.localize( "ui.panel.config.zwave.network_status.network_starting" )}
diff --git a/src/panels/config/logs/system-log-card.ts b/src/panels/config/logs/system-log-card.ts index 52187e7a05..9767f8f32f 100644 --- a/src/panels/config/logs/system-log-card.ts +++ b/src/panels/config/logs/system-log-card.ts @@ -1,7 +1,7 @@ import "../../../components/ha-icon-button"; import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-spinner/paper-spinner"; +import "../../../components/ha-circular-progress"; import { css, CSSResult, @@ -47,7 +47,7 @@ export class SystemLogCard extends LitElement { ${this._items === undefined ? html`
- +
` : html` diff --git a/src/panels/config/server_control/ha-config-server-control.ts b/src/panels/config/server_control/ha-config-server-control.ts index ee2dc5da11..8d05bc2113 100644 --- a/src/panels/config/server_control/ha-config-server-control.ts +++ b/src/panels/config/server_control/ha-config-server-control.ts @@ -112,7 +112,11 @@ export class HaConfigServerControl extends LitElement { )} ` - : html` `} + : html` + + `}
` : html` diff --git a/src/panels/config/users/dialog-add-user.ts b/src/panels/config/users/dialog-add-user.ts index f5ef631db4..ae90a7b05a 100644 --- a/src/panels/config/users/dialog-add-user.ts +++ b/src/panels/config/users/dialog-add-user.ts @@ -1,6 +1,6 @@ import "@material/mwc-button"; import "@polymer/paper-input/paper-input"; -import "@polymer/paper-spinner/paper-spinner"; +import "../../../components/ha-circular-progress"; import { css, CSSResult, @@ -138,7 +138,7 @@ export class DialogAddUser extends LitElement { ${this._loading ? html` ` : html` diff --git a/src/panels/developer-tools/template/developer-tools-template.js b/src/panels/developer-tools/template/developer-tools-template.js index 55aba598eb..5f26a3e820 100644 --- a/src/panels/developer-tools/template/developer-tools-template.js +++ b/src/panels/developer-tools/template/developer-tools-template.js @@ -1,4 +1,4 @@ -import "@polymer/paper-spinner/paper-spinner"; +import "../../../components/ha-circular-progress"; import { timeOut } from "@polymer/polymer/lib/utils/async"; import { Debouncer } from "@polymer/polymer/lib/utils/debounce"; import { html } from "@polymer/polymer/lib/utils/html-tag"; @@ -92,10 +92,11 @@ class HaPanelDevTemplate extends LocalizeMixin(PolymerElement) {
- + size="small" + > 
[[processed]]
diff --git a/src/panels/history/ha-panel-history.ts b/src/panels/history/ha-panel-history.ts index e177933923..be897abee6 100644 --- a/src/panels/history/ha-panel-history.ts +++ b/src/panels/history/ha-panel-history.ts @@ -11,7 +11,7 @@ import { HomeAssistant } from "../../types"; import type { DateRangePickerRanges } from "../../components/ha-date-range-picker"; import "../../components/ha-date-range-picker"; import { fetchDate, computeHistory } from "../../data/history"; -import "@polymer/paper-spinner/paper-spinner"; +import "../../components/ha-circular-progress"; class HaPanelHistory extends LitElement { @property() hass!: HomeAssistant; @@ -73,10 +73,10 @@ class HaPanelHistory extends LitElement { > ${this._isLoading - ? html`` + >` : html` ${this._isLoading - ? html`` + >` : html` - + ${this.hass.localize("ui.panel.lovelace.cards.starting.description")} `; @@ -59,7 +59,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard { display: block; height: calc(100vh - 64px); } - paper-spinner-lite { + ha-circular-progress { padding-bottom: 20px; } .content { diff --git a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts index 49a7ad7511..e33b3af430 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-editor.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-editor.ts @@ -140,11 +140,11 @@ export class HuiCardEditor extends LitElement {
${this._loading ? html` - + > ` : this._configElement}
@@ -303,7 +303,7 @@ export class HuiCardEditor extends LitElement { .warning { color: #ffa726; } - paper-spinner { + ha-circular-progress { display: block; margin: auto; } diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts index 0fea27a87c..f20d2ea7d4 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -210,7 +210,7 @@ export class HuiCardPicker extends LitElement { this._renderCardElement(card), html` ` )}`, diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index dae6c63033..8666f48327 100755 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -17,6 +17,7 @@ import type { LovelaceViewConfig, } from "../../../../data/lovelace"; import { haStyleDialog } from "../../../../resources/styles"; +import "../../../../components/ha-circular-progress"; import type { HomeAssistant } from "../../../../types"; import { showSaveSuccessToast } from "../../../../util/toast-saved-success"; import { addCard, replaceCard } from "../config-util"; @@ -167,10 +168,10 @@ export class HuiDialogEditCard extends LitElement { > ${this._error ? html` - + > ` : ``} @@ -205,7 +206,10 @@ export class HuiDialogEditCard extends LitElement { > ${this._saving ? html` - + ` : this.hass!.localize("ui.common.save")} @@ -286,7 +290,7 @@ export class HuiDialogEditCard extends LitElement { } } - mwc-button paper-spinner { + mwc-button ha-circular-progress { width: 14px; height: 14px; margin-right: 20px; @@ -303,7 +307,7 @@ export class HuiDialogEditCard extends LitElement { .element-preview { position: relative; } - .element-preview paper-spinner { + .element-preview ha-circular-progress { top: 50%; left: 50%; position: absolute; diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts index dd3e333d65..055e90386a 100755 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts @@ -111,7 +111,10 @@ export class HuiDialogSuggestCard extends LitElement { ${this._saving ? html` - + ` : this.hass!.localize( "ui.panel.lovelace.editor.suggest_card.add" @@ -143,7 +146,7 @@ export class HuiDialogSuggestCard extends LitElement { ha-paper-dialog { max-width: 845px; } - mwc-button paper-spinner { + mwc-button ha-circular-progress { width: 14px; height: 14px; margin-right: 20px; diff --git a/src/panels/lovelace/editor/hui-dialog-save-config.ts b/src/panels/lovelace/editor/hui-dialog-save-config.ts index fb505b1806..e6f6c0eb21 100644 --- a/src/panels/lovelace/editor/hui-dialog-save-config.ts +++ b/src/panels/lovelace/editor/hui-dialog-save-config.ts @@ -1,6 +1,6 @@ import "@material/mwc-button"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; -import "@polymer/paper-spinner/paper-spinner"; +import "../../../components/ha-circular-progress"; import { css, CSSResult, @@ -118,10 +118,10 @@ export class HuiSaveConfig extends LitElement { ?disabled="${this._saving}" @click="${this._saveConfig}" > - + > ${this.hass!.localize( "ui.panel.lovelace.editor.save_config.save" )} @@ -195,13 +195,13 @@ export class HuiSaveConfig extends LitElement { ha-paper-dialog { max-width: 650px; } - paper-spinner { + ha-circular-progress { display: none; } - paper-spinner[active] { + ha-circular-progress[active] { display: block; } - mwc-button paper-spinner { + mwc-button ha-circular-progress { width: 14px; height: 14px; margin-right: 20px; diff --git a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts index c0d4b0dedc..21ebb28342 100644 --- a/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts +++ b/src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts @@ -1,6 +1,5 @@ import "@material/mwc-button"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; -import "@polymer/paper-spinner/paper-spinner"; import { css, CSSResult, @@ -11,6 +10,7 @@ import { TemplateResult, } from "lit-element"; import "../../../../components/dialog/ha-paper-dialog"; +import "../../../../components/ha-circular-progress"; import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog"; import type { LovelaceConfig } from "../../../../data/lovelace"; import { haStyleDialog } from "../../../../resources/styles"; @@ -75,10 +75,10 @@ export class HuiDialogEditLovelace extends LitElement { ?disabled="${!this._config || this._saving}" @click="${this._save}" > - + > ${this.hass!.localize("ui.common.save")} @@ -148,15 +148,15 @@ export class HuiDialogEditLovelace extends LitElement { ha-paper-dialog { max-width: 650px; } - mwc-button paper-spinner { + mwc-button ha-circular-progress { width: 14px; height: 14px; margin-right: 20px; } - paper-spinner { + ha-circular-progress { display: none; } - paper-spinner[active] { + ha-circular-progress[active] { display: block; } `, diff --git a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts index 0adbc6ca02..2029584f8f 100644 --- a/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts +++ b/src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts @@ -1,7 +1,6 @@ import "@material/mwc-button"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; import "../../../../components/ha-icon-button"; -import "@polymer/paper-spinner/paper-spinner"; import "@polymer/paper-tabs/paper-tab"; import "@polymer/paper-tabs/paper-tabs"; import { @@ -16,6 +15,7 @@ import { import { fireEvent, HASSDomEvent } from "../../../../common/dom/fire_event"; import { navigate } from "../../../../common/navigate"; import "../../../../components/dialog/ha-paper-dialog"; +import "../../../../components/ha-circular-progress"; import type { HaPaperDialog } from "../../../../components/dialog/ha-paper-dialog"; import type { LovelaceBadgeConfig, @@ -199,10 +199,10 @@ export class HuiDialogEditView extends LitElement { ?disabled="${!this._config || this._saving}" @click="${this._save}" > - + > ${this.hass!.localize("ui.common.save")} @@ -369,7 +369,7 @@ export class HuiDialogEditView extends LitElement { text-transform: uppercase; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } - mwc-button paper-spinner { + mwc-button ha-circular-progress { width: 14px; height: 14px; margin-right: 20px; @@ -377,10 +377,10 @@ export class HuiDialogEditView extends LitElement { mwc-button.warning { margin-right: auto; } - paper-spinner { + ha-circular-progress { display: none; } - paper-spinner[active] { + ha-circular-progress[active] { display: block; } paper-dialog-scrollable { diff --git a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts index 2ad3332b33..8df6820d5f 100644 --- a/src/panels/lovelace/header-footer/hui-graph-header-footer.ts +++ b/src/panels/lovelace/header-footer/hui-graph-header-footer.ts @@ -1,4 +1,4 @@ -import "@polymer/paper-spinner/paper-spinner"; +import "../../../components/ha-circular-progress"; import { HassEntity } from "home-assistant-js-websocket"; import { css, @@ -74,7 +74,7 @@ export class HuiGraphHeaderFooter extends LitElement if (!this._coordinates) { return html`
- +
`; } @@ -164,7 +164,7 @@ export class HuiGraphHeaderFooter extends LitElement static get styles(): CSSResult { return css` - paper-spinner { + ha-circular-progress { position: absolute; top: calc(50% - 28px); } diff --git a/src/panels/lovelace/hui-editor.ts b/src/panels/lovelace/hui-editor.ts index 9260afeccd..29e893ecba 100644 --- a/src/panels/lovelace/hui-editor.ts +++ b/src/panels/lovelace/hui-editor.ts @@ -3,7 +3,7 @@ import "@polymer/app-layout/app-header-layout/app-header-layout"; import "@polymer/app-layout/app-header/app-header"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import "../../components/ha-icon-button"; -import "@polymer/paper-spinner/paper-spinner"; +import "../../components/ha-circular-progress"; import { safeDump, safeLoad } from "js-yaml"; import { css, diff --git a/src/panels/mailbox/ha-dialog-show-audio-message.js b/src/panels/mailbox/ha-dialog-show-audio-message.js index 1088141acc..d288138881 100644 --- a/src/panels/mailbox/ha-dialog-show-audio-message.js +++ b/src/panels/mailbox/ha-dialog-show-audio-message.js @@ -1,5 +1,5 @@ import "@material/mwc-button"; -import "@polymer/paper-spinner/paper-spinner"; +import "../../components/ha-circular-progress"; import { html } from "@polymer/polymer/lib/utils/html-tag"; /* eslint-plugin-disable lit */ import { PolymerElement } from "@polymer/polymer/polymer-element"; @@ -54,7 +54,7 @@ class HaDialogShowAudioMessage extends LocalizeMixin(PolymerElement) { [[localize('ui.panel.mailbox.playback_title')]]