mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 17:26:42 +00:00
Update alarm card styling (#25598)
This commit is contained in:
parent
cde2b436d1
commit
61019447cf
@ -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;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user