From 3b5fe7fd9f76b282bc26990e7baae9f24dcb6bbc Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Thu, 23 Feb 2023 15:10:05 +0100 Subject: [PATCH] Center new more info controls (#15564) * Center new more info controls * Center change color view --- .../components/ha-more-info-control-style.ts | 24 ++ .../ha-more-info-view-light-color-picker.ts | 210 +++++++++--------- src/dialogs/more-info/const.ts | 4 +- .../more-info/controls/more-info-group.ts | 16 +- .../more-info/controls/more-info-light.ts | 80 +++---- .../more-info/controls/more-info-siren.ts | 37 +-- .../more-info/controls/more-info-switch.ts | 37 +-- src/dialogs/more-info/ha-more-info-dialog.ts | 48 ++-- src/dialogs/more-info/ha-more-info-info.ts | 131 +++++++---- 9 files changed, 304 insertions(+), 283 deletions(-) create mode 100644 src/dialogs/more-info/components/ha-more-info-control-style.ts diff --git a/src/dialogs/more-info/components/ha-more-info-control-style.ts b/src/dialogs/more-info/components/ha-more-info-control-style.ts new file mode 100644 index 0000000000..1c3fed35e2 --- /dev/null +++ b/src/dialogs/more-info/components/ha-more-info-control-style.ts @@ -0,0 +1,24 @@ +import { css } from "lit"; + +export const moreInfoControlStyle = css` + :host { + display: flex; + flex-direction: column; + flex: 1; + justify-content: space-between; + } + + .controls { + display: flex; + flex-direction: column; + align-items: center; + } + + .controls > *:not(:last-child) { + margin-bottom: 24px; + } + + ha-attributes { + width: 100%; + } +`; diff --git a/src/dialogs/more-info/components/lights/ha-more-info-view-light-color-picker.ts b/src/dialogs/more-info/components/lights/ha-more-info-view-light-color-picker.ts index 33058b76a7..f7ff640bcb 100644 --- a/src/dialogs/more-info/components/lights/ha-more-info-view-light-color-picker.ts +++ b/src/dialogs/more-info/components/lights/ha-more-info-view-light-color-picker.ts @@ -23,7 +23,6 @@ import { lightSupportsColor, lightSupportsColorMode, } from "../../../../data/light"; -import { haStyleDialog } from "../../../../resources/styles"; import { HomeAssistant } from "../../../../types"; import { LightColorPickerViewParams } from "./show-view-light-color-picker"; @@ -78,117 +77,115 @@ class MoreInfoViewLightColorPicker extends LitElement { lightSupportsColorMode(this.stateObj, LightColorMode.RGBW); return html` -
- ${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` + + + ` + : ""} + ` + : ""}
`; } @@ -482,13 +479,18 @@ class MoreInfoViewLightColorPicker extends LitElement { static get styles(): CSSResultGroup { return [ - haStyleDialog, css` + :host { + display: flex; + flex-direction: column; + } .content { display: flex; flex-direction: column; align-items: center; - padding: 16px; + justify-content: center; + padding: 24px; + flex: 1; } .segmentationContainer { diff --git a/src/dialogs/more-info/const.ts b/src/dialogs/more-info/const.ts index 7a33ea20fa..fbcb330aec 100644 --- a/src/dialogs/more-info/const.ts +++ b/src/dialogs/more-info/const.ts @@ -94,12 +94,12 @@ export const computeShowLogBookComponent = ( return true; }; -export const computeShowNewMoreInfo = (stateObj: HassEntity) => { +export const computeShowNewMoreInfo = (stateObj: HassEntity): boolean => { const domain = computeDomain(stateObj.entity_id); if (domain === "group") { const groupDomain = computeGroupDomain(stateObj as GroupEntity); return ( - groupDomain && + groupDomain != null && groupDomain !== "group" && DOMAINS_WITH_NEW_MORE_INFO.includes(groupDomain) ); diff --git a/src/dialogs/more-info/controls/more-info-group.ts b/src/dialogs/more-info/controls/more-info-group.ts index bc5536541d..0d7086fb57 100644 --- a/src/dialogs/more-info/controls/more-info-group.ts +++ b/src/dialogs/more-info/controls/more-info-group.ts @@ -12,6 +12,7 @@ import { dynamicElement } from "../../../common/dom/dynamic-element-directive"; import { computeGroupDomain, GroupEntity } from "../../../data/group"; import "../../../state-summary/state-card-content"; import { HomeAssistant } from "../../../types"; +import { moreInfoControlStyle } from "../components/ha-more-info-control-style"; import { domainMoreInfoType, importMoreInfoControl, @@ -94,12 +95,15 @@ class MoreInfoGroup extends LitElement { } static get styles(): CSSResultGroup { - return css` - state-card-content { - display: block; - margin-top: 8px; - } - `; + return [ + moreInfoControlStyle, + css` + state-card-content { + display: block; + margin-top: 8px; + } + `, + ]; } } diff --git a/src/dialogs/more-info/controls/more-info-light.ts b/src/dialogs/more-info/controls/more-info-light.ts index 0204eb7687..173f014b90 100644 --- a/src/dialogs/more-info/controls/more-info-light.ts +++ b/src/dialogs/more-info/controls/more-info-light.ts @@ -32,6 +32,7 @@ import { lightSupportsColorMode, } 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"; import "../components/lights/ha-more-info-light-brightness"; @@ -85,12 +86,12 @@ class MoreInfoLight extends LitElement { : undefined; return 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)); } `; }