From a0f0d49f4535ae650b2ff7474a1116caa0632515 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Wed, 30 Jan 2019 12:02:12 -0600
Subject: [PATCH] more-info icon for light-card (#2600)

* more-info icon for light-card

* soften icon
---
 src/panels/lovelace/cards/hui-light-card.ts | 34 ++++++++++++---------
 1 file changed, 20 insertions(+), 14 deletions(-)

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