Skip to content

Commit

Permalink
Add confirmation button in lock more info (#20093)
Browse files Browse the repository at this point in the history 
* Add confirmation button in more info lock

* Reset confirm open on service call

* Use text instead of toast for success
  • Loading branch information
@piitaya
piitaya authored Mar 25, 2024
1 parent db37099 commit 45a5c1c
Show file tree
Hide file tree
Showing 4 changed files with 156 additions and 74 deletions.
12 changes: 10 additions & 2 deletions src/components/ha-control-button.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -126,13 +131,16 @@ 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;
color: var(--control-button-icon-color);
}
.button ::slotted(*) {
pointer-events: none;
opacity: 0.95;
}
.button:disabled {
cursor: not-allowed;
Expand Down
205 changes: 134 additions & 71 deletions src/dialogs/more-info/controls/more-info-lock.ts
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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() {
Expand All @@ -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";
Expand All @@ -56,81 +93,107 @@ 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>
`;
}

static get styles(): CSSResultGroup {
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;
Expand All @@ -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;
Expand All @@ -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;
}
Expand Down
8 changes: 8 additions & 0 deletions src/state-control/lock/ha-state-control-lock-toggle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -67,6 +74,7 @@ export class HaStateControlLockToggle extends LitElement {
return;
}
forwardHaptic("light");
fireEvent(this, "lock-service-called");
callProtectedLockService(
this,
this.hass,
Expand Down
5 changes: 4 additions & 1 deletion src/translations/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down

0 comments on commit 45a5c1c

Please sign in to comment.