114 lines
2.3 KiB
HTML
114 lines
2.3 KiB
HTML
<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
|
|
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
|
|
<link rel="import" href="../../../bower_components/paper-spinner/paper-spinner.html">
|
|
|
|
<dom-module id='ha-progress-button'>
|
|
<template>
|
|
<style>
|
|
.container {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
paper-button {
|
|
transition: all 1s;
|
|
}
|
|
|
|
.success paper-button {
|
|
color: white;
|
|
background-color: var(--google-green-500);
|
|
transition: none;
|
|
}
|
|
|
|
.error paper-button {
|
|
color: white;
|
|
background-color: var(--google-red-500);
|
|
transition: none;
|
|
}
|
|
|
|
paper-button[disabled] {
|
|
color: #c8c8c8;
|
|
}
|
|
|
|
.progress {
|
|
@apply(--layout);
|
|
@apply(--layout-center-center);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
</style>
|
|
<div class='container' id='container'>
|
|
<paper-button
|
|
id='button'
|
|
disabled='[[computeDisabled(disabled, progress)]]'
|
|
on-click='buttonTapped'
|
|
>
|
|
<slot></slot>
|
|
</paper-button>
|
|
<template is='dom-if' if='[[progress]]'>
|
|
<div class='progress'>
|
|
<paper-spinner active></paper-spinner>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</dom-module>
|
|
|
|
<script>
|
|
class HaProgressButton extends Polymer.Element {
|
|
static get is() { return 'ha-progress-button'; }
|
|
|
|
static get properties() {
|
|
return {
|
|
hass: {
|
|
type: Object,
|
|
},
|
|
|
|
progress: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
|
|
disabled: {
|
|
type: Boolean,
|
|
value: false,
|
|
},
|
|
};
|
|
}
|
|
|
|
tempClass(className) {
|
|
var 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(HaProgressButton.is, HaProgressButton);
|
|
</script>
|