mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 09:16:38 +00:00
Add more info for switch and siren (#15547)
* Add more info for switch and siren * Fix attributes
This commit is contained in:
parent
e697a09e53
commit
e46803cb4e
@ -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;
|
||||
|
@ -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",
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
64
src/dialogs/more-info/controls/more-info-siren.ts
Normal file
64
src/dialogs/more-info/controls/more-info-siren.ts
Normal 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;
|
||||
}
|
||||
}
|
64
src/dialogs/more-info/controls/more-info-switch.ts
Normal file
64
src/dialogs/more-info/controls/more-info-switch.ts
Normal 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;
|
||||
}
|
||||
}
|
@ -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"),
|
||||
|
Loading…
x
Reference in New Issue
Block a user