jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-24 09:46:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add ha circular progress (#6205)

Browse Source
This commit is contained in:
Paulus Schoutsen 2020-06-22 14:51:36 -07:00 committed by GitHub
parent ea410d3af1
commit 3b779bf423
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
50 changed files with 261 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/src/custom-cards/ha-demo-card.ts
View File

@ -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 {
<div class="picker">
<div class="label">
${this._switching
? html` <paper-spinner-lite active></paper-spinner-lite> `
? html`<ha-circular-progress active></ha-circular-progress>`
: until(
selectedDemoConfig.then(
(conf) => html`

4
hassio/src/addon-view/config/hassio-addon-config-tab.ts
View File

@ -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` <paper-spinner-lite active></paper-spinner-lite> `;
return html`<ha-circular-progress active></ha-circular-progress>`;
}
return html`
<div class="content">

4
hassio/src/addon-view/documentation/hassio-addon-documentation-tab.ts
View File

@ -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` <paper-spinner-lite active></paper-spinner-lite> `;
return html`<ha-circular-progress active></ha-circular-progress>`;
}
return html`
<div class="content">

4
hassio/src/addon-view/hassio-addon-dashboard.ts
View File

@ -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` <paper-spinner-lite active></paper-spinner-lite> `;
return html`<ha-circular-progress active></ha-circular-progress>`;
}
const addonTabs: PageNavigation[] = [

4
hassio/src/addon-view/info/hassio-addon-info-tab.ts
View File

@ -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` <paper-spinner-lite active></paper-spinner-lite> `;
return html`<ha-circular-progress active></ha-circular-progress>`;
}
return html`

4
hassio/src/addon-view/log/hassio-addon-log-tab.ts
View File

@ -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` <paper-spinner-lite active></paper-spinner-lite> `;
return html` <ha-circular-progress active></ha-circular-progress> `;
}
return html`
<div class="content">

4
hassio/src/dialogs/repositories/dialog-hassio-repositories.ts
View File

@ -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 {
></paper-input>
<mwc-button @click=${this._addRepository}>
${this._prosessing
? html`<paper-spinner active></paper-spinner>`
? html`<ha-circular-progress active></ha-circular-progress>`
: "Add"}
</mwc-button>
</div>

2
package.json
View File

@ -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",

6
src/components/buttons/ha-progress-button.js
View File

@ -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 {
<slot></slot>
</mwc-button>
<template is="dom-if" if="[[progress]]">
<div class="progress"><paper-spinner active=""></paper-spinner></div>
<div class="progress">
<ha-circular-progress active size="small"></ha-circular-progress>
</div>
</template>
</div>
`;

85
src/components/ha-circular-progress.ts Normal file
View File

@ -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`
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<circle cx="12" cy="12" r="8.75" stroke-dasharray="54.978" stroke-dashoffset="27.489"/>
</svg>`;
} else if (this.size === "large") {
indeterminatePart = svg`
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<circle cx="24" cy="24" r="18" stroke-dasharray="113.097" stroke-dashoffset="56.549"/>
</svg>`;
} else {
// medium
indeterminatePart = svg`
<svg class="mdc-circular-progress__indeterminate-circle-graphic" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<circle cx="16" cy="16" r="12.5" stroke-dasharray="78.54" stroke-dashoffset="39.27"/>
</svg>`;
}
// ignoring prettier as it will introduce unwanted whitespace
// We have not implemented the determinate support of mdc circular progress.
// prettier-ignore
return html`
<div
class="mdc-circular-progress ${classMap({
"mdc-circular-progress--indeterminate": this.active,
[`mdc-circular-progress--${this.size}`]: true,
})}"
role="progressbar"
aria-label=${this.alt}
aria-valuemin="0"
aria-valuemax="1"
>
<div class="mdc-circular-progress__indeterminate-container">
<div class="mdc-circular-progress__spinner-layer">
<div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-left">
${indeterminatePart}
</div><div class="mdc-circular-progress__gap-patch">
${indeterminatePart}
</div><div class="mdc-circular-progress__circle-clipper mdc-circular-progress__circle-right">
${indeterminatePart}
</div>
</div>
</div>
</div>
`;
}
static get styles() {
return unsafeCSS(progressStyles);
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-circular-progress": HaCircularProgress;
}
}

2
src/components/state-history-charts.js
View File

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

3
src/dialogs/config-entry-system-options/dialog-config-entry-system-options.ts
View File

@ -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`
<div class="init-spinner">
<paper-spinner-lite active></paper-spinner-lite>
<ha-circular-progress active></ha-circular-progress>
</div>
`
: html`

2
src/dialogs/config-flow/dialog-data-entry-flow.ts
View File

@ -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 {

4
src/dialogs/config-flow/step-flow-form.ts
View File

@ -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`
<div class="submit-spinner">
<paper-spinner active></paper-spinner>
<ha-circular-progress active></ha-circular-progress>
</div>
`
: html`

6
src/dialogs/config-flow/step-flow-loading.ts
View File

@ -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`
<div class="init-spinner">
${this.label ? html` <div>${this.label}</div> ` : ""}
<paper-spinner-lite active></paper-spinner-lite>
<ha-circular-progress active></ha-circular-progress>
</div>
`;
}
@ -28,7 +28,7 @@ class StepFlowLoading extends LitElement {
padding: 50px 100px;
text-align: center;
}
paper-spinner-lite {
ha-circular-progress {
margin-top: 16px;
}
`;

1
src/dialogs/config-flow/step-flow-pick-handler.ts
View File

@ -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,

8
src/dialogs/more-info/controls/more-info-configurator.js
View File

@ -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"
>
<paper-spinner
<ha-circular-progress
active="[[isConfiguring]]"
hidden="[[!isConfiguring]]"
alt="Configuring"
></paper-spinner>
></ha-circular-progress>
[[stateObj.attributes.submit_caption]]
</mwc-button>
</p>

6
src/layouts/ha-init-page.ts
View File

@ -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`
<paper-spinner-lite active></paper-spinner-lite>
<ha-circular-progress active></ha-circular-progress>
<p>Loading data</p>
`}
</div>
@ -52,7 +52,7 @@ class HaInitPage extends LitElement {
justify-content: center;
align-items: center;
}
paper-spinner-lite {
ha-circular-progress {
margin-top: 9px;
}
a {

4
src/layouts/hass-loading-screen.ts
View File

@ -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 {
`}
</app-toolbar>
<div class="content">
<paper-spinner-lite active></paper-spinner-lite>
<ha-circular-progress active></ha-circular-progress>
</div>
`;
}

12
src/layouts/hass-router-page.ts
View File

@ -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;
}

4
src/layouts/loading-screen.ts
View File

@ -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` <paper-spinner-lite active></paper-spinner-lite> `;
return html` <ha-circular-progress active></ha-circular-progress> `;
}
static get styles(): CSSResult {

12
src/panels/config/automation/thingtalk/dialog-thingtalk.ts
View File

@ -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
</mwc-button>
<mwc-button @click="${this._generate}" .disabled=${this._submitting}>
<paper-spinner
<ha-circular-progress
?active="${this._submitting}"
alt="Creating your automation..."
></paper-spinner>
></ha-circular-progress>
Create automation
</mwc-button>
</div>
@ -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 {

4
src/panels/config/cloud/account/cloud-webhooks.ts
View File

@ -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`
<div class="progress">
<paper-spinner active></paper-spinner>
<ha-circular-progress active></ha-circular-progress>
</div>
`
: this._cloudHooks![entry.webhook_id]

7
src/panels/config/ha-entity-config.js
View File

@ -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 {
</template>
<template is="dom-if" if="[[computeShowSpinner(formState)]]">
<paper-spinner active="" alt="[[formState]]"></paper-spinner>
<ha-circular-progress
active=""
alt="[[formState]]"
></ha-circular-progress>
[[formState]]
</template>
</div>

4
src/panels/config/info/system-health-card.ts
View File

@ -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`
<div class="loading-container">
<paper-spinner active></paper-spinner>
<ha-circular-progress active></ha-circular-progress>
</div>
`
);

9
src/panels/config/integrations/integration-panels/zha/zha-add-devices-page.ts
View File

@ -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"
)}
</h1>
<paper-spinner active alt="Searching"></paper-spinner>
<ha-circular-progress
active
alt="Searching"
></ha-circular-progress>
`
: html`
<div>
@ -226,7 +229,7 @@ class ZHAAddDevicesPage extends LitElement {
.error {
color: var(--google-red-500);
}
paper-spinner {
ha-circular-progress {
padding: 20px;
}
.searching {

12
src/panels/config/integrations/integration-panels/zha/zha-add-group-page.ts
View File

@ -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"
>
<paper-spinner
<ha-circular-progress
?active="${this._processingAdd}"
alt="${this.hass!.localize(
"ui.panel.config.zha.groups.creating_group"
)}"
></paper-spinner>
></ha-circular-progress>
${this.hass!.localize(
"ui.panel.config.zha.groups.create"
)}</mwc-button
@ -171,15 +171,15 @@ export class ZHAAddGroupPage extends LitElement {
ha-config-section *:last-child {
padding-bottom: 24px;
}
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;
}
.paper-dialog-buttons {

16
src/panels/config/integrations/integration-panels/zha/zha-group-page.ts
View File

@ -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,
@ -166,12 +166,12 @@ export class ZHAGroupPage extends LitElement {
@click="${this._removeMembersFromGroup}"
class="button"
>
<paper-spinner
<ha-circular-progress
?active="${this._processingRemove}"
alt=${this.hass.localize(
"ui.panel.config.zha.groups.removing_members"
)}
></paper-spinner>
></ha-circular-progress>
${this.hass!.localize(
"ui.panel.config.zha.groups.remove_members"
)}</mwc-button
@ -201,12 +201,12 @@ export class ZHAGroupPage extends LitElement {
@click="${this._addMembersToGroup}"
class="button"
>
<paper-spinner
<ha-circular-progress
?active="${this._processingAdd}"
alt=${this.hass.localize(
"ui.panel.config.zha.groups.adding_members"
)}
></paper-spinner>
></ha-circular-progress>
${this.hass!.localize(
"ui.panel.config.zha.groups.add_members"
)}</mwc-button
@ -309,15 +309,15 @@ export class ZHAGroupPage extends LitElement {
text-decoration: none;
}
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;
}
.paper-dialog-buttons {

4
src/panels/config/integrations/integration-panels/zwave/zwave-network.ts
View File

@ -1,5 +1,5 @@
import "../../../../../components/ha-icon-button";
import "@polymer/paper-spinner/paper-spinner";
import "../../../../../components/ha-circular-progress";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import {
css,
@ -92,7 +92,7 @@ export class ZwaveNetwork extends LitElement {
`
: this._networkStatus.state === ZWAVE_NETWORK_STATE_STARTED
? html`
<paper-spinner active></paper-spinner>
<ha-circular-progress active></ha-circular-progress>
${this.hass!.localize(
"ui.panel.config.zwave.network_status.network_starting"
)}<br />

4
src/panels/config/logs/system-log-card.ts
View File

@ -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`
<div class="loading-container">
<paper-spinner active></paper-spinner>
<ha-circular-progress active></ha-circular-progress>
</div>
`
: html`

6
src/panels/config/server_control/ha-config-server-control.ts
View File

@ -112,7 +112,11 @@ export class HaConfigServerControl extends LitElement {
)}
</mwc-button>
`
: html` <paper-spinner active></paper-spinner> `}
: html`
<ha-circular-progress
active
></ha-circular-progress>
`}
</div>
`
: html`

4
src/panels/config/users/dialog-add-user.ts
View File

@ -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`
<div slot="primaryAction" class="submit-spinner">
<paper-spinner active></paper-spinner>
<ha-circular-progress active></ha-circular-progress>
</div>
`
: html`

7
src/panels/developer-tools/template/developer-tools-template.js
View File

@ -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) {
</div>
<div class="render-pane">
<paper-spinner
<ha-circular-progress
class="render-spinner"
active="[[rendering]]"
></paper-spinner>
size="small"
></ha-circular-progress>
<pre class$="[[computeRenderedClasses(error)]]">[[processed]]</pre>
</div>
</div>

8
src/panels/history/ha-panel-history.ts
View File

@ -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 {
></ha-date-range-picker>
</div>
${this._isLoading
? html`<paper-spinner
? html`<ha-circular-progress
active
alt=${this.hass.localize("ui.common.loading")}
></paper-spinner>`
></ha-circular-progress>`
: html`
<state-history-charts
.hass=${this.hass}
@ -190,7 +190,7 @@ class HaPanelHistory extends LitElement {
.content {
padding: 0 16px 16px;
}
paper-spinner {
ha-circular-progress {
position: absolute;
left: 50%;
top: 50%;

8
src/panels/logbook/ha-panel-logbook.ts
View File

@ -2,7 +2,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 { computeRTL } from "../../common/util/compute_rtl";
import "../../components/entity/ha-entity-picker";
import "../../components/ha-menu-button";
@ -105,10 +105,10 @@ export class HaPanelLogbook extends LitElement {
</div>
${this._isLoading
? html`<paper-spinner
? html`<ha-circular-progress
active
alt=${this.hass.localize("ui.common.loading")}
></paper-spinner>`
></ha-circular-progress>`
: html`<ha-logbook
.hass=${this.hass}
.entries=${this._entries}
@ -239,7 +239,7 @@ export class HaPanelLogbook extends LitElement {
margin-right: 0;
}
paper-spinner {
ha-circular-progress {
position: absolute;
left: 50%;
top: 50%;

6
src/panels/lovelace/cards/hui-starting-card.ts
View File

@ -10,10 +10,10 @@ import {
PropertyValues,
} from "lit-element";
import "../../../components/ha-card";
import "../../../components/ha-circular-progress";
import { HomeAssistant } from "../../../types";
import { LovelaceCard } from "../types";
import { LovelaceCardConfig } from "../../../data/lovelace";
import "@polymer/paper-spinner/paper-spinner-lite";
import { fireEvent } from "../../../common/dom/fire_event";
import { STATE_NOT_RUNNING } from "home-assistant-js-websocket";
@ -47,7 +47,7 @@ export class HuiStartingCard extends LitElement implements LovelaceCard {
return html`
<div class="content">
<paper-spinner-lite active></paper-spinner-lite>
<ha-circular-progress active></ha-circular-progress>
${this.hass.localize("ui.panel.lovelace.cards.starting.description")}
</div>
`;
@ -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 {

6
src/panels/lovelace/editor/card-editor/hui-card-editor.ts
View File

@ -140,11 +140,11 @@ export class HuiCardEditor extends LitElement {
<div class="gui-editor">
${this._loading
? html`
<paper-spinner
<ha-circular-progress
active
alt="Loading"
class="center margin-bot"
></paper-spinner>
></ha-circular-progress>
`
: this._configElement}
</div>
@ -303,7 +303,7 @@ export class HuiCardEditor extends LitElement {
.warning {
color: #ffa726;
}
paper-spinner {
ha-circular-progress {
display: block;
margin: auto;
}

2
src/panels/lovelace/editor/card-editor/hui-card-picker.ts
View File

@ -210,7 +210,7 @@ export class HuiCardPicker extends LitElement {
this._renderCardElement(card),
html`
<div class="card spinner">
<paper-spinner active alt="Loading"></paper-spinner>
<ha-circular-progress active alt="Loading"></ha-circular-progress>
</div>
`
)}`,

14
src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts
View File

@ -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 {
></hui-card-preview>
${this._error
? html`
<paper-spinner
<ha-circular-progress
active
alt="Can't update card"
></paper-spinner>
></ha-circular-progress>
`
: ``}
</div>
@ -205,7 +206,10 @@ export class HuiDialogEditCard extends LitElement {
>
${this._saving
? html`
<paper-spinner active alt="Saving"></paper-spinner>
<ha-circular-progress
active
alt="Saving"
></ha-circular-progress>
`
: this.hass!.localize("ui.common.save")}
</mwc-button>
@ -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;

7
src/panels/lovelace/editor/card-editor/hui-dialog-suggest-card.ts
View File

@ -111,7 +111,10 @@ export class HuiDialogSuggestCard extends LitElement {
<mwc-button ?disabled="${this._saving}" @click="${this._save}">
${this._saving
? html`
<paper-spinner active alt="Saving"></paper-spinner>
<ha-circular-progress
active
alt="Saving"
></ha-circular-progress>
`
: 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;

12
src/panels/lovelace/editor/hui-dialog-save-config.ts
View File

@ -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}"
>
<paper-spinner
<ha-circular-progress
?active="${this._saving}"
alt="Saving"
></paper-spinner>
></ha-circular-progress>
${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;

12
src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts
View File

@ -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}"
>
<paper-spinner
<ha-circular-progress
?active="${this._saving}"
alt="Saving"
></paper-spinner>
></ha-circular-progress>
${this.hass!.localize("ui.common.save")}</mwc-button
>
</div>
@ -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;
}
`,

12
src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts
View File

@ -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}"
>
<paper-spinner
<ha-circular-progress
?active="${this._saving}"
alt="Saving"
></paper-spinner>
></ha-circular-progress>
${this.hass!.localize("ui.common.save")}</mwc-button
>
</div>
@ -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 {

6
src/panels/lovelace/header-footer/hui-graph-header-footer.ts
View File

@ -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`
<div class="container">
<paper-spinner active></paper-spinner>
<ha-circular-progress active></ha-circular-progress>
</div>
`;
}
@ -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);
}

2
src/panels/lovelace/hui-editor.ts
View File

@ -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,

4
src/panels/mailbox/ha-dialog-show-audio-message.js
View File

@ -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')]]
<div class="icon">
<template is="dom-if" if="[[_loading]]">
<paper-spinner active></paper-spinner>
<ha-circular-progress active></ha-circular-progress>
</template>
<ha-icon-button
id="delicon"

4
src/panels/profile/ha-change-password-card.js
View File

@ -1,6 +1,6 @@
import "@material/mwc-button";
import "@polymer/paper-dialog/paper-dialog";
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";
@ -71,7 +71,7 @@ class HaChangePasswordCard extends LocalizeMixin(PolymerElement) {
</div>
<div class="card-actions">
<template is="dom-if" if="[[_loading]]">
<div><paper-spinner active></paper-spinner></div>
<div><ha-circular-progress active></ha-circular-progress></div>
</template>
<template is="dom-if" if="[[!_loading]]">
<mwc-button on-click="_changePassword"

6
src/panels/profile/ha-mfa-module-setup-flow.js
View File

@ -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 { html } from "@polymer/polymer/lib/utils/html-tag";
/* eslint-plugin-disable lit */
import { PolymerElement } from "@polymer/polymer/polymer-element";
@ -70,7 +70,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
</template>
<template is="dom-if" if="[[!_step]]">
<div class="init-spinner">
<paper-spinner active></paper-spinner>
<ha-circular-progress active></ha-circular-progress>
</div>
</template>
<template is="dom-if" if="[[_step]]">
@ -125,7 +125,7 @@ class HaMfaModuleSetupFlow extends LocalizeMixin(EventsMixin(PolymerElement)) {
<template is="dom-if" if="[[_equals(_step.type, 'form')]]">
<template is="dom-if" if="[[_loading]]">
<div class="submit-spinner">
<paper-spinner active></paper-spinner>
<ha-circular-progress active></ha-circular-progress>
</div>
</template>
<template is="dom-if" if="[[!_loading]]">

6
src/resources/ha-style.ts
View File

@ -60,12 +60,6 @@ documentContainer.innerHTML = `<custom-style>
--paper-grey-200: #eeeeee; /* for ha-date-picker-style */
--paper-grey-500: #9e9e9e; /* --label-badge-grey */
/* for paper-spinner */
--google-red-500: #db4437;
--google-blue-500: #4285f4;
--google-green-500: #0f9d58;
--google-yellow-500: #f4b400;
/* for paper-slider */
--paper-green-400: #66bb6a;
--paper-blue-400: #42a5f5;

27
yarn.lock
View File

@ -1394,6 +1394,18 @@
"@material/typography" "7.0.0-canary.d92d8c93e.0"
tslib "^1.9.3"
"@material/circular-progress@7.0.0-canary.d92d8c93e.0":
version "7.0.0-canary.d92d8c93e.0"
resolved "https://registry.yarnpkg.com/@material/circular-progress/-/circular-progress-7.0.0-canary.d92d8c93e.0.tgz#f644c90076cdf30208201dfb37e0d7c8f2c58724"
integrity sha512-Xoj6E+HtvxesuRo/u8xLqDQ0rJY9DKXOelKErrOkxJskkS4G30jFRvdlDWXenBjzRaynH/Iu3RcnNOUTrcSL4A==
dependencies:
"@material/animation" "7.0.0-canary.d92d8c93e.0"
"@material/base" "7.0.0-canary.d92d8c93e.0"
"@material/feature-targeting" "7.0.0-canary.d92d8c93e.0"
"@material/progress-indicator" "7.0.0-canary.d92d8c93e.0"
"@material/theme" "7.0.0-canary.d92d8c93e.0"
tslib "^1.9.3"
"@material/density@7.0.0-canary.d92d8c93e.0", "@material/density@=7.0.0-canary.d92d8c93e.0":
version "7.0.0-canary.d92d8c93e.0"
resolved "https://registry.yarnpkg.com/@material/density/-/density-7.0.0-canary.d92d8c93e.0.tgz#a7a3b0a4fdb4ce92487611a18af4bf51b8f7b09f"
@ -1692,6 +1704,13 @@
lit-element "^2.3.0"
tslib "^1.10.0"
"@material/progress-indicator@7.0.0-canary.d92d8c93e.0":
version "7.0.0-canary.d92d8c93e.0"
resolved "https://registry.yarnpkg.com/@material/progress-indicator/-/progress-indicator-7.0.0-canary.d92d8c93e.0.tgz#e49e3d22ed594f53624eae5c8b82b19fa13e93d8"
integrity sha512-ibwqKAKd8xJqN2SceGo7fsjwdy7E2yjmP8V3ASUqUnK+MXepKoxdjfj+pXBAuCwNy8ehx1b4HzYq7LA20PKWKw==
dependencies:
tslib "^1.9.3"
"@material/radio@=7.0.0-canary.d92d8c93e.0":
version "7.0.0-canary.d92d8c93e.0"
resolved "https://registry.yarnpkg.com/@material/radio/-/radio-7.0.0-canary.d92d8c93e.0.tgz#bf112f224cc3f3d64021e2ba45def87203dfc3fe"
@ -2249,14 +2268,6 @@
"@polymer/paper-styles" "^3.0.0-pre.26"
"@polymer/polymer" "^3.0.0"
"@polymer/paper-spinner@^3.0.2":
version "3.0.2"
resolved "https://registry.yarnpkg.com/@polymer/paper-spinner/-/paper-spinner-3.0.2.tgz#c857c79f0494bc74e9ae293839d00f37fcf29f78"
integrity sha512-XUzu8/4NH+pnNZUTI2MxtOKFAr0EOsW7eGhTg3VBhTh7DDW/q3ewzwYRWnqNJokX9BEnxKMiXXaIeTEBq4k2dw==
dependencies:
"@polymer/paper-styles" "^3.0.0-pre.26"
"@polymer/polymer" "^3.0.0"
"@polymer/paper-styles@^3.0.0-pre.26", "@polymer/paper-styles@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@polymer/paper-styles/-/paper-styles-3.0.1.tgz#bd4962b83ab8432cd1cf197bb5222d3a08f135e1"