mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-14 12:56:37 +00:00
Add ha circular progress (#6205)
This commit is contained in:
parent
ea410d3af1
commit
3b779bf423
@ -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`
|
||||
|
@ -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">
|
||||
|
@ -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,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[] = [
|
||||
|
@ -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`
|
||||
|
@ -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">
|
||||
|
@ -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>
|
||||
|
@ -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",
|
||||
|
@ -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
85
src/components/ha-circular-progress.ts
Normal 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;
|
||||
}
|
||||
}
|
@ -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";
|
||||
|
@ -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`
|
||||
|
@ -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 {
|
||||
|
@ -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`
|
||||
|
@ -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,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,
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
@ -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>
|
||||
`;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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]
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
`
|
||||
);
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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 />
|
||||
|
@ -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`
|
||||
|
@ -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`
|
||||
|
@ -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`
|
||||
|
@ -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>
|
||||
|
@ -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%;
|
||||
|
@ -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%;
|
||||
|
@ -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 {
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
`
|
||||
)}`,
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
}
|
||||
`,
|
||||
|
@ -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 {
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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,
|
||||
|
@ -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"
|
||||
|
@ -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"
|
||||
|
@ -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]]">
|
||||
|
@ -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
27
yarn.lock
@ -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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user