Hide entity pickers when in entity-filter

This commit is contained in:
Thomas Lovén 2022-01-25 23:43:08 +00:00
parent 94b561301f
commit 8a9a93ef20
7 changed files with 37 additions and 18 deletions

View File

@ -1,5 +1,5 @@
import type { HassEntity } from "home-assistant-js-websocket"; import type { HassEntity } from "home-assistant-js-websocket";
import { html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { isValidEntityId } from "../../common/entity/valid_entity_id"; import { isValidEntityId } from "../../common/entity/valid_entity_id";
@ -51,6 +51,8 @@ class HaEntitiesPickerLight extends LitElement {
@property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string; @property({ attribute: "pick-entity-label" }) public pickEntityLabel?: string;
@property() public label?: string;
protected render(): TemplateResult { protected render(): TemplateResult {
if (!this.hass) { if (!this.hass) {
return html``; return html``;
@ -58,6 +60,7 @@ class HaEntitiesPickerLight extends LitElement {
const currentEntities = this._currentEntities; const currentEntities = this._currentEntities;
return html` return html`
<h3>${this.label}</h3>
${currentEntities.map( ${currentEntities.map(
(entityId) => html` (entityId) => html`
<div> <div>
@ -145,6 +148,14 @@ class HaEntitiesPickerLight extends LitElement {
this._updateEntities([...currentEntities, toAdd]); this._updateEntities([...currentEntities, toAdd]);
} }
static get styles(): CSSResultGroup {
return css`
:host {
display: var(--entity-picker-display);
}
`;
}
} }
declare global { declare global {

View File

@ -296,6 +296,10 @@ export class HaStatisticPicker extends LitElement {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
:host {
display: var(--entity-picker-display);
}
paper-input > ha-icon-button { paper-input > ha-icon-button {
--mdc-icon-button-size: 24px; --mdc-icon-button-size: 24px;
padding: 2px; padding: 2px;

View File

@ -186,6 +186,10 @@ export class HuiEntityEditor extends LitElement {
return [ return [
sortableStyles, sortableStyles,
css` css`
:host {
display: var(--entity-picker-display);
}
.entity { .entity {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -111,15 +111,12 @@ export class HuiCalendarCardEditor
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
></hui-theme-select-editor> ></hui-theme-select-editor>
</div> </div>
<h3>
${this.hass.localize(
"ui.panel.lovelace.editor.card.calendar.calendar_entities"
) +
" (" +
this.hass!.localize("ui.panel.lovelace.editor.card.config.required") +
")"}
</h3>
<ha-entities-picker <ha-entities-picker
.label=${`${this.hass.localize(
"ui.panel.lovelace.editor.card.calendar.calendar_entities"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.required"
)})`}
.hass=${this.hass!} .hass=${this.hass!}
.value=${this._configEntities} .value=${this._configEntities}
.includeDomains=${["calendar"]} .includeDomains=${["calendar"]}

View File

@ -351,7 +351,6 @@ export class HuiEntityFilterCardEditor
.states, .states,
.card { .card {
margin-top: 8px; margin-top: 8px;
border: 1px solid var(--divider-color);
padding: 12px; padding: 12px;
} }
@media (max-width: 450px) { @media (max-width: 450px) {
@ -361,6 +360,9 @@ export class HuiEntityFilterCardEditor
margin: 8px -12px 0; margin: 8px -12px 0;
} }
} }
.card {
--entity-picker-display: none;
}
.state { .state {
display: flex; display: flex;

View File

@ -76,8 +76,8 @@ export class HuiLogbookCardEditor
.label="${this.hass.localize( .label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.title" "ui.panel.lovelace.editor.card.generic.title"
)} (${this.hass.localize( )} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional" "ui.panel.lovelace.editor.card.config.optional"
)})" )})"
.value=${this._title} .value=${this._title}
.configValue=${"title"} .configValue=${"title"}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
@ -94,22 +94,19 @@ export class HuiLogbookCardEditor
.label="${this.hass.localize( .label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.hours_to_show" "ui.panel.lovelace.editor.card.generic.hours_to_show"
)} (${this.hass.localize( )} (${this.hass.localize(
"ui.panel.lovelace.editor.card.config.optional" "ui.panel.lovelace.editor.card.config.optional"
)})" )})"
.value=${this._hours_to_show} .value=${this._hours_to_show}
min="1" min="1"
.configValue=${"hours_to_show"} .configValue=${"hours_to_show"}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}
></paper-input> ></paper-input>
</div> </div>
<h3> .label=${`${this.hass!.localize(
${`${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.entities" "ui.panel.lovelace.editor.card.generic.entities"
)} (${this.hass!.localize( )} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.required" "ui.panel.lovelace.editor.card.config.required"
)})`} )})`}
</h3>
<ha-entities-picker
.hass=${this.hass} .hass=${this.hass}
.value=${this._configEntities} .value=${this._configEntities}
@value-changed=${this._valueChanged} @value-changed=${this._valueChanged}

View File

@ -253,6 +253,10 @@ export class HuiEntitiesCardRowEditor extends LitElement {
return [ return [
sortableStyles, sortableStyles,
css` css`
:host {
display: var(--entity-picker-display);
}
.entity { .entity {
display: flex; display: flex;
align-items: center; align-items: center;