Add more info for switch and siren (#15547)

* Add more info for switch and siren

* Fix attributes
This commit is contained in:
Paul Bottein 2023-02-22 17:24:26 +01:00 committed by GitHub
parent e697a09e53
commit e46803cb4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 135 additions and 2 deletions

View File

@ -146,6 +146,7 @@ export class HaMoreInfoToggle extends LitElement {
flex: 1;
width: 100%;
--control-button-border-radius: 18px;
--mdc-icon-size: 24px;
}
ha-control-button.active {
--control-button-icon-color: white;

View File

@ -16,7 +16,7 @@ export const EDITABLE_DOMAINS_WITH_ID = ["scene", "automation"];
* */
export const EDITABLE_DOMAINS_WITH_UNIQUE_ID = ["script"];
/** Domains with with new more info design. */
export const DOMAINS_WITH_NEW_MORE_INFO = ["light"];
export const DOMAINS_WITH_NEW_MORE_INFO = ["light", "siren", "switch"];
/** Domains with separate more info dialog. */
export const DOMAINS_WITH_MORE_INFO = [
"alarm_control_panel",
@ -37,7 +37,9 @@ export const DOMAINS_WITH_MORE_INFO = [
"remote",
"script",
"scene",
"siren",
"sun",
"switch",
"timer",
"update",
"vacuum",

View File

@ -248,7 +248,7 @@ class MoreInfoLight extends LitElement {
}
ha-more-info-light-brightness,
ha-more-info-light-toggle {
ha-more-info-toggle {
margin-bottom: 24px;
}

View File

@ -0,0 +1,64 @@
import { mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-attributes";
import { LightEntity } from "../../../data/light";
import type { HomeAssistant } from "../../../types";
import "../components/ha-more-info-state-header";
import "../components/ha-more-info-toggle";
@customElement("more-info-siren")
class MoreInfoSiren extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj?: LightEntity;
protected render(): TemplateResult | null {
if (!this.hass || !this.stateObj) {
return null;
}
return html`
<div class="content">
<ha-more-info-state-header
.hass=${this.hass}
.stateObj=${this.stateObj}
></ha-more-info-state-header>
<ha-more-info-toggle
.stateObj=${this.stateObj}
.hass=${this.hass}
.iconPathOn=${mdiVolumeHigh}
.iconPathOff=${mdiVolumeOff}
></ha-more-info-toggle>
<ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj}
></ha-attributes>
</div>
`;
}
static get styles(): CSSResultGroup {
return css`
.content {
display: flex;
flex-direction: column;
align-items: center;
}
ha-more-info-toggle {
margin-bottom: 24px;
}
ha-attributes {
width: 100%;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"more-info-siren": MoreInfoSiren;
}
}

View File

@ -0,0 +1,64 @@
import { mdiPower, mdiPowerOff } from "@mdi/js";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import "../../../components/ha-attributes";
import { LightEntity } from "../../../data/light";
import type { HomeAssistant } from "../../../types";
import "../components/ha-more-info-state-header";
import "../components/ha-more-info-toggle";
@customElement("more-info-switch")
class MoreInfoSwitch extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant;
@property({ attribute: false }) public stateObj?: LightEntity;
protected render(): TemplateResult | null {
if (!this.hass || !this.stateObj) {
return null;
}
return html`
<div class="content">
<ha-more-info-state-header
.hass=${this.hass}
.stateObj=${this.stateObj}
></ha-more-info-state-header>
<ha-more-info-toggle
.stateObj=${this.stateObj}
.hass=${this.hass}
.iconPathOn=${mdiPower}
.iconPathOff=${mdiPowerOff}
></ha-more-info-toggle>
<ha-attributes
.hass=${this.hass}
.stateObj=${this.stateObj}
></ha-attributes>
</div>
`;
}
static get styles(): CSSResultGroup {
return css`
.content {
display: flex;
flex-direction: column;
align-items: center;
}
ha-more-info-toggle {
margin-bottom: 24px;
}
ha-attributes {
width: 100%;
}
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"more-info-switch": MoreInfoSwitch;
}
}

View File

@ -23,7 +23,9 @@ const LAZY_LOADED_MORE_INFO_CONTROL = {
person: () => import("./controls/more-info-person"),
remote: () => import("./controls/more-info-remote"),
script: () => import("./controls/more-info-script"),
siren: () => import("./controls/more-info-siren"),
sun: () => import("./controls/more-info-sun"),
switch: () => import("./controls/more-info-switch"),
timer: () => import("./controls/more-info-timer"),
update: () => import("./controls/more-info-update"),
vacuum: () => import("./controls/more-info-vacuum"),