From 34f2d404b846c63c968a7cb2f4df6fab1ef810ed Mon Sep 17 00:00:00 2001 From: Paul Bottein Date: Thu, 1 Dec 2022 17:25:18 +0100 Subject: [PATCH] rename file --- src/components/ha-chip.ts | 16 +++++- ...ha-more-info-device-entities-shortcuts.ts} | 50 +++++++++---------- src/dialogs/more-info/ha-more-info-dialog.ts | 4 +- src/dialogs/more-info/ha-more-info-info.ts | 6 +-- 4 files changed, 45 insertions(+), 31 deletions(-) rename src/dialogs/more-info/{more-info-related-info.ts => ha-more-info-device-entities-shortcuts.ts} (81%) diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts index d9fa23971f..a310b3b02e 100644 --- a/src/components/ha-chip.ts +++ b/src/components/ha-chip.ts @@ -9,6 +9,7 @@ import { unsafeCSS, } from "lit"; import { customElement, property } from "lit/decorators"; +import { classMap } from "lit/directives/class-map"; @customElement("ha-chip") export class HaChip extends LitElement { @@ -18,9 +19,17 @@ export class HaChip extends LitElement { @property({ type: Boolean }) public noText = false; + @property({ type: Boolean }) public outline = false; + protected render(): TemplateResult { return html` -
+
${this.hasIcon ? html`
@@ -81,6 +90,11 @@ export class HaChip extends LitElement { :host { outline: none; } + + .mdc-chip.outline { + background: none; + border: 1px solid rgba(var(--rgb-primary-text-color), 0.5); + } `; } } diff --git a/src/dialogs/more-info/more-info-related-info.ts b/src/dialogs/more-info/ha-more-info-device-entities-shortcuts.ts similarity index 81% rename from src/dialogs/more-info/more-info-related-info.ts rename to src/dialogs/more-info/ha-more-info-device-entities-shortcuts.ts index 48b5f6362c..b15d44408d 100644 --- a/src/dialogs/more-info/more-info-related-info.ts +++ b/src/dialogs/more-info/ha-more-info-device-entities-shortcuts.ts @@ -11,16 +11,17 @@ import { stateIconPath } from "../../common/entity/state_icon_path"; import "../../components/ha-chip"; import "../../components/ha-chip-set"; import "../../components/ha-icon"; +import "../../components/ha-svg-icon"; import { HomeAssistant } from "../../types"; declare global { interface HASSDomEvents { - "related-entity": { entityId: string }; + "shortcut-clicked": { entityId: string }; } } -@customElement("more-info-related-info") -class MoreInfoContent extends LitElement { +@customElement("ha-more-info-device-entities-shortcuts") +class MoreInfoDevicesEntitiesShortcuts extends LitElement { @property({ attribute: false }) public hass?: HomeAssistant; @property({ attribute: false }) public stateObj?: HassEntity; @@ -37,9 +38,15 @@ class MoreInfoContent extends LitElement { ); }); - private _handleChipClick(ev: Event) { + private _handleChipClick(ev) { + if (ev.defaultPrevented) { + return; + } + if (ev.type === "keydown" && ev.key !== "Enter" && ev.key !== " ") { + return; + } const entityId = (ev.target as any).entityId as string; - fireEvent(this, "related-entity", { entityId }); + fireEvent(this, "shortcut-clicked", { entityId }); } protected render(): TemplateResult | null { @@ -72,6 +79,7 @@ class MoreInfoContent extends LitElement { const icon = stateObj.attributes.icon; const iconPath = stateIconPath(stateObj); + const state = computeStateDisplay( this.hass!.localize, stateObj, @@ -82,7 +90,7 @@ class MoreInfoContent extends LitElement { const active = stateActive(stateObj); const iconStyle = styleMap({ - "--icon-color": + "--ha-chip-icon-color": color && active ? `rgb(var(--rgb-state-${color}-color))` : undefined, @@ -91,14 +99,17 @@ class MoreInfoContent extends LitElement { const name = stateObj.attributes.friendly_name ?? ""; return html` - + `; })}
@@ -126,24 +137,13 @@ class MoreInfoContent extends LitElement { .container > * { margin: 4px; } - .chip { - border: 1px solid var(--secondary-text-color); - border-radius: 8px; + ha-chip { cursor: pointer; - background: none; - color: var(--primary-text-color); - padding: 6px 16px 6px 8px; - font-weight: 500; - font-size: 14px; - line-height: 20px; - --icon-color: rgb(var(--rgb-state-default-color)); + --ha-chip-icon-color: rgb(var(--rgb-state-default-color)); } - .chip ha-icon, - .chip ha-svg-icon { - color: var(--icon-color); + ha-chip ha-icon, + ha-chip ha-svg-icon { pointer-events: none; - --mdc-icon-size: 18px; - color: var(--icon-color); } `; } @@ -151,6 +151,6 @@ class MoreInfoContent extends LitElement { declare global { interface HTMLElementTagNameMap { - "more-info-related-info": MoreInfoContent; + "ha-more-info-device-entities-shortcuts": MoreInfoDevicesEntitiesShortcuts; } } diff --git a/src/dialogs/more-info/ha-more-info-dialog.ts b/src/dialogs/more-info/ha-more-info-dialog.ts index fcd317f207..6046d4be05 100644 --- a/src/dialogs/more-info/ha-more-info-dialog.ts +++ b/src/dialogs/more-info/ha-more-info-dialog.ts @@ -62,7 +62,7 @@ export class MoreInfoDialog extends LitElement { fireEvent(this, "dialog-closed", { dialog: this.localName }); } - private _relatedEntityClicked(ev: CustomEvent) { + private _entityShortcutClicked(ev: CustomEvent) { ev.stopPropagation(); this._entityId = ev.detail.entityId; } @@ -165,7 +165,7 @@ export class MoreInfoDialog extends LitElement { ` : this._currTab === "history" diff --git a/src/dialogs/more-info/ha-more-info-info.ts b/src/dialogs/more-info/ha-more-info-info.ts index 0c2e248019..7cf73f1536 100644 --- a/src/dialogs/more-info/ha-more-info-info.ts +++ b/src/dialogs/more-info/ha-more-info-info.ts @@ -13,9 +13,9 @@ import { DOMAINS_NO_INFO, DOMAINS_WITH_MORE_INFO, } from "./const"; +import "./ha-more-info-device-entities-shortcuts"; import "./ha-more-info-history"; import "./ha-more-info-logbook"; -import "./more-info-related-info"; @customElement("ha-more-info-info") export class MoreInfoInfo extends LitElement { @@ -71,10 +71,10 @@ export class MoreInfoInfo extends LitElement { .hass=${this.hass} .entityId=${this.entityId} >`} - + > `;