Add confirmation button in lock more info (#20093)
* Add confirmation button in more info lock * Reset confirm open on service call * Use text instead of toast for success
This commit is contained in:
parent
db3709952c
commit
45a5c1c235
|
@ -84,6 +84,7 @@ export class HaControlButton extends LitElement {
|
|||
--control-button-background-color: var(--disabled-color);
|
||||
--control-button-background-opacity: 0.2;
|
||||
--control-button-border-radius: 10px;
|
||||
--control-button-padding: 8px;
|
||||
--mdc-icon-size: 20px;
|
||||
color: var(--primary-text-color);
|
||||
width: 40px;
|
||||
|
@ -95,16 +96,20 @@ export class HaControlButton extends LitElement {
|
|||
position: relative;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: var(--control-button-border-radius);
|
||||
border: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
padding: var(--control-button-padding);
|
||||
box-sizing: border-box;
|
||||
line-height: 0;
|
||||
line-height: inherit;
|
||||
font-family: Roboto;
|
||||
font-weight: 500;
|
||||
outline: none;
|
||||
overflow: hidden;
|
||||
background: none;
|
||||
|
@ -126,6 +131,8 @@ export class HaControlButton extends LitElement {
|
|||
background-color 180ms ease-in-out,
|
||||
opacity 180ms ease-in-out;
|
||||
opacity: var(--control-button-background-opacity);
|
||||
pointer-events: none;
|
||||
white-space: normal;
|
||||
}
|
||||
.button {
|
||||
transition: color 180ms ease-in-out;
|
||||
|
@ -133,6 +140,7 @@ export class HaControlButton extends LitElement {
|
|||
}
|
||||
.button ::slotted(*) {
|
||||
pointer-events: none;
|
||||
opacity: 0.95;
|
||||
}
|
||||
.button:disabled {
|
||||
cursor: not-allowed;
|
||||
|
|
|
@ -1,10 +1,12 @@
|
|||
import { mdiDoorOpen, mdiLock, mdiLockOff } from "@mdi/js";
|
||||
import { mdiCheck } from "@mdi/js";
|
||||
import { CSSResultGroup, LitElement, css, html, nothing } from "lit";
|
||||
import { customElement, property } from "lit/decorators";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import { styleMap } from "lit/directives/style-map";
|
||||
import { stateColorCss } from "../../../common/entity/state_color";
|
||||
import { supportsFeature } from "../../../common/entity/supports-feature";
|
||||
import "../../../components/ha-attributes";
|
||||
import "../../../components/ha-control-button";
|
||||
import "../../../components/ha-control-button-group";
|
||||
import "../../../components/ha-outlined-icon-button";
|
||||
import "../../../components/ha-state-icon";
|
||||
import { UNAVAILABLE } from "../../../data/entity";
|
||||
|
@ -18,14 +20,49 @@ import type { HomeAssistant } from "../../../types";
|
|||
import "../components/ha-more-info-state-header";
|
||||
import { moreInfoControlStyle } from "../components/more-info-control-style";
|
||||
|
||||
const CONFIRM_TIMEOUT_SECOND = 5;
|
||||
const OPENED_TIMEOUT_SECOND = 3;
|
||||
|
||||
type ButtonState = "normal" | "confirm" | "success";
|
||||
|
||||
@customElement("more-info-lock")
|
||||
class MoreInfoLock extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
||||
@property({ attribute: false }) public stateObj?: LockEntity;
|
||||
|
||||
@state() public _buttonState: ButtonState = "normal";
|
||||
|
||||
private _buttonTimeout?: number;
|
||||
|
||||
private _setButtonState(buttonState: ButtonState, timeoutSecond?: number) {
|
||||
clearTimeout(this._buttonTimeout);
|
||||
this._buttonState = buttonState;
|
||||
if (timeoutSecond) {
|
||||
this._buttonTimeout = window.setTimeout(() => {
|
||||
this._buttonState = "normal";
|
||||
}, timeoutSecond * 1000);
|
||||
}
|
||||
}
|
||||
|
||||
private async _open() {
|
||||
if (this._buttonState !== "confirm") {
|
||||
this._setButtonState("confirm", CONFIRM_TIMEOUT_SECOND);
|
||||
return;
|
||||
}
|
||||
|
||||
callProtectedLockService(this, this.hass, this.stateObj!, "open");
|
||||
|
||||
this._setButtonState("success", OPENED_TIMEOUT_SECOND);
|
||||
}
|
||||
|
||||
private _resetButtonState() {
|
||||
this._setButtonState("normal");
|
||||
}
|
||||
|
||||
disconnectedCallback(): void {
|
||||
super.disconnectedCallback();
|
||||
this._resetButtonState();
|
||||
}
|
||||
|
||||
private async _lock() {
|
||||
|
@ -45,7 +82,7 @@ class MoreInfoLock extends LitElement {
|
|||
|
||||
const color = stateColorCss(this.stateObj);
|
||||
const style = {
|
||||
"--icon-color": color,
|
||||
"--state-color": color,
|
||||
};
|
||||
|
||||
const isJammed = this.stateObj.state === "jammed";
|
||||
|
@ -56,74 +93,70 @@ class MoreInfoLock extends LitElement {
|
|||
.stateObj=${this.stateObj}
|
||||
></ha-more-info-state-header>
|
||||
<div class="controls" style=${styleMap(style)}>
|
||||
${
|
||||
this.stateObj.state === "jammed"
|
||||
? html`
|
||||
<div class="status">
|
||||
<span></span>
|
||||
<div class="icon">
|
||||
<ha-state-icon
|
||||
.hass=${this.hass}
|
||||
.stateObj=${this.stateObj}
|
||||
></ha-state-icon>
|
||||
</div>
|
||||
${this.stateObj.state === "jammed"
|
||||
? html`
|
||||
<div class="status">
|
||||
<span></span>
|
||||
<div class="icon">
|
||||
<ha-state-icon
|
||||
.hass=${this.hass}
|
||||
.stateObj=${this.stateObj}
|
||||
></ha-state-icon>
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<ha-state-control-lock-toggle
|
||||
.stateObj=${this.stateObj}
|
||||
.hass=${this.hass}
|
||||
>
|
||||
</ha-state-control-lock-toggle>
|
||||
`
|
||||
}
|
||||
${
|
||||
supportsOpen || isJammed
|
||||
? html`
|
||||
<div class="buttons">
|
||||
${supportsOpen
|
||||
? html`
|
||||
<ha-outlined-icon-button
|
||||
.disabled=${this.stateObj.state === UNAVAILABLE}
|
||||
.title=${this.hass.localize("ui.card.lock.open")}
|
||||
.ariaLabel=${this.hass.localize("ui.card.lock.open")}
|
||||
@click=${this._open}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiDoorOpen}></ha-svg-icon>
|
||||
</ha-outlined-icon-button>
|
||||
`
|
||||
: nothing}
|
||||
${isJammed
|
||||
? html`
|
||||
<ha-outlined-icon-button
|
||||
.title=${this.hass.localize("ui.card.lock.lock")}
|
||||
.ariaLabel=${this.hass.localize("ui.card.lock.lock")}
|
||||
@click=${this._lock}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiLock}></ha-svg-icon>
|
||||
</ha-outlined-icon-button>
|
||||
<ha-outlined-icon-button
|
||||
.title=${this.hass.localize("ui.card.lock.unlock")}
|
||||
.ariaLabel=${this.hass.localize(
|
||||
"ui.card.lock.unlock"
|
||||
)}
|
||||
@click=${this._unlock}
|
||||
>
|
||||
<ha-svg-icon .path=${mdiLockOff}></ha-svg-icon>
|
||||
</ha-outlined-icon-button>
|
||||
`
|
||||
: nothing}
|
||||
</div>
|
||||
`
|
||||
: nothing
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<ha-state-control-lock-toggle
|
||||
@lock-service-called=${this._resetButtonState}
|
||||
.stateObj=${this.stateObj}
|
||||
.hass=${this.hass}
|
||||
>
|
||||
</ha-state-control-lock-toggle>
|
||||
`}
|
||||
${supportsOpen
|
||||
? html`
|
||||
<div class="buttons">
|
||||
${this._buttonState === "success"
|
||||
? html`
|
||||
<p class="open-success">
|
||||
<ha-svg-icon path=${mdiCheck}></ha-svg-icon>
|
||||
${this.hass.localize("ui.card.lock.open_door_success")}
|
||||
</p>
|
||||
`
|
||||
: html`
|
||||
<ha-control-button
|
||||
.disabled=${this.stateObj.state === UNAVAILABLE}
|
||||
class="open-button ${this._buttonState}"
|
||||
@click=${this._open}
|
||||
>
|
||||
${this._buttonState === "confirm"
|
||||
? this.hass.localize("ui.card.lock.open_door_confirm")
|
||||
: this.hass.localize("ui.card.lock.open_door")}
|
||||
</ha-control-button>
|
||||
`}
|
||||
</div>
|
||||
`
|
||||
: nothing}
|
||||
</div>
|
||||
<div>
|
||||
${isJammed
|
||||
? html`
|
||||
<ha-control-button-group class="jammed">
|
||||
<ha-control-button @click=${this._unlock}>
|
||||
${this.hass.localize("ui.card.lock.unlock")}
|
||||
</ha-control-button>
|
||||
<ha-control-button @click=${this._lock}>
|
||||
${this.hass.localize("ui.card.lock.lock")}
|
||||
</ha-control-button>
|
||||
</ha-control-button-group>
|
||||
`
|
||||
: nothing}
|
||||
<ha-attributes
|
||||
.hass=${this.hass}
|
||||
.stateObj=${this.stateObj}
|
||||
extra-filters="code_format"
|
||||
></ha-attributes>
|
||||
</div>
|
||||
<ha-attributes
|
||||
.hass=${this.hass}
|
||||
.stateObj=${this.stateObj}
|
||||
extra-filters="code_format"
|
||||
></ha-attributes>
|
||||
`;
|
||||
}
|
||||
|
||||
|
@ -131,6 +164,36 @@ class MoreInfoLock extends LitElement {
|
|||
return [
|
||||
moreInfoControlStyle,
|
||||
css`
|
||||
ha-control-button {
|
||||
font-size: 14px;
|
||||
height: 60px;
|
||||
--control-button-border-radius: 24px;
|
||||
}
|
||||
.open-button {
|
||||
width: 100px;
|
||||
--control-button-background-color: var(--state-color);
|
||||
}
|
||||
.open-button.confirm {
|
||||
--control-button-background-color: var(--warning-color);
|
||||
}
|
||||
.open-success {
|
||||
line-height: 60px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
color: var(--success-color);
|
||||
}
|
||||
ha-control-button-group.jammed {
|
||||
--control-button-group-thickness: 60px;
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
ha-control-button-group + ha-attributes:not([empty]) {
|
||||
margin-top: 16px;
|
||||
}
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
opacity: 1;
|
||||
|
@ -155,7 +218,7 @@ class MoreInfoLock extends LitElement {
|
|||
position: relative;
|
||||
--mdc-icon-size: 80px;
|
||||
animation: pulse 1s infinite;
|
||||
color: var(--icon-color);
|
||||
color: var(--state-color);
|
||||
border-radius: 50%;
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
|
@ -171,7 +234,7 @@ class MoreInfoLock extends LitElement {
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: var(--icon-color);
|
||||
background-color: var(--state-color);
|
||||
transition: background-color 180ms ease-in-out;
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
|
|
@ -17,6 +17,13 @@ import { UNAVAILABLE, UNKNOWN } from "../../data/entity";
|
|||
import { forwardHaptic } from "../../data/haptics";
|
||||
import { callProtectedLockService, LockEntity } from "../../data/lock";
|
||||
import { HomeAssistant } from "../../types";
|
||||
import { fireEvent } from "../../common/dom/fire_event";
|
||||
|
||||
declare global {
|
||||
interface HASSDomEvents {
|
||||
"lock-service-called": undefined;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement("ha-state-control-lock-toggle")
|
||||
export class HaStateControlLockToggle extends LitElement {
|
||||
|
@ -67,6 +74,7 @@ export class HaStateControlLockToggle extends LitElement {
|
|||
return;
|
||||
}
|
||||
forwardHaptic("light");
|
||||
fireEvent(this, "lock-service-called");
|
||||
callProtectedLockService(
|
||||
this,
|
||||
this.hass,
|
||||
|
|
|
@ -187,7 +187,10 @@
|
|||
"code": "[%key:ui::card::alarm_control_panel::code%]",
|
||||
"lock": "Lock",
|
||||
"unlock": "Unlock",
|
||||
"open": "Open"
|
||||
"open": "Open",
|
||||
"open_door": "Open door",
|
||||
"open_door_confirm": "Really open?",
|
||||
"open_door_success": "Door open"
|
||||
},
|
||||
"media_player": {
|
||||
"source": "Source",
|
||||
|
|
Loading…
Reference in New Issue