jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-05 23:47:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add colors

Browse Source
This commit is contained in:
Paul Bottein 2022-12-01 14:19:53 +01:00
parent aab4ed8cc3
commit 3f579e5e95
No known key found for this signature in database
1 changed files with 11 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/dialogs/more-info/more-info-related-info.ts
View File

@ -1,9 +1,11 @@
import { HassEntity } from "home-assistant-js-websocket"; import { HassEntity } from "home-assistant-js-websocket";
import { css, html, LitElement, TemplateResult } from "lit"; import { css, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators"; import { customElement, property } from "lit/decorators";
import { styleMap } from "lit/directives/style-map";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { fireEvent } from "../../common/dom/fire_event"; import { fireEvent } from "../../common/dom/fire_event";
import { computeStateDisplay } from "../../common/entity/compute_state_display"; import { computeStateDisplay } from "../../common/entity/compute_state_display";
import { stateColor } from "../../common/entity/state_color";
import { stateIconPath } from "../../common/entity/state_icon_path"; import { stateIconPath } from "../../common/entity/state_icon_path";
import "../../components/ha-chip"; import "../../components/ha-chip";
import "../../components/ha-chip-set"; import "../../components/ha-chip-set";
@ -60,6 +62,7 @@ class MoreInfoContent extends LitElement {
entity, entity,
this.hass!.locale this.hass!.locale
); );
const color = stateColor(entity);
return html` return html`
<button <button
@ -67,6 +70,11 @@ class MoreInfoContent extends LitElement {
class="chip" class="chip"
@click=${this._handleChipClick} @click=${this._handleChipClick}
.entityId=${entry.entity_id} .entityId=${entry.entity_id}
style=${styleMap({
"--icon-color": color
? `rgb(var(--rgb-state-${color}-color))`
: undefined,
})}
> >
${icon ${icon
? html`<ha-icon slot="icon" icon=${icon}></ha-icon>` ? html`<ha-icon slot="icon" icon=${icon}></ha-icon>`
@ -104,12 +112,14 @@ class MoreInfoContent extends LitElement {
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
--icon-color: rgb(var(--rgb-state-default-color));
} }
.chip ha-icon, .chip ha-icon,
.chip ha-svg-icon { .chip ha-svg-icon {
color: var(--icon-color);
pointer-events: none; pointer-events: none;
--mdc-icon-size: 18px; --mdc-icon-size: 18px;
color: rgb(var(--rgb-primary-color)); color: var(--icon-color);
} }
`; `;
} }