diff --git a/src/dialogs/enter-code/dialog-enter-code.ts b/src/dialogs/enter-code/dialog-enter-code.ts index baf4ef350b..0eb95992a1 100644 --- a/src/dialogs/enter-code/dialog-enter-code.ts +++ b/src/dialogs/enter-code/dialog-enter-code.ts @@ -222,7 +222,6 @@ export class DialogEnterCode grid-column-start: 6; } } - ha-control-button { width: 56px; height: 56px; @@ -238,12 +237,6 @@ export class DialogEnterCode --control-button-background-color: var(--red-color); --control-button-icon-color: var(--red-color); } - .hidden { - display: none; - } - .buttons { - margin-top: 12px; - } `; } diff --git a/src/panels/lovelace/cards/hui-alarm-panel-card.ts b/src/panels/lovelace/cards/hui-alarm-panel-card.ts index 0a6cd85976..17e55d852f 100644 --- a/src/panels/lovelace/cards/hui-alarm-panel-card.ts +++ b/src/panels/lovelace/cards/hui-alarm-panel-card.ts @@ -1,7 +1,8 @@ +import { mdiClose } from "@mdi/js"; import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; import type { PropertyValues } from "lit"; import { LitElement, css, html, nothing } from "lit"; -import { customElement, property, query, state } from "lit/decorators"; +import { customElement, property, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; import { styleMap } from "lit/directives/style-map"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; @@ -20,18 +21,18 @@ import { callAlarmAction, } from "../../../data/alarm_control_panel"; import { UNAVAILABLE } from "../../../data/entity"; -import type { HomeAssistant } from "../../../types"; -import { findEntities } from "../common/find-entities"; -import { createEntityNotFoundWarning } from "../components/hui-warning"; -import type { LovelaceCard } from "../types"; import type { ExtEntityRegistryEntry } from "../../../data/entity_registry"; import { getExtendedEntityRegistryEntry, subscribeEntityRegistry, } from "../../../data/entity_registry"; +import type { HomeAssistant } from "../../../types"; +import { findEntities } from "../common/find-entities"; +import { createEntityNotFoundWarning } from "../components/hui-warning"; +import type { LovelaceCard } from "../types"; import type { AlarmPanelCardConfig, AlarmPanelCardConfigState } from "./types"; -const BUTTONS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "", "0", "clear"]; +const BUTTONS = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "clear", "0", ""]; export const DEFAULT_STATES = [ "arm_home", @@ -100,7 +101,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { @state() private _entry?: ExtEntityRegistryEntry | null; - @query("#alarmCode") private _input?: HaTextField; + @state() private _value?: string; private _unsubEntityRegistry?: UnsubscribeFunc; @@ -116,14 +117,14 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { public async getCardSize(): Promise { if (!this._config || !this.hass) { - return 9; + return 10; } const stateObj = this.hass.states[this._config.entity]; return !stateObj || stateObj.attributes.code_format !== FORMAT_NUMBER ? 4 - : 9; + : 10; } public setConfig(config: AlarmPanelCardConfig): void { @@ -272,7 +273,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { ? nothing : html` +
${BUTTONS.map((value) => value === "" - ? html` ` - : html` - - ${value === "clear" - ? this.hass!.localize( - `ui.card.alarm_control_panel.clear_code` - ) - : value} - - ` + ? html`` + : value === "clear" + ? html` + + + + ` + : html` + + ${value} + + ` )}
`} @@ -324,22 +331,23 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { ) || entityState; } + private _handleInput(e: Event): void { + this._value = (e.currentTarget as HaTextField).value; + } + private _handlePadClick(e: MouseEvent): void { const val = (e.currentTarget! as any).value; - this._input!.value = val === "clear" ? "" : this._input!.value + val; + this._value = val === "clear" ? "" : (this._value || "") + val; } private _handleActionClick(e: MouseEvent): void { - const input = this._input; callAlarmAction( this.hass!, this._config!.entity, (e.currentTarget! as any).action, - input?.value || undefined + this._value || undefined ); - if (input) { - input.value = ""; - } + this._value = undefined; } private _handleMoreInfo() { @@ -408,20 +416,28 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { animation: none; } - #keypad { - display: flex; - justify-content: center; - flex-wrap: wrap; - margin: auto; - width: 100%; - max-width: 300px; - direction: ltr; + .keypad { + --keypad-columns: 3; + margin-top: 12px; + padding: 12px; + display: grid; + grid-template-columns: repeat(var(--keypad-columns), auto); + grid-auto-rows: auto; + grid-gap: 24px; + justify-items: center; + align-items: center; } - #keypad mwc-button { - padding: 8px; - width: 30%; - box-sizing: border-box; + ha-control-button { + width: 56px; + height: 56px; + --control-button-border-radius: 28px; + --mdc-icon-size: 24px; + font-size: var(--ha-font-size-2xl); + } + .clear { + --control-button-background-color: var(--red-color); + --control-button-icon-color: var(--red-color); } .actions { @@ -438,13 +454,6 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard { mwc-button#disarm { color: var(--error-color); } - - mwc-button.numberkey { - --mdc-typography-button-font-size: var( - --keypad-font-size, - var(--ha-font-size-s) - ); - } `; }