github
/
ha-frontend
mirror of https://github.com/home-assistant/frontend
1
Fork 0
Code Releases Activity

Bunch of fixes and cleanup (#11636)

This commit is contained in:
Bram Kragten 2022-02-10 15:24:47 +01:00 committed by GitHub
parent fd80408de2
commit 0eeed85193
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 163 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
hassio/src/system/hassio-core-info.ts
View File

@ -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);
}

10
hassio/src/system/hassio-host-info.ts
View File

@ -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);
}

8
src/components/entity/ha-entities-picker.ts
View File

@ -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 {

2
src/components/entity/ha-statistics-picker.ts
View File

@ -111,7 +111,9 @@ class HaStatisticsPicker extends LitElement {
display: block;
}
ha-statistic-picker {
display: block;
width: 100%;
margin-top: 8px;
}
`;
}

4
src/components/ha-check-list-item.ts
View File

@ -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);

2
src/components/ha-selector/ha-selector.ts
View File

@ -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() {

5
src/components/ha-service-control.ts
View File

@ -67,7 +67,7 @@ export class HaServiceControl extends LitElement {
@query("ha-yaml-editor") private _yamlEditor?: HaYamlEditor;
protected updated(changedProperties: PropertyValues<this>) {
protected willUpdate(changedProperties: PropertyValues<this>) {
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;
}

2
src/components/ha-service-picker.ts
View File

@ -10,7 +10,7 @@ import "./ha-combo-box";
const rowRenderer: ComboBoxLitRenderer<{ service: string; name: string }> = (
item
) => html` <mwc-list-item twoline>
) => html`<mwc-list-item twoline>
<span>${item.name}</span>
<span slot="secondary"
>${item.name === item.service ? "" : item.service}</span

1
src/components/media-player/ha-media-player-browse.ts
View File

@ -3,7 +3,6 @@ import "@material/mwc-list/mwc-list";
import "@material/mwc-list/mwc-list-item";
import { mdiPlay, mdiPlus } from "@mdi/js";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-listbox/paper-listbox";
import "@polymer/paper-tooltip/paper-tooltip";
import {
css,

9
src/panels/config/automation/action/ha-automation-action-row.ts
View File

@ -342,12 +342,14 @@ export default class HaAutomationActionRow extends LitElement {
haStyle,
css`
.card-menu {
float: right;
position: absolute;
right: 16px;
z-index: 3;
--mdc-theme-text-primary-on-background: var(--primary-text-color);
}
.rtl .card-menu {
float: left;
right: initial;
left: 16px;
}
mwc-list-item[disabled] {
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
@ -358,6 +360,9 @@ export default class HaAutomationActionRow extends LitElement {
.warning ul {
margin: 4px 0;
}
mwc-select {
margin-bottom: 16px;
}
`,
];
}

1
src/panels/config/automation/action/types/ha-automation-action-choose.ts
View File

@ -1,6 +1,5 @@
import { mdiDelete } from "@mdi/js";
import "@polymer/paper-input/paper-input";
import "@polymer/paper-listbox/paper-listbox";
import { css, CSSResultGroup, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../../../common/dom/fire_event";

9
src/panels/config/automation/action/types/ha-automation-action-device_id.ts
View File

@ -1,4 +1,4 @@
import { html, LitElement } from "lit";
import { css, html, LitElement } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one";
import { fireEvent } from "../../../../../common/dom/fire_event";
@ -140,6 +140,13 @@ export class HaDeviceAction extends LitElement {
`ui.panel.config.automation.editor.actions.type.device_id.extra_fields.${schema.name}`
) || schema.name;
}
static styles = css`
ha-device-action-picker {
display: block;
margin-top: 8px;
}
`;
}
declare global {

15
src/panels/config/automation/condition/ha-automation-condition-editor.ts
View File

@ -1,7 +1,7 @@
import { CSSResultGroup, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import "@material/mwc-select";
import type { Select } from "@material/mwc-select";
import { css, html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import memoizeOne from "memoize-one";
import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
import { fireEvent } from "../../../../common/dom/fire_event";
@ -143,9 +143,14 @@ export default class HaAutomationConditionEditor extends LitElement {
fireEvent(this, "value-changed", { value: ev.detail.value, yaml: true });
}
static get styles(): CSSResultGroup {
return haStyle;
}
static styles = [
haStyle,
css`
mwc-select {
margin-bottom: 16px;
}
`,
];
}
declare global {

3
src/panels/config/automation/trigger/ha-automation-trigger-row.ts
View File

@ -332,6 +332,9 @@ export default class HaAutomationTriggerRow extends LitElement {
mwc-list-item[disabled] {
--mdc-theme-text-primary-on-background: var(--disabled-text-color);
}
mwc-select {
margin-bottom: 16px;
}
`,
];
}

1
src/panels/config/integrations/integration-panels/zha/zha-device-card.ts
View File

@ -1,5 +1,4 @@
import "@polymer/paper-input/paper-input";
import "@polymer/paper-listbox/paper-listbox";
import { UnsubscribeFunc } from "home-assistant-js-websocket";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import memoizeOne from "memoize-one";

1
src/panels/config/integrations/integration-panels/zha/zha-device-pairing-status-card.ts
View File

@ -1,5 +1,4 @@
import "@polymer/paper-input/paper-input";
import "@polymer/paper-listbox/paper-listbox";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";

1
src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts
View File

@ -1,7 +1,6 @@
import { mdiPlus } from "@mdi/js";
import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-listbox/paper-listbox";
import { html, LitElement, PropertyValues, TemplateResult } from "lit";
import { customElement, property, state } from "lit/decorators";
import memoize from "memoize-one";

6
src/panels/config/scene/ha-scene-editor.ts
View File

@ -984,6 +984,12 @@ export class HaSceneEditor extends SubscribeMixin(
ha-fab.saving {
opacity: var(--light-disabled-opacity);
}
ha-icon-picker,
ha-area-picker,
ha-entity-picker {
display: block;
margin-top: 8px;
}
`,
];
}

1
src/panels/config/users/dialog-user-detail.ts
View File

@ -93,6 +93,7 @@ class DialogUserDetail extends LitElement {
`}
<div class="form">
<paper-input
dialogInitialFocus
.value=${this._name}
.disabled=${user.system_generated}
@value-changed=${this._nameChanged}

35
src/panels/developer-tools/service/developer-tools-service.ts
View File

@ -92,28 +92,31 @@ class HaPanelDevService extends LitElement {
"ui.panel.developer-tools.tabs.services.description"
)}
</p>
${this._yamlMode
? html`<ha-service-picker
.hass=${this.hass}
.value=${this._serviceData?.service}
@value-changed=${this._serviceChanged}
></ha-service-picker>
<ha-yaml-editor
.hass=${this.hass}
.defaultValue=${this._serviceData}
@value-changed=${this._yamlChanged}
></ha-yaml-editor>`
: html`<ha-card
><div>
<ha-card>
${this._yamlMode
? html`<div class="card-content">
<ha-service-picker
.hass=${this.hass}
.value=${this._serviceData?.service}
@value-changed=${this._serviceChanged}
></ha-service-picker>
<ha-yaml-editor
.hass=${this.hass}
.defaultValue=${this._serviceData}
@value-changed=${this._yamlChanged}
></ha-yaml-editor>
</div>`
: html`
<ha-service-control
.hass=${this.hass}
.value=${this._serviceData}
.narrow=${this.narrow}
showAdvanced
@value-changed=${this._serviceDataChanged}
></ha-service-control></div
></ha-card>`}
class="card-content"
></ha-service-control>
`}
</ha-card>
</div>
<div class="button-row">
<div class="buttons">

91
src/panels/lovelace/components/hui-action-editor.ts
View File

@ -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`
<div class="dropdown">
<paper-dropdown-menu
<mwc-select
.label=${this.label}
.configValue=${"action"}
@iron-select=${this._actionPicked}
@selected=${this._actionPicked}
.value=${this.config?.action ?? "default"}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidt
>
<paper-listbox
slot="dropdown-content"
attr-for-selected="value"
.selected=${this.config?.action ?? "default"}
>
<paper-item .value=${"default"}
>${this.hass!.localize(
"ui.panel.lovelace.editor.action-editor.actions.default_action"
)}</paper-item
>
${this.actions.map(
(action) => html`
<paper-item .value=${action}
>${this.hass!.localize(
`ui.panel.lovelace.editor.action-editor.actions.${action}`
)}</paper-item
>
`
<mwc-list-item value="default">
${this.hass!.localize(
"ui.panel.lovelace.editor.action-editor.actions.default_action"
)}
</paper-listbox>
</paper-dropdown-menu>
</mwc-list-item>
${this.actions.map(
(action) => html`
<mwc-list-item .value=${action}>
${this.hass!.localize(
`ui.panel.lovelace.editor.action-editor.actions.${action}`
)}
</mwc-list-item>
`
)}
</mwc-select>
${this.tooltipText
? html`
<ha-help-tooltip .label=${this.tooltipText}></ha-help-tooltip>
@ -96,26 +89,26 @@ export class HuiActionEditor extends LitElement {
</div>
${this.config?.action === "navigate"
? html`
<paper-input
<ha-textfield
label=${this.hass!.localize(
"ui.panel.lovelace.editor.action-editor.navigation_path"
)}
.value=${this._navigation_path}
.configValue=${"navigation_path"}
@value-changed=${this._valueChanged}
></paper-input>
@input=${this._valueChanged}
></ha-textfield>
`
: ""}
${this.config?.action === "url"
? html`
<paper-input
label=${this.hass!.localize(
<ha-textfield
.label=${this.hass!.localize(
"ui.panel.lovelace.editor.action-editor.url_path"
)}
.value=${this._url_path}
.configValue=${"url_path"}
@value-changed=${this._valueChanged}
></paper-input>
@input=${this._valueChanged}
></ha-textfield>
`
: ""}
${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;

10
src/panels/lovelace/components/hui-entity-editor.ts
View File

@ -78,6 +78,7 @@ export class HuiEntityEditor extends LitElement {
)}
</div>
<ha-entity-picker
class="add-entity"
.hass=${this.hass}
@value-changed=${this._addEntity}
></ha-entity-picker>
@ -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;

52
src/panels/lovelace/components/hui-theme-select-editor.ts
View File

@ -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`
<paper-dropdown-menu
<mwc-select
.label=${this.label ||
`${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`}
dynamic-align
.value=${this.value}
@selected=${this._changed}
@closed=${stopPropagation}
fixedMenuPosition
naturalMenuWidt
>
<paper-listbox
slot="dropdown-content"
.selected=${this.value}
attr-for-selected="theme"
@iron-select=${this._changed}
<mwc-list-item value="remove"
>${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.no_theme"
)}</mwc-list-item
>
<paper-item theme="remove"
>${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.no_theme"
)}</paper-item
>
${Object.keys(this.hass!.themes.themes)
.sort()
.map(
(theme) =>
html` <paper-item theme=${theme}>${theme}</paper-item> `
)}
</paper-listbox>
</paper-dropdown-menu>
${Object.keys(this.hass!.themes.themes)
.sort()
.map(
(theme) =>
html` <mwc-list-item .value=${theme}>${theme}</mwc-list-item> `
)}
</mwc-select>
`;
}
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 });
}
}

7
src/panels/lovelace/editor/config-elements/config-elements-style.ts
View File

@ -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;
}
`;

1
src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
View File

@ -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 {

1
src/panels/lovelace/editor/header-footer-editor/hui-header-footer-editor.ts
View File

@ -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";

11
src/panels/lovelace/editor/hui-entities-card-row-editor.ts
View File

@ -126,6 +126,7 @@ export class HuiEntitiesCardRowEditor extends LitElement {
)}
</div>
<ha-entity-picker
class="add-entity"
.hass=${this.hass}
@value-changed=${this._addEntity}
></ha-entity-picker>
@ -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;