Exp. UI: add support for more info dialog (#1294)

* Exp. UI: add support for more info dialog

* Sort items

* Rename HIDE_MORE_INFO to DOMAINS_HIDE_MORE_INFO

src/common/const.js

@@ -22,6 +22,36 @@ export const DOMAINS_WITH_CARD = [
   'weblink',
 ];
 
+/** Domains with separate more info dialog. */
+export const DOMAINS_WITH_MORE_INFO = [
+  'alarm_control_panel',
+  'automation',
+  'camera',
+  'climate',
+  'configurator',
+  'cover',
+  'fan',
+  'group',
+  'history_graph',
+  'input_datetime',
+  'light',
+  'lock',
+  'media_player',
+  'script',
+  'sun',
+  'updater',
+  'vacuum',
+  'weather'
+];
+
+/** Domains that show no more info dialog. */
+export const DOMAINS_HIDE_MORE_INFO = [
+  'input_number',
+  'input_select',
+  'input_text',
+  'scene'
+];
+
 /** Domains that should have the history hidden in the more info dialog. */
 export const DOMAINS_MORE_INFO_NO_HISTORY = [
   'camera',

src/common/entity/state_more_info_type.js

@@ -1,14 +1,5 @@
 import computeStateDomain from './compute_state_domain.js';
-
+import { DOMAINS_HIDE_MORE_INFO, DOMAINS_WITH_MORE_INFO } from '../const.js';
-const DOMAINS_WITH_MORE_INFO = [
-  'alarm_control_panel', 'automation', 'camera', 'climate', 'configurator',
-  'cover', 'fan', 'group', 'history_graph', 'light', 'lock', 'media_player', 'script',
-  'sun', 'updater', 'vacuum', 'input_datetime', 'weather'
-];
-
-const HIDE_MORE_INFO = [
-  'input_select', 'scene', 'input_number', 'input_text'
-];
 
 export default function stateMoreInfoType(stateObj) {
   const domain = computeStateDomain(stateObj);
@@ -16,7 +7,7 @@ export default function stateMoreInfoType(stateObj) {
   if (DOMAINS_WITH_MORE_INFO.includes(domain)) {
     return domain;
   }
-  if (HIDE_MORE_INFO.includes(domain)) {
+  if (DOMAINS_HIDE_MORE_INFO.includes(domain)) {
     return 'hidden';
   }
   return 'default';

src/panels/experimental-ui/hui-entities-card.js

@@ -3,13 +3,20 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
 import stateCardType from '../../common/entity/state_card_type.js';
+import computeDomain from '../../common/entity/compute_domain.js';
+import { DOMAINS_HIDE_MORE_INFO } from '../../common/const.js';
 
 import '../../components/ha-card.js';
 
 // just importing this now as shortcut to import correct state-card-*
 import '../../state-summary/state-card-content.js';
 
-class HuiEntitiesCard extends PolymerElement {
+import EventsMixin from '../../mixins/events-mixin.js';
+
+/*
+ * @appliesMixin EventsMixin
+ */
+class HuiEntitiesCard extends EventsMixin(PolymerElement) {
   static get template() {
     return html`
     <style>
@@ -30,6 +37,9 @@ class HuiEntitiesCard extends PolymerElement {
       .header .name {
         @apply --paper-font-common-nowrap;
       }
+      .state-card-dialog {
+        cursor: pointer;
+      }
     </style>
 
     <ha-card>
@@ -82,6 +92,10 @@ class HuiEntitiesCard extends PolymerElement {
       const stateObj = this.hass.states[entityId];
       const tag = stateObj ? `state-card-${stateCardType(this.hass, stateObj)}` : 'state-card-display';
       const element = document.createElement(tag);
+      if (!DOMAINS_HIDE_MORE_INFO.includes(computeDomain(entityId))) {
+        element.classList.add('state-card-dialog');
+        element.addEventListener('click', () => this.fire('hass-more-info', { entityId }));
+      }
       element.stateObj = stateObj;
       element.hass = this.hass;
       this._elements.push({ entityId, element });
@@ -98,4 +112,5 @@ class HuiEntitiesCard extends PolymerElement {
     }
   }
 }
+
 customElements.define('hui-entities-card', HuiEntitiesCard);