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

more-info icon for light-card (#2600)

Browse Source 
* more-info icon for light-card

* soften icon
This commit is contained in:
Ian Richardson 2019-01-30 12:02:12 -06:00 committed by Paulus Schoutsen
parent bc87e05e2d
commit a0f0d49f45
1 changed files with 20 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/panels/lovelace/cards/hui-light-card.ts
View File

@ -11,7 +11,6 @@ import { styleMap } from "lit-html/directives/style-map";
import { HomeAssistant, LightEntity } from "../../../types"; import { HomeAssistant, LightEntity } from "../../../types";
import { LovelaceCard, LovelaceCardEditor } from "../types"; import { LovelaceCard, LovelaceCardEditor } from "../types";
import { LovelaceCardConfig } from "../../../data/lovelace"; import { LovelaceCardConfig } from "../../../data/lovelace";
import { longPress } from "../common/directives/long-press-directive";
import { hasConfigOrEntityChanged } from "../common/has-changed"; import { hasConfigOrEntityChanged } from "../common/has-changed";
import { loadRoundslider } from "../../../resources/jquery.roundslider.ondemand"; import { loadRoundslider } from "../../../resources/jquery.roundslider.ondemand";
import { toggleEntity } from "../common/entity/toggle-entity"; import { toggleEntity } from "../common/entity/toggle-entity";
@ -97,26 +96,25 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
</div> </div>
` `
: html` : html`
<ha-icon
icon="hass:dots-vertical"
class="more-info"
@click="${this._handleMoreInfo}"
></ha-icon>
<div id="light"></div> <div id="light"></div>
<div id="tooltip"> <div id="tooltip">
<div class="icon-state"> <div class="icon-state">
<ha-icon <ha-icon
class="light-icon"
data-state="${stateObj.state}" data-state="${stateObj.state}"
.icon="${stateIcon(stateObj)}" .icon="${stateIcon(stateObj)}"
style="${styleMap({ style="${styleMap({
filter: this._computeBrightness(stateObj), filter: this._computeBrightness(stateObj),
color: this._computeColor(stateObj), color: this._computeColor(stateObj),
})}" })}"
@ha-click="${this._handleTap}" @click="${this._handleTap}"
@ha-hold="${this._handleHold}"
.longPress="${longPress()}"
></ha-icon> ></ha-icon>
<div <div class="brightness" @ha-click="${this._handleTap}"></div>
class="brightness"
@ha-click="${this._handleTap}"
@ha-hold="${this._handleHold}"
.longPress="${longPress()}"
></div>
<div class="name"> <div class="name">
${this._config.name || computeStateName(stateObj)} ${this._config.name || computeStateName(stateObj)}
</div> </div>
@ -247,17 +245,17 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
#light .rs-overlay.rs-transition.rs-bg-color { #light .rs-overlay.rs-transition.rs-bg-color {
background-color: var(--paper-card-background-color, white); background-color: var(--paper-card-background-color, white);
} }
ha-icon { .light-icon {
margin: auto; margin: auto;
width: 76px; width: 76px;
height: 76px; height: 76px;
color: var(--paper-item-icon-color, #44739e); color: var(--paper-item-icon-color, #44739e);
cursor: pointer; cursor: pointer;
} }
ha-icon[data-state="on"] { .light-icon[data-state="on"] {
color: var(--paper-item-icon-active-color, #fdd835); color: var(--paper-item-icon-active-color, #fdd835);
} }
ha-icon[data-state="unavailable"] { .light-icon[data-state="unavailable"] {
color: var(--state-icon-unavailable-color); color: var(--state-icon-unavailable-color);
} }
.name { .name {
@ -287,6 +285,14 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
background-color: yellow; background-color: yellow;
padding: 8px; padding: 8px;
} }
.more-info {
float: right;
cursor: pointer;
padding-top: 16px;
padding-right: 16px;
z-index: 25;
color: var(--secondary-text-color);
}
</style> </style>
`; `;
} }
@ -340,7 +346,7 @@ export class HuiLightCard extends LitElement implements LovelaceCard {
toggleEntity(this.hass!, this._config!.entity!); toggleEntity(this.hass!, this._config!.entity!);
} }
private _handleHold() { private _handleMoreInfo() {
fireEvent(this, "hass-more-info", { fireEvent(this, "hass-more-info", {
entityId: this._config!.entity, entityId: this._config!.entity,
}); });