From 0eeed8519327cb8c1cb7b24d152acfae68ad01ac Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Thu, 10 Feb 2022 15:24:47 +0100 Subject: [PATCH] Bunch of fixes and cleanup (#11636) --- hassio/src/system/hassio-core-info.ts | 10 -- hassio/src/system/hassio-host-info.ts | 10 -- src/components/entity/ha-entities-picker.ts | 8 +- src/components/entity/ha-statistics-picker.ts | 2 + src/components/ha-check-list-item.ts | 4 +- src/components/ha-selector/ha-selector.ts | 2 +- src/components/ha-service-control.ts | 5 +- src/components/ha-service-picker.ts | 2 +- .../media-player/ha-media-player-browse.ts | 1 - .../action/ha-automation-action-row.ts | 9 +- .../types/ha-automation-action-choose.ts | 1 - .../types/ha-automation-action-device_id.ts | 9 +- .../ha-automation-condition-editor.ts | 15 ++- .../trigger/ha-automation-trigger-row.ts | 3 + .../integration-panels/zha/zha-device-card.ts | 1 - .../zha/zha-device-pairing-status-card.ts | 1 - .../resources/ha-config-lovelace-resources.ts | 1 - src/panels/config/scene/ha-scene-editor.ts | 6 ++ src/panels/config/users/dialog-user-detail.ts | 1 + .../service/developer-tools-service.ts | 35 +++---- .../lovelace/components/hui-action-editor.ts | 91 +++++++++---------- .../lovelace/components/hui-entity-editor.ts | 10 +- .../components/hui-theme-select-editor.ts | 52 +++++------ .../config-elements/config-elements-style.ts | 7 ++ .../hui-entities-card-editor.ts | 1 - .../hui-header-footer-editor.ts | 1 - .../editor/hui-entities-card-row-editor.ts | 11 ++- 27 files changed, 163 insertions(+), 136 deletions(-) diff --git a/hassio/src/system/hassio-core-info.ts b/hassio/src/system/hassio-core-info.ts index dc3589246e..df078742d7 100644 --- a/hassio/src/system/hassio-core-info.ts +++ b/hassio/src/system/hassio-core-info.ts @@ -205,16 +205,6 @@ class HassioCoreInfo extends LitElement { color: var(--secondary-text-color); --mdc-menu-min-width: 200px; } - @media (min-width: 563px) { - paper-listbox { - max-height: 150px; - overflow: auto; - } - } - paper-item { - cursor: pointer; - min-height: 35px; - } mwc-list-item ha-svg-icon { color: var(--secondary-text-color); } diff --git a/hassio/src/system/hassio-host-info.ts b/hassio/src/system/hassio-host-info.ts index ff51c8903b..bd743fe8b2 100644 --- a/hassio/src/system/hassio-host-info.ts +++ b/hassio/src/system/hassio-host-info.ts @@ -440,16 +440,6 @@ class HassioHostInfo extends LitElement { color: var(--secondary-text-color); --mdc-menu-min-width: 200px; } - @media (min-width: 563px) { - paper-listbox { - max-height: 150px; - overflow: auto; - } - } - paper-item { - cursor: pointer; - min-height: 35px; - } mwc-list-item ha-svg-icon { color: var(--secondary-text-color); } diff --git a/src/components/entity/ha-entities-picker.ts b/src/components/entity/ha-entities-picker.ts index 19c20886fa..deac6335ca 100644 --- a/src/components/entity/ha-entities-picker.ts +++ b/src/components/entity/ha-entities-picker.ts @@ -1,5 +1,5 @@ import type { HassEntity } from "home-assistant-js-websocket"; -import { html, LitElement, TemplateResult } from "lit"; +import { css, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import { isValidEntityId } from "../../common/entity/valid_entity_id"; @@ -145,6 +145,12 @@ class HaEntitiesPickerLight extends LitElement { this._updateEntities([...currentEntities, toAdd]); } + + static override styles = css` + ha-entity-picker { + margin-top: 8px; + } + `; } declare global { diff --git a/src/components/entity/ha-statistics-picker.ts b/src/components/entity/ha-statistics-picker.ts index 08242a5263..aa25e45803 100644 --- a/src/components/entity/ha-statistics-picker.ts +++ b/src/components/entity/ha-statistics-picker.ts @@ -111,7 +111,9 @@ class HaStatisticsPicker extends LitElement { display: block; } ha-statistic-picker { + display: block; width: 100%; + margin-top: 8px; } `; } diff --git a/src/components/ha-check-list-item.ts b/src/components/ha-check-list-item.ts index 5b237208c9..63f5827f67 100644 --- a/src/components/ha-check-list-item.ts +++ b/src/components/ha-check-list-item.ts @@ -1,12 +1,14 @@ import { css } from "lit"; import { CheckListItemBase } from "@material/mwc-list/mwc-check-list-item-base"; -import { styles } from "@material/mwc-list/mwc-control-list-item.css"; +import { styles as controlStyles } from "@material/mwc-list/mwc-control-list-item.css"; +import { styles } from "@material/mwc-list/mwc-list-item.css"; import { customElement } from "lit/decorators"; @customElement("ha-check-list-item") export class HaCheckListItem extends CheckListItemBase { static override styles = [ styles, + controlStyles, css` :host { --mdc-theme-secondary: var(--primary-color); diff --git a/src/components/ha-selector/ha-selector.ts b/src/components/ha-selector/ha-selector.ts index e3eda4a3df..c73c5b0805 100644 --- a/src/components/ha-selector/ha-selector.ts +++ b/src/components/ha-selector/ha-selector.ts @@ -31,7 +31,7 @@ export class HaSelector extends LitElement { @property({ type: Boolean }) public disabled = false; public focus() { - this.shadowRoot!.getElementById("selector")?.focus(); + this.shadowRoot?.getElementById("selector")?.focus(); } private get _type() { diff --git a/src/components/ha-service-control.ts b/src/components/ha-service-control.ts index 9cac6ae6b9..badc1bb488 100644 --- a/src/components/ha-service-control.ts +++ b/src/components/ha-service-control.ts @@ -67,7 +67,7 @@ export class HaServiceControl extends LitElement { @query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor; - protected updated(changedProperties: PropertyValues) { + protected willUpdate(changedProperties: PropertyValues) { if (!changedProperties.has("value")) { return; } @@ -482,9 +482,6 @@ export class HaServiceControl extends LitElement { display: block; margin: var(--service-control-padding, 0 16px); } - ha-service-picker { - padding-top: 16px; - } ha-yaml-editor { padding: 16px 0; } diff --git a/src/components/ha-service-picker.ts b/src/components/ha-service-picker.ts index dab0015447..a25c61a25a 100644 --- a/src/components/ha-service-picker.ts +++ b/src/components/ha-service-picker.ts @@ -10,7 +10,7 @@ import "./ha-combo-box"; const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = ( item -) => html` +) => html` ${item.name} ${item.name === item.service ? "" : item.service} - - ${this._yamlMode - ? html` - ` - : html`
+ + ${this._yamlMode + ? html`
+ + +
` + : html`
`} + class="card-content" + > + `} +
diff --git a/src/panels/lovelace/components/hui-action-editor.ts b/src/panels/lovelace/components/hui-action-editor.ts index 7dd7787daf..114233e2ec 100644 --- a/src/panels/lovelace/components/hui-action-editor.ts +++ b/src/panels/lovelace/components/hui-action-editor.ts @@ -1,13 +1,8 @@ -import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; -import "@polymer/paper-input/paper-input"; -import "@polymer/paper-input/paper-textarea"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; -import type { PaperListboxElement } from "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import memoizeOne from "memoize-one"; import { fireEvent } from "../../../common/dom/fire_event"; +import { stopPropagation } from "../../../common/dom/stop_propagation"; import "../../../components/ha-help-tooltip"; import "../../../components/ha-service-control"; import { @@ -62,32 +57,30 @@ export class HuiActionEditor extends LitElement { return html` ${this.config?.action === "navigate" ? html` - + @input=${this._valueChanged} + > ` : ""} ${this.config?.action === "url" ? html` - + @input=${this._valueChanged} + > ` : ""} ${this.config?.action === "call-service" @@ -132,23 +125,17 @@ export class HuiActionEditor extends LitElement { `; } - private _actionPicked(ev: CustomEvent): void { + private _actionPicked(ev): void { ev.stopPropagation(); if (!this.hass) { return; } - const item = ev.detail.item; - const value = item.value; + const value = ev.target.value; if (this.config?.action === value) { return; } if (value === "default") { fireEvent(this, "value-changed", { value: undefined }); - if (this.config?.action) { - ( - this.shadowRoot!.querySelector("paper-listbox") as PaperListboxElement - ).select(this.config.action); - } return; } @@ -173,13 +160,13 @@ export class HuiActionEditor extends LitElement { }); } - private _valueChanged(ev: CustomEvent): void { + private _valueChanged(ev): void { ev.stopPropagation(); if (!this.hass) { return; } const target = ev.target! as EditorTarget; - const value = ev.detail.value; + const value = ev.target.value; if (this[`_${target.configValue}`] === value) { return; } @@ -205,7 +192,19 @@ export class HuiActionEditor extends LitElement { static get styles(): CSSResultGroup { return css` .dropdown { - display: flex; + position: relative; + } + ha-help-tooltip { + position: absolute; + right: 40px; + top: 16px; + } + mwc-select, + ha-textfield { + width: 100%; + } + ha-textfield { + margin-top: 8px; } ha-service-control { --service-control-padding: 0; diff --git a/src/panels/lovelace/components/hui-entity-editor.ts b/src/panels/lovelace/components/hui-entity-editor.ts index ff81d8ec67..f08bc02f05 100644 --- a/src/panels/lovelace/components/hui-entity-editor.ts +++ b/src/panels/lovelace/components/hui-entity-editor.ts @@ -78,6 +78,7 @@ export class HuiEntityEditor extends LitElement { )}
@@ -170,7 +171,7 @@ export class HuiEntityEditor extends LitElement { const index = (ev.target as any).index; const newConfigEntities = this.entities!.concat(); - if (value === "") { + if (value === "" || value === undefined) { newConfigEntities.splice(index, 1); } else { newConfigEntities[index] = { @@ -186,6 +187,13 @@ export class HuiEntityEditor extends LitElement { return [ sortableStyles, css` + ha-entity-picker { + margin-top: 8px; + } + .add-entity { + display: block; + margin-left: 31px; + } .entity { display: flex; align-items: center; diff --git a/src/panels/lovelace/components/hui-theme-select-editor.ts b/src/panels/lovelace/components/hui-theme-select-editor.ts index f20b6dd033..60a3746e8c 100644 --- a/src/panels/lovelace/components/hui-theme-select-editor.ts +++ b/src/panels/lovelace/components/hui-theme-select-editor.ts @@ -1,11 +1,11 @@ import "@material/mwc-button"; -import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; -import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../common/dom/fire_event"; import { HomeAssistant } from "../../../types"; +import "@material/mwc-select/mwc-select"; +import "@material/mwc-list/mwc-list-item"; +import { stopPropagation } from "../../../common/dom/stop_propagation"; @customElement("hui-theme-select-editor") export class HuiThemeSelectEditor extends LitElement { @@ -17,53 +17,47 @@ export class HuiThemeSelectEditor extends LitElement { protected render(): TemplateResult { return html` - - ${this.hass!.localize( + "ui.panel.lovelace.editor.card.generic.no_theme" + )} - ${this.hass!.localize( - "ui.panel.lovelace.editor.card.generic.no_theme" - )} - ${Object.keys(this.hass!.themes.themes) - .sort() - .map( - (theme) => - html` ${theme} ` - )} - - + ${Object.keys(this.hass!.themes.themes) + .sort() + .map( + (theme) => + html` ${theme} ` + )} + `; } static get styles(): CSSResultGroup { return css` - paper-dropdown-menu { + mwc-select { width: 100%; } - paper-item { - cursor: pointer; - } `; } private _changed(ev): void { - if (!this.hass || ev.target.selected === "") { + if (!this.hass || ev.target.value === "") { return; } - this.value = ev.target.selected === "remove" ? "" : ev.target.selected; + this.value = ev.target.value === "remove" ? "" : ev.target.selected; fireEvent(this, "value-changed", { value: this.value }); } } diff --git a/src/panels/lovelace/editor/config-elements/config-elements-style.ts b/src/panels/lovelace/editor/config-elements/config-elements-style.ts index 0e61bc76fd..dead5f483c 100644 --- a/src/panels/lovelace/editor/config-elements/config-elements-style.ts +++ b/src/panels/lovelace/editor/config-elements/config-elements-style.ts @@ -19,4 +19,11 @@ export const configElementStyle = css` .suffix { margin: 0 8px; } + hui-theme-select-editor, + hui-action-editor, + mwc-select, + ha-textfield, + ha-icon-picker { + margin-top: 8px; + } `; diff --git a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts index 46ff0b41a6..0869bb9264 100644 --- a/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts @@ -1,7 +1,6 @@ import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; import "@polymer/paper-input/paper-input"; import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, state } from "lit/decorators"; import { diff --git a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts index 76b7032a8f..efe181ea57 100644 --- a/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts +++ b/src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts @@ -1,6 +1,5 @@ import { mdiClose, mdiPencil, mdiPlus } from "@mdi/js"; import "@polymer/paper-item/paper-item"; -import "@polymer/paper-listbox/paper-listbox"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property } from "lit/decorators"; import { fireEvent } from "../../../../common/dom/fire_event"; diff --git a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts index e9e8f5d92c..23ff1df094 100644 --- a/src/panels/lovelace/editor/hui-entities-card-row-editor.ts +++ b/src/panels/lovelace/editor/hui-entities-card-row-editor.ts @@ -126,6 +126,7 @@ export class HuiEntitiesCardRowEditor extends LitElement { )}
@@ -226,7 +227,7 @@ export class HuiEntitiesCardRowEditor extends LitElement { const index = (ev.target as any).index; const newConfigEntities = this.entities!.concat(); - if (value === "") { + if (value === "" || value === undefined) { newConfigEntities.splice(index, 1); } else { newConfigEntities[index] = { @@ -253,6 +254,14 @@ export class HuiEntitiesCardRowEditor extends LitElement { return [ sortableStyles, css` + ha-entity-picker { + margin-top: 8px; + } + .add-entity { + display: block; + margin-left: 31px; + margin-right: 71px; + } .entity { display: flex; align-items: center;