mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 01:36:49 +00:00
Convert ha-progress-button to lit (#6728)
This commit is contained in:
parent
b39b54e0ac
commit
405bd29ebd
@ -1,110 +0,0 @@
|
||||
import "@material/mwc-button";
|
||||
import "../ha-circular-progress";
|
||||
import { html } from "@polymer/polymer/lib/utils/html-tag";
|
||||
/* eslint-plugin-disable lit */
|
||||
import { PolymerElement } from "@polymer/polymer/polymer-element";
|
||||
|
||||
class HaProgressButton extends PolymerElement {
|
||||
static get template() {
|
||||
return html`
|
||||
<style>
|
||||
:host {
|
||||
outline: none;
|
||||
}
|
||||
.container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
mwc-button {
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.success mwc-button {
|
||||
--mdc-theme-primary: white;
|
||||
background-color: var(--success-color);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.error mwc-button {
|
||||
--mdc-theme-primary: white;
|
||||
background-color: var(--error-color);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.progress {
|
||||
@apply --layout;
|
||||
@apply --layout-center-center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
</style>
|
||||
<div class="container" id="container">
|
||||
<mwc-button
|
||||
id="button"
|
||||
disabled="[[computeDisabled(disabled, progress)]]"
|
||||
on-click="buttonTapped"
|
||||
>
|
||||
<slot></slot>
|
||||
</mwc-button>
|
||||
<template is="dom-if" if="[[progress]]">
|
||||
<div class="progress">
|
||||
<ha-circular-progress active size="small"></ha-circular-progress>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
static get properties() {
|
||||
return {
|
||||
hass: {
|
||||
type: Object,
|
||||
},
|
||||
|
||||
progress: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
tempClass(className) {
|
||||
const classList = this.$.container.classList;
|
||||
classList.add(className);
|
||||
setTimeout(() => {
|
||||
classList.remove(className);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
ready() {
|
||||
super.ready();
|
||||
this.addEventListener("click", (ev) => this.buttonTapped(ev));
|
||||
}
|
||||
|
||||
buttonTapped(ev) {
|
||||
if (this.progress) ev.stopPropagation();
|
||||
}
|
||||
|
||||
actionSuccess() {
|
||||
this.tempClass("success");
|
||||
}
|
||||
|
||||
actionError() {
|
||||
this.tempClass("error");
|
||||
}
|
||||
|
||||
computeDisabled(disabled, progress) {
|
||||
return disabled || progress;
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("ha-progress-button", HaProgressButton);
|
97
src/components/buttons/ha-progress-button.ts
Normal file
97
src/components/buttons/ha-progress-button.ts
Normal file
@ -0,0 +1,97 @@
|
||||
import "@material/mwc-button";
|
||||
import {
|
||||
css,
|
||||
CSSResult,
|
||||
customElement,
|
||||
html,
|
||||
LitElement,
|
||||
property,
|
||||
TemplateResult,
|
||||
} from "lit-element";
|
||||
|
||||
import "../ha-circular-progress";
|
||||
|
||||
@customElement("ha-progress-button")
|
||||
class HaProgressButton extends LitElement {
|
||||
@property({ type: Boolean }) public disabled = false;
|
||||
|
||||
@property({ type: Boolean }) public progress = false;
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<mwc-button
|
||||
.disabled=${this.disabled || this.progress}
|
||||
@click=${this._buttonTapped}
|
||||
>
|
||||
<slot></slot>
|
||||
</mwc-button>
|
||||
${this.progress
|
||||
? html`<div class="progress">
|
||||
<ha-circular-progress size="small" active></ha-circular-progress>
|
||||
</div>`
|
||||
: ""}
|
||||
`;
|
||||
}
|
||||
|
||||
public actionSuccess(): void {
|
||||
this._tempClass("success");
|
||||
}
|
||||
|
||||
public actionError(): void {
|
||||
this._tempClass("error");
|
||||
}
|
||||
|
||||
private _tempClass(className: string): void {
|
||||
this.classList.add(className);
|
||||
setTimeout(() => {
|
||||
this.classList.remove(className);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
private _buttonTapped(ev: Event): void {
|
||||
if (this.progress) {
|
||||
ev.stopPropagation();
|
||||
}
|
||||
}
|
||||
|
||||
static get styles(): CSSResult {
|
||||
return css`
|
||||
:host {
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
mwc-button {
|
||||
transition: all 1s;
|
||||
}
|
||||
|
||||
.success mwc-button {
|
||||
--mdc-theme-primary: white;
|
||||
background-color: var(--success-color);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.error mwc-button {
|
||||
--mdc-theme-primary: white;
|
||||
background-color: var(--error-color);
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.progress {
|
||||
bottom: 0;
|
||||
margin-top: 4px;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
"ha-progress-button": HaProgressButton;
|
||||
}
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user