- ${this._modes.length > 1
+ ${this._modes.length > 1
+ ? html`
+
+ ${this._modes.map(
+ (value) =>
+ html``
+ )}
+
+ `
+ : ""}
+
+ ${this._mode === LightColorMode.COLOR_TEMP
? html`
-
- ${this._modes.map(
- (value) =>
- html``
- )}
-
+
`
: ""}
-
- ${this._mode === LightColorMode.COLOR_TEMP
- ? html`
-
+
-
- `
- : ""}
- ${this._mode === "color"
- ? html`
-
-
-
-
-
+
+
+
- ${supportsRgbw || supportsRgbww
- ? html`
`
+ : ""}
+ ${supportsRgbw
+ ? html`
+
`
- : ""}
- ${supportsRgbw
- ? html`
-
- `
- : ""}
- ${supportsRgbww
- ? html`
-
-
- `
- : ""}
- `
- : ""}
-
+ >
+ `
+ : ""}
+ ${supportsRgbww
+ ? html`
+
+
+ `
+ : ""}
+ `
+ : ""}
-
+
+
${supportsBrightness
? html`
`
: null}
-
+
+
`;
}
@@ -230,41 +232,29 @@ class MoreInfoLight extends LitElement {
}
static get styles(): CSSResultGroup {
- return css`
- .content {
- display: flex;
- flex-direction: column;
- align-items: center;
- }
+ return [
+ moreInfoControlStyle,
+ css`
+ .buttons {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 12px;
+ }
+ .buttons > * {
+ margin: 4px;
+ }
- .buttons {
- display: flex;
- align-items: center;
- justify-content: center;
- margin-bottom: 12px;
- }
- .buttons > * {
- margin: 4px;
- }
-
- ha-more-info-light-brightness,
- ha-more-info-toggle {
- margin-bottom: 24px;
- }
-
- ha-attributes {
- width: 100%;
- }
-
- md-outlined-icon-button-toggle,
- md-outlined-icon-button {
- --ha-icon-display: block;
- --md-sys-color-on-surface: var(--secondary-text-color);
- --md-sys-color-on-surface-variant: var(--secondary-text-color);
- --md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color);
- --md-sys-color-outline: var(--secondary-text-color);
- }
- `;
+ md-outlined-icon-button-toggle,
+ md-outlined-icon-button {
+ --ha-icon-display: block;
+ --md-sys-color-on-surface: var(--secondary-text-color);
+ --md-sys-color-on-surface-variant: var(--secondary-text-color);
+ --md-sys-color-on-surface-rgb: var(--rgb-secondary-text-color);
+ --md-sys-color-outline: var(--secondary-text-color);
+ }
+ `,
+ ];
}
}
diff --git a/src/dialogs/more-info/controls/more-info-siren.ts b/src/dialogs/more-info/controls/more-info-siren.ts
index b57d58bf45..9689dcf0da 100644
--- a/src/dialogs/more-info/controls/more-info-siren.ts
+++ b/src/dialogs/more-info/controls/more-info-siren.ts
@@ -1,9 +1,10 @@
import { mdiVolumeHigh, mdiVolumeOff } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { 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 { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
import "../components/ha-more-info-toggle";
@@ -19,41 +20,27 @@ class MoreInfoSiren extends LitElement {
}
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%;
- }
- `;
+ return moreInfoControlStyle;
}
}
diff --git a/src/dialogs/more-info/controls/more-info-switch.ts b/src/dialogs/more-info/controls/more-info-switch.ts
index 0849fa9bff..c51c6007b7 100644
--- a/src/dialogs/more-info/controls/more-info-switch.ts
+++ b/src/dialogs/more-info/controls/more-info-switch.ts
@@ -1,9 +1,10 @@
import { mdiPower, mdiPowerOff } from "@mdi/js";
-import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
+import { 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 { moreInfoControlStyle } from "../components/ha-more-info-control-style";
import "../components/ha-more-info-state-header";
import "../components/ha-more-info-toggle";
@@ -19,41 +20,27 @@ class MoreInfoSwitch extends LitElement {
}
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%;
- }
- `;
+ return moreInfoControlStyle;
}
}
diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts
index a3cae303a4..2cbf2bffc3 100644
--- a/src/dialogs/more-info/ha-more-info-dialog.ts
+++ b/src/dialogs/more-info/ha-more-info-dialog.ts
@@ -203,13 +203,7 @@ export class MoreInfoDialog extends LitElement {
const isInfoView = this._currView === "info" && !this._childView;
return html`
-
+
${isInfoView
@@ -335,10 +329,14 @@ export class MoreInfoDialog extends LitElement {
@show-child-view=${this._showChildView}
>
${this._childView
- ? dynamicElement(this._childView.viewTag, {
- hass: this.hass,
- params: this._childView.viewParams,
- })
+ ? html`
+
+ ${dynamicElement(this._childView.viewTag, {
+ hass: this.hass,
+ params: this._childView.viewParams,
+ })}
+
+ `
: cache(
this._currView === "info"
? html`
@@ -385,12 +383,8 @@ export class MoreInfoDialog extends LitElement {
protected updated(changedProps: PropertyValues) {
super.updated(changedProps);
if (changedProps.has("_currView")) {
- this.setAttribute("view", this._currView);
this._childView = undefined;
}
- if (changedProps.has("_childView")) {
- this.toggleAttribute("has-child-view", !!this._childView);
- }
}
private _enlarge() {
@@ -407,7 +401,6 @@ export class MoreInfoDialog extends LitElement {
--dialog-content-position: static;
--vertical-align-dialog: flex-start;
--dialog-content-padding: 0;
- --content-padding: 24px;
}
ha-header-bar {
@@ -417,6 +410,7 @@ export class MoreInfoDialog extends LitElement {
display: block;
border-bottom: none;
}
+
.content {
outline: none;
}
@@ -426,22 +420,16 @@ export class MoreInfoDialog extends LitElement {
var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12));
}
- :host([view="settings"]) ha-dialog {
- --content-padding: 0;
+ ha-related-items,
+ ha-more-info-history-and-logbook {
+ padding: 24px;
+ display: block;
}
- :host([view="info"]) ha-dialog[data-domain="camera"] {
- --content-padding: 0;
- /* max height of the video is full screen, minus the height of the header of the dialog and the padding of the dialog (mdc-dialog-max-height: calc(100% - 72px)) */
- --video-max-height: calc(100vh - 65px - 72px);
- }
-
- :host([has-child-view]) ha-dialog {
- --content-padding: 0;
- }
-
- .content {
- padding: var(--content-padding);
+ @media all and (max-width: 450px) {
+ .child-view > * {
+ min-height: calc(100vh - 56px);
+ }
}
.main-title {
diff --git a/src/dialogs/more-info/ha-more-info-info.ts b/src/dialogs/more-info/ha-more-info-info.ts
index 0688b4edf5..c7e9721ca7 100644
--- a/src/dialogs/more-info/ha-more-info-info.ts
+++ b/src/dialogs/more-info/ha-more-info-info.ts
@@ -16,6 +16,7 @@ import {
} from "./const";
import "./ha-more-info-history";
import "./ha-more-info-logbook";
+import "./more-info-content";
@customElement("ha-more-info-info")
export class MoreInfoInfo extends LitElement {
@@ -29,52 +30,59 @@ export class MoreInfoInfo extends LitElement {
const entityId = this.entityId;
const stateObj = this.hass.states[entityId];
const domain = computeDomain(entityId);
+ const newMoreInfo = computeShowNewMoreInfo(stateObj);
return html`
- ${!stateObj
- ? html`
- ${this.hass.localize(
- "ui.dialogs.entity_registry.editor.unavailable"
- )}
- `
- : ""}
- ${stateObj?.attributes.restored && this._entityEntry
- ? html`
- ${this.hass.localize(
- "ui.dialogs.more_info_control.restored.no_longer_provided",
- {
- integration: this._entityEntry.platform,
- }
- )}
- `
- : ""}
- ${DOMAINS_NO_INFO.includes(domain) || computeShowNewMoreInfo(stateObj)
- ? ""
- : html`
-
- `}
- ${DOMAINS_WITH_MORE_INFO.includes(domain) ||
- !computeShowHistoryComponent(this.hass, entityId)
- ? ""
- : html`
+ ${!stateObj
+ ? html`
+ ${this.hass.localize(
+ "ui.dialogs.entity_registry.editor.unavailable"
+ )}
+ `
+ : ""}
+ ${stateObj?.attributes.restored && this._entityEntry
+ ? html`
+ ${this.hass.localize(
+ "ui.dialogs.more_info_control.restored.no_longer_provided",
+ {
+ integration: this._entityEntry.platform,
+ }
+ )}
+ `
+ : ""}
+
+ ${DOMAINS_NO_INFO.includes(domain) || computeShowNewMoreInfo(stateObj)
+ ? ""
+ : html`
+
+ `}
+ ${DOMAINS_WITH_MORE_INFO.includes(domain) ||
+ !computeShowHistoryComponent(this.hass, entityId)
+ ? ""
+ : html`
`}
+ ${DOMAINS_WITH_MORE_INFO.includes(domain) ||
+ !computeShowLogBookComponent(this.hass, entityId)
+ ? ""
+ : html`
`}
+
`}
- ${DOMAINS_WITH_MORE_INFO.includes(domain) ||
- !computeShowLogBookComponent(this.hass, entityId)
- ? ""
- : html``}
-
+ >
+
+
`;
}
@@ -91,6 +99,40 @@ export class MoreInfoInfo extends LitElement {
static get styles() {
return css`
+ .container {
+ display: flex;
+ flex-direction: column;
+ }
+
+ @media all and (max-width: 450px) {
+ .container {
+ min-height: calc(100vh - 56px);
+ }
+ }
+
+ .content {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ padding: 24px;
+ padding-bottom: max(env(safe-area-inset-bottom), 24px);
+ }
+
+ [data-domain="camera"] .content {
+ padding: 0;
+ /* max height of the video is full screen, minus the height of the header of the dialog and the padding of the dialog (mdc-dialog-max-height: calc(100% - 72px)) */
+ --video-max-height: calc(100vh - 65px - 72px);
+ }
+
+ more-info-content {
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ }
+ more-info-content[full-height] {
+ flex: 1;
+ }
+
state-card-content,
ha-more-info-history,
ha-more-info-logbook:not(:last-child) {
@@ -100,9 +142,6 @@ export class MoreInfoInfo extends LitElement {
ha-alert {
display: block;
- margin: calc(-1 * var(--content-padding, 24px))
- calc(-1 * var(--content-padding, 24px)) 16px
- calc(-1 * var(--content-padding, 24px));
}
`;
}