Update alarm card styling (#25598)

This commit is contained in:
Bram Kragten 2025-05-26 18:31:27 +02:00 committed by GitHub
parent cde2b436d1
commit 61019447cf
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 62 additions and 60 deletions

View File

@ -222,7 +222,6 @@ export class DialogEnterCode
grid-column-start: 6; grid-column-start: 6;
} }
} }
ha-control-button { ha-control-button {
width: 56px; width: 56px;
height: 56px; height: 56px;
@ -238,12 +237,6 @@ export class DialogEnterCode
--control-button-background-color: var(--red-color); --control-button-background-color: var(--red-color);
--control-button-icon-color: var(--red-color); --control-button-icon-color: var(--red-color);
} }
.hidden {
display: none;
}
.buttons {
margin-top: 12px;
}
`; `;
} }

View File

@ -1,7 +1,8 @@
import { mdiClose } from "@mdi/js";
import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; import type { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
import type { PropertyValues } from "lit"; import type { PropertyValues } from "lit";
import { LitElement, css, html, nothing } 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 { classMap } from "lit/directives/class-map";
import { styleMap } from "lit/directives/style-map"; import { styleMap } from "lit/directives/style-map";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
@ -20,18 +21,18 @@ import {
callAlarmAction, callAlarmAction,
} from "../../../data/alarm_control_panel"; } from "../../../data/alarm_control_panel";
import { UNAVAILABLE } from "../../../data/entity"; 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 type { ExtEntityRegistryEntry } from "../../../data/entity_registry";
import { import {
getExtendedEntityRegistryEntry, getExtendedEntityRegistryEntry,
subscribeEntityRegistry, subscribeEntityRegistry,
} from "../../../data/entity_registry"; } 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"; 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 = [ export const DEFAULT_STATES = [
"arm_home", "arm_home",
@ -100,7 +101,7 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
@state() private _entry?: ExtEntityRegistryEntry | null; @state() private _entry?: ExtEntityRegistryEntry | null;
@query("#alarmCode") private _input?: HaTextField; @state() private _value?: string;
private _unsubEntityRegistry?: UnsubscribeFunc; private _unsubEntityRegistry?: UnsubscribeFunc;
@ -116,14 +117,14 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
public async getCardSize(): Promise<number> { public async getCardSize(): Promise<number> {
if (!this._config || !this.hass) { if (!this._config || !this.hass) {
return 9; return 10;
} }
const stateObj = this.hass.states[this._config.entity]; const stateObj = this.hass.states[this._config.entity];
return !stateObj || stateObj.attributes.code_format !== FORMAT_NUMBER return !stateObj || stateObj.attributes.code_format !== FORMAT_NUMBER
? 4 ? 4
: 9; : 10;
} }
public setConfig(config: AlarmPanelCardConfig): void { public setConfig(config: AlarmPanelCardConfig): void {
@ -272,7 +273,8 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
? nothing ? nothing
: html` : html`
<ha-textfield <ha-textfield
id="alarmCode" .value=${this._value || ""}
@input=${this._handleInput}
.label=${this.hass.localize("ui.card.alarm_control_panel.code")} .label=${this.hass.localize("ui.card.alarm_control_panel.code")}
type="password" type="password"
.inputMode=${stateObj.attributes.code_format === FORMAT_NUMBER .inputMode=${stateObj.attributes.code_format === FORMAT_NUMBER
@ -283,26 +285,31 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
${stateObj.attributes.code_format !== FORMAT_NUMBER || defaultCode ${stateObj.attributes.code_format !== FORMAT_NUMBER || defaultCode
? nothing ? nothing
: html` : html`
<div id="keypad"> <div class="keypad">
${BUTTONS.map((value) => ${BUTTONS.map((value) =>
value === "" value === ""
? html` <mwc-button disabled></mwc-button> ` ? html`<span></span>`
: html` : value === "clear"
<mwc-button ? html`
.value=${value} <ha-control-button
@click=${this._handlePadClick} @click=${this._handlePadClick}
outlined class="clear"
class=${classMap({ .value=${value}
numberkey: value !== "clear", .disabled=${!this._value}
})} .label=${this.hass!.localize("ui.common.clear")}
> >
${value === "clear" <ha-svg-icon path=${mdiClose}></ha-svg-icon>
? this.hass!.localize( </ha-control-button>
`ui.card.alarm_control_panel.clear_code` `
) : html`
: value} <ha-control-button
</mwc-button> .value=${value}
` @click=${this._handlePadClick}
.label=${value}
>
${value}
</ha-control-button>
`
)} )}
</div> </div>
`} `}
@ -324,22 +331,23 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
) || entityState; ) || entityState;
} }
private _handleInput(e: Event): void {
this._value = (e.currentTarget as HaTextField).value;
}
private _handlePadClick(e: MouseEvent): void { private _handlePadClick(e: MouseEvent): void {
const val = (e.currentTarget! as any).value; 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 { private _handleActionClick(e: MouseEvent): void {
const input = this._input;
callAlarmAction( callAlarmAction(
this.hass!, this.hass!,
this._config!.entity, this._config!.entity,
(e.currentTarget! as any).action, (e.currentTarget! as any).action,
input?.value || undefined this._value || undefined
); );
if (input) { this._value = undefined;
input.value = "";
}
} }
private _handleMoreInfo() { private _handleMoreInfo() {
@ -408,20 +416,28 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
animation: none; animation: none;
} }
#keypad { .keypad {
display: flex; --keypad-columns: 3;
justify-content: center; margin-top: 12px;
flex-wrap: wrap; padding: 12px;
margin: auto; display: grid;
width: 100%; grid-template-columns: repeat(var(--keypad-columns), auto);
max-width: 300px; grid-auto-rows: auto;
direction: ltr; grid-gap: 24px;
justify-items: center;
align-items: center;
} }
#keypad mwc-button { ha-control-button {
padding: 8px; width: 56px;
width: 30%; height: 56px;
box-sizing: border-box; --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 { .actions {
@ -438,13 +454,6 @@ class HuiAlarmPanelCard extends LitElement implements LovelaceCard {
mwc-button#disarm { mwc-button#disarm {
color: var(--error-color); color: var(--error-color);
} }
mwc-button.numberkey {
--mdc-typography-button-font-size: var(
--keypad-font-size,
var(--ha-font-size-s)
);
}
`; `;
} }