jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-02 14:07:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Highlight entities card rows

Browse Source
This commit is contained in:
Thomas Lovén 2022-05-31 11:16:02 +00:00
parent 5bc2fd059c
commit b22c51bc2c
2 changed files with 35 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/panels/lovelace/cards/hui-entities-card.ts
View File

@ -6,7 +6,8 @@ import {
PropertyValues, PropertyValues,
TemplateResult, TemplateResult,
} from "lit"; } from "lit";
import { customElement, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import { classMap } from "lit/directives/class-map";
import { DOMAINS_TOGGLE } from "../../../common/const"; import { DOMAINS_TOGGLE } from "../../../common/const";
import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element"; import { applyThemesOnElement } from "../../../common/dom/apply_themes_on_element";
import { computeDomain } from "../../../common/entity/compute_domain"; import { computeDomain } from "../../../common/entity/compute_domain";
@ -54,6 +55,8 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
return { type: "entities", entities: foundEntities }; return { type: "entities", entities: foundEntities };
} }
@property() public editMode?: boolean | any;
@state() private _config?: EntitiesCardConfig; @state() private _config?: EntitiesCardConfig;
private _hass?: HomeAssistant; private _hass?: HomeAssistant;
@ -217,9 +220,15 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
`} `}
</h1> </h1>
`} `}
<div id="states" class="card-content"> <div
${this._configEntities!.map((entityConf) => id="states"
this.renderEntity(entityConf) class=${classMap({
"card-content": true,
highlight: this.editMode?.selectedRow !== undefined,
})}
>
${this._configEntities!.map((entityConf, idx) =>
this.renderEntity(entityConf, idx)
)} )}
</div> </div>
@ -272,6 +281,12 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
#states > div { #states > div {
position: relative; position: relative;
} }
#states.highlight > div.selected {
opacity: 1;
}
#states.highlight > div {
opacity: 0.5;
}
.icon { .icon {
padding: 0px 18px 0px 8px; padding: 0px 18px 0px 8px;
@ -293,7 +308,10 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
`; `;
} }
private renderEntity(entityConf: LovelaceRowConfig): TemplateResult { private renderEntity(
entityConf: LovelaceRowConfig,
idx: number
): TemplateResult {
const element = createRowElement( const element = createRowElement(
(!("type" in entityConf) || entityConf.type === "conditional") && (!("type" in entityConf) || entityConf.type === "conditional") &&
this._config!.state_color this._config!.state_color
@ -307,7 +325,13 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
element.hass = this._hass; element.hass = this._hass;
} }
return html`<div>${element}</div>`; return html`<div
class=${classMap({
selected: this.editMode?.selectedRow === idx,
})}
>
${element}
</div>`;
} }
} }

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

@ -408,10 +408,15 @@ export class HuiEntitiesCardEditor
private _editDetailElement(ev: HASSDomEvent<EditSubElementEvent>): void { private _editDetailElement(ev: HASSDomEvent<EditSubElementEvent>): void {
this._subElementEditorConfig = ev.detail.subElementConfig; this._subElementEditorConfig = ev.detail.subElementConfig;
fireEvent(this, "edit-mode-changed", {
selectedRow: ev.detail.subElementConfig?.index,
});
} }
private _goBack(): void { private _goBack(): void {
this._subElementEditorConfig = undefined; this._subElementEditorConfig = undefined;
fireEvent(this, "edit-mode-changed", true);
} }
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {