From f97b5c48d0581096337d1d919c087a3a5edc7950 Mon Sep 17 00:00:00 2001
From: Ian Richardson <iantrich@gmail.com>
Date: Wed, 30 Jan 2019 13:35:41 -0600
Subject: [PATCH] more-info for thermostat-card (#2598)

* more-info for thermostat-card

* soften icon
---
 .../lovelace/cards/hui-thermostat-card.ts     | 20 +++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/panels/lovelace/cards/hui-thermostat-card.ts b/src/panels/lovelace/cards/hui-thermostat-card.ts
index 8509d175c9..4813e8b642 100644
--- a/src/panels/lovelace/cards/hui-thermostat-card.ts
+++ b/src/panels/lovelace/cards/hui-thermostat-card.ts
@@ -19,6 +19,7 @@ import { LovelaceCard, LovelaceCardEditor } from "../types";
 import { LovelaceCardConfig } from "../../../data/lovelace";
 import { loadRoundslider } from "../../../resources/jquery.roundslider.ondemand";
 import { UNIT_F } from "../../../common/const";
+import { fireEvent } from "../../../common/dom/fire_event";
 
 const thermostatConfig = {
   radius: 150,
@@ -122,6 +123,11 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
           small: !this._broadCard,
         })}">
         <div id="root">
+          <ha-icon
+            icon="hass:dots-vertical"
+            class="more-info"
+            @click="${this._handleMoreInfo}"
+          ></ha-icon>
           <div id="thermostat"></div>
           <div id="tooltip">
             <div class="title">${this._config.name ||
@@ -328,6 +334,12 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
     `;
   }
 
+  private _handleMoreInfo() {
+    fireEvent(this, "hass-more-info", {
+      entityId: this._config!.entity,
+    });
+  }
+
   private _handleModeClick(e: MouseEvent): void {
     this.hass!.callService("climate", "set_operation_mode", {
       entity_id: this._config!.entity,
@@ -535,6 +547,14 @@ export class HuiThermostatCard extends LitElement implements LovelaceCard {
           vertical-align: top;
           margin-left: var(--uom-margin-left);
         }
+        .more-info {
+          float: right;
+          cursor: pointer;
+          padding-top: 16px;
+          padding-right: 16px;
+          z-index: 25;
+          color: var(--secondary-text-color);
+        }
       </style>
     `;
   }