From e46803cb4e59b182868cea02dfa78674d54a0ac0 Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Wed, 22 Feb 2023 17:24:26 +0100 Subject: [PATCH] Add more info for switch and siren (#15547) * Add more info for switch and siren * Fix attributes --- .../components/ha-more-info-toggle.ts | 1 + src/dialogs/more-info/const.ts | 4 +- .../more-info/controls/more-info-light.ts | 2 +- .../more-info/controls/more-info-siren.ts | 64 +++++++++++++++++++ .../more-info/controls/more-info-switch.ts | 64 +++++++++++++++++++ .../more-info/state_more_info_control.ts | 2 + 6 files changed, 135 insertions(+), 2 deletions(-) create mode 100644 src/dialogs/more-info/controls/more-info-siren.ts create mode 100644 src/dialogs/more-info/controls/more-info-switch.ts diff --git a/src/dialogs/more-info/components/ha-more-info-toggle.ts b/src/dialogs/more-info/components/ha-more-info-toggle.ts index 540cb1d028..5f10a849e2 100644 --- a/src/dialogs/more-info/components/ha-more-info-toggle.ts +++ b/src/dialogs/more-info/components/ha-more-info-toggle.ts @@ -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; diff --git a/src/dialogs/more-info/const.ts b/src/dialogs/more-info/const.ts index 3d36b61020..7a33ea20fa 100644 --- a/src/dialogs/more-info/const.ts +++ b/src/dialogs/more-info/const.ts @@ -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", diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts index 55c6da44ec..0204eb7687 100644 --- a/src/dialogs/more-info/controls/more-info-light.ts +++ b/src/dialogs/more-info/controls/more-info-light.ts @@ -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; } diff --git a/src/dialogs/more-info/controls/more-info-siren.ts b/src/dialogs/more-info/controls/more-info-siren.ts new file mode 100644 index 0000000000..b57d58bf45 --- /dev/null +++ b/src/dialogs/more-info/controls/more-info-siren.ts @@ -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` +
+ + + +
+ `; + } + + 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; + } +} diff --git a/src/dialogs/more-info/controls/more-info-switch.ts b/src/dialogs/more-info/controls/more-info-switch.ts new file mode 100644 index 0000000000..0849fa9bff --- /dev/null +++ b/src/dialogs/more-info/controls/more-info-switch.ts @@ -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` +
+ + + +
+ `; + } + + 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; + } +} diff --git a/src/dialogs/more-info/state_more_info_control.ts b/src/dialogs/more-info/state_more_info_control.ts index ad5d0b64e0..b0e0172adb 100644 --- a/src/dialogs/more-info/state_more_info_control.ts +++ b/src/dialogs/more-info/state_more_info_control.ts @@ -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"),