From c9ec4b4e24adf157a35acd038acf547c8dcf60d5 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Fri, 10 Jul 2020 10:16:48 +0200 Subject: [PATCH] Migrate entity settings dialog (#6349) --- src/dialogs/more-info/ha-more-info-dialog.ts | 3 +- .../config/entities/dialog-entity-editor.ts | 219 ++++++++---------- .../settings/entity-settings-helper-tab.ts | 57 ++--- .../entities/entity-registry-settings.ts | 140 ++++++----- 4 files changed, 190 insertions(+), 229 deletions(-) diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index a52430bbd0..e4dff4b279 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -1,8 +1,9 @@ import "@material/mwc-button"; +import "@material/mwc-icon-button"; import "@polymer/app-layout/app-toolbar/app-toolbar"; import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; -import "../../components/ha-icon-button"; import "../../components/ha-dialog"; +import "../../components/ha-svg-icon"; import { isComponentLoaded } from "../../common/config/is_component_loaded"; import { DOMAINS_MORE_INFO_NO_HISTORY } from "../../common/const"; import { computeStateName } from "../../common/entity/compute_state_name"; diff --git a/src/panels/config/entities/dialog-entity-editor.ts b/src/panels/config/entities/dialog-entity-editor.ts index 3aecc2b883..e765ddffb8 100644 --- a/src/panels/config/entities/dialog-entity-editor.ts +++ b/src/panels/config/entities/dialog-entity-editor.ts @@ -1,8 +1,7 @@ import "@polymer/app-layout/app-toolbar/app-toolbar"; -import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable"; -import "../../../components/ha-icon-button"; import "@polymer/paper-tabs/paper-tab"; import "@polymer/paper-tabs/paper-tabs"; +import "@material/mwc-icon-button"; import { HassEntity } from "home-assistant-js-websocket"; import { css, @@ -11,27 +10,26 @@ import { html, LitElement, property, - query, TemplateResult, } from "lit-element"; import { cache } from "lit-html/directives/cache"; import { dynamicElement } from "../../../common/dom/dynamic-element-directive"; import { fireEvent } from "../../../common/dom/fire_event"; import { computeStateName } from "../../../common/entity/compute_state_name"; -import "../../../components/dialog/ha-paper-dialog"; -import type { HaPaperDialog } from "../../../components/dialog/ha-paper-dialog"; +import "../../../components/ha-dialog"; +import "../../../components/ha-svg-icon"; import "../../../components/ha-related-items"; import { EntityRegistryEntry, ExtEntityRegistryEntry, getExtendedEntityRegistryEntry, } from "../../../data/entity_registry"; -import type { PolymerChangedEvent } from "../../../polymer-types"; import { haStyleDialog } from "../../../resources/styles"; import type { HomeAssistant } from "../../../types"; import { PLATFORMS_WITH_SETTINGS_TAB } from "./const"; import "./entity-registry-settings"; import type { EntityRegistryDetailDialogParams } from "./show-dialog-entity-editor"; +import { mdiClose, mdiTune } from "@mdi/js"; interface Tabs { [key: string]: Tab; @@ -59,8 +57,6 @@ export class DialogEntityEditor extends LitElement { @property() private _settingsElementTag?: string; - @query("ha-paper-dialog") private _dialog!: HaPaperDialog; - private _curTabIndex = 0; public async showDialog( @@ -87,91 +83,97 @@ export class DialogEntityEditor extends LitElement { const stateObj: HassEntity | undefined = this.hass.states[entityId]; return html` - - - -
- ${stateObj ? computeStateName(stateObj) : entry?.name || entityId} -
- ${stateObj - ? html` - - ` - : ""} - - - - ${this.hass.localize("ui.dialogs.entity_registry.settings")} - - ${Object.entries(this._extraTabs).map( - ([key, tab]) => html` - - ${this.hass.localize(tab.translationKey) || key} - - ` - )} - - ${this.hass.localize("ui.dialogs.entity_registry.related")} - - - ${cache( - this._curTab === "tab-settings" - ? entry - ? this._settingsElementTag - ? html` - ${dynamicElement(this._settingsElementTag, { - hass: this.hass, - entry, - entityId, - dialogElement: this._dialog, - })} - ` - : "" - : html` - - ${this.hass.localize( - "ui.dialogs.entity_registry.no_unique_id" +
+ + + + +
+ ${stateObj ? computeStateName(stateObj) : entry?.name || entityId} +
+ ${stateObj + ? html` + + @click=${this._openMoreInfo} + > + + ` - : this._curTab === "tab-related" - ? html` - - - + : ""} + + + + ${this.hass.localize("ui.dialogs.entity_registry.settings")} + + ${Object.entries(this._extraTabs).map( + ([key, tab]) => html` + + ${this.hass.localize(tab.translationKey) || key} + ` - : html`` - )} - + )} + + ${this.hass.localize("ui.dialogs.entity_registry.related")} + + +
+
+ ${cache(this._renderTab())} +
+ `; } + private _renderTab() { + switch (this._curTab) { + case "tab-settings": + if (this._entry) { + if (this._settingsElementTag) { + return html` + ${dynamicElement(this._settingsElementTag, { + hass: this.hass, + entry: this._entry, + entityId: this._params!.entity_id, + })} + `; + } + return html``; + } + return html` +
+ ${this.hass.localize("ui.dialogs.entity_registry.no_unique_id")} +
+ `; + case "tab-related": + return html` + + `; + default: + return html``; + } + } + private async _getEntityReg() { try { this._entry = await getExtendedEntityRegistryEntry( @@ -189,12 +191,6 @@ export class DialogEntityEditor extends LitElement { return; } this._curTab = ev.detail.value.id; - this._resizeDialog(); - } - - private async _resizeDialog(): Promise { - await this.updateComplete; - fireEvent(this._dialog as HTMLElement, "iron-resize"); } private async _loadPlatformSettingTabs(): Promise { @@ -219,12 +215,6 @@ export class DialogEntityEditor extends LitElement { this.closeDialog(); } - private _openedChanged(ev: PolymerChangedEvent): void { - if (!(ev.detail as any).value) { - this._params = undefined; - } - } - static get styles(): CSSResult[] { return [ haStyleDialog, @@ -249,16 +239,23 @@ export class DialogEntityEditor extends LitElement { text-overflow: ellipsis; } + ha-dialog { + --dialog-content-padding: 0; + } + @media all and (min-width: 451px) and (min-height: 501px) { .main-title { pointer-events: auto; cursor: default; } + .wrapper { + width: 400px; + } } - ha-paper-dialog { - width: 450px; - max-height: none !important; + .content { + display: block; + padding: 20px 24px; } /* overrule the ha-style-dialog max-height on small screens */ @@ -267,28 +264,6 @@ export class DialogEntityEditor extends LitElement { background-color: var(--app-header-background-color); color: var(--app-header-text-color, white); } - ha-paper-dialog { - height: 100%; - max-height: 100% !important; - width: 100% !important; - border-radius: 0px; - position: fixed !important; - margin: 0; - } - ha-paper-dialog::before { - content: ""; - position: fixed; - z-index: -1; - top: 0px; - left: 0px; - right: 0px; - bottom: 0px; - background-color: inherit; - } - } - - paper-dialog-scrollable { - padding-bottom: 16px; } mwc-button.warning { diff --git a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts b/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts index e6aa99aa2f..dbf2a37a88 100644 --- a/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts +++ b/src/panels/config/entities/editor-tabs/settings/entity-settings-helper-tab.ts @@ -12,7 +12,6 @@ import { import { isComponentLoaded } from "../../../../../common/config/is_component_loaded"; import { dynamicElement } from "../../../../../common/dom/dynamic-element-directive"; import { fireEvent } from "../../../../../common/dom/fire_event"; -import { HaPaperDialog } from "../../../../../components/dialog/ha-paper-dialog"; import { ExtEntityRegistryEntry, removeEntityRegistryEntry, @@ -87,8 +86,6 @@ export class EntityRegistrySettingsHelper extends LitElement { @property() public entry!: ExtEntityRegistryEntry; - @property() public dialogElement!: HaPaperDialog; - @property() private _error?: string; @property() private _item?: Helper | null; @@ -120,32 +117,30 @@ export class EntityRegistrySettingsHelper extends LitElement { } const stateObj = this.hass.states[this.entry.entity_id]; return html` - - ${this._error ? html`
${this._error}
` : ""} -
- ${!this._componentLoaded - ? this.hass.localize( - "ui.dialogs.helper_settings.platform_not_loaded", - "platform", - this.entry.platform - ) - : this._item === null - ? this.hass.localize("ui.dialogs.helper_settings.yaml_not_editable") - : html` -
- ${dynamicElement(`ha-${this.entry.platform}-form`, { - hass: this.hass, - item: this._item, - entry: this.entry, - })} -
- `} - -
- + ${this._error ? html`
${this._error}
` : ""} +
+ ${!this._componentLoaded + ? this.hass.localize( + "ui.dialogs.helper_settings.platform_not_loaded", + "platform", + this.entry.platform + ) + : this._item === null + ? this.hass.localize("ui.dialogs.helper_settings.yaml_not_editable") + : html` + + ${dynamicElement(`ha-${this.entry.platform}-form`, { + hass: this.hass, + item: this._item, + entry: this.entry, + })} + + `} + +
item.id === this.entry.unique_id) || null; - await this.updateComplete; - fireEvent(this.dialogElement as HTMLElement, "iron-resize"); } private async _updateItem(): Promise { @@ -232,7 +225,7 @@ export class EntityRegistrySettingsHelper extends LitElement { padding: 0 !important; } .form { - padding-bottom: 24px; + padding: 20px 24px; } .buttons { display: flex; diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts index 7fc445518b..d5f971dc36 100644 --- a/src/panels/config/entities/entity-registry-settings.ts +++ b/src/panels/config/entities/entity-registry-settings.ts @@ -33,8 +33,6 @@ export class EntityRegistrySettings extends LitElement { @property() public entry!: ExtEntityRegistryEntry; - @property() public dialogElement!: HTMLElement; - @property() private _name!: string; @property() private _icon!: string; @@ -72,82 +70,76 @@ export class EntityRegistrySettings extends LitElement { computeDomain(this._entityId.trim()) !== computeDomain(this.entry.entity_id); return html` - - ${!stateObj - ? html` -
- ${this.hass!.localize( - "ui.dialogs.entity_registry.editor.unavailable" - )} -
- ` - : ""} - ${this._error ? html`
${this._error}
` : ""} -
- - - -
- - + ${!stateObj + ? html`
-
- ${this.hass.localize( - "ui.dialogs.entity_registry.editor.enabled_label" - )} -
-
- ${this._disabledBy && this._disabledBy !== "user" - ? this.hass.localize( - "ui.dialogs.entity_registry.editor.enabled_cause", - "cause", - this.hass.localize( - `config_entry.disabled_by.${this._disabledBy}` - ) + ${this.hass!.localize( + "ui.dialogs.entity_registry.editor.unavailable" + )} +
+ ` + : ""} + ${this._error ? html`
${this._error}
` : ""} +
+ + + +
+ + +
+
+ ${this.hass.localize( + "ui.dialogs.entity_registry.editor.enabled_label" + )} +
+
+ ${this._disabledBy && this._disabledBy !== "user" + ? this.hass.localize( + "ui.dialogs.entity_registry.editor.enabled_cause", + "cause", + this.hass.localize( + `config_entry.disabled_by.${this._disabledBy}` ) - : ""} - ${this.hass.localize( - "ui.dialogs.entity_registry.editor.enabled_description" - )} -
${this.hass.localize( - "ui.dialogs.entity_registry.editor.note" - )} -
+ ) + : ""} + ${this.hass.localize( + "ui.dialogs.entity_registry.editor.enabled_description" + )} +
${this.hass.localize( + "ui.dialogs.entity_registry.editor.note" + )}
- +