More info clean up

.eslintrc

@@ -11,6 +11,7 @@
     "func-names": 0,
     "prefer-arrow-callback": 0,
     "no-underscore-dangle": 0,
-    "no-var": 0
+    "no-var": 0,
+    "strict": 0
   }
 }

src/components/ha-labeled-slider.html

@@ -0,0 +1,60 @@
+<link rel='import' href='../../bower_components/polymer/polymer.html'>
+<link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>
+<link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
+
+<dom-module id='ha-labeled-slider'>
+  <style>
+    :host {
+      display: block;
+      padding-bottom: 16px;
+    }
+
+    .title {
+      margin-bottom: 16px;
+      opacity: var(--dark-primary-opacity);
+    }
+
+    iron-icon {
+      float: left;
+      margin-top: 4px;
+      opacity: var(--dark-secondary-opacity);
+    }
+
+    .slider-container {
+      margin-left: 24px;
+    }
+  </style>
+  <template>
+    <div class='title'>[[caption]]</div>
+    <iron-icon icon='[[icon]]'></iron-icon>
+    <div class='slider-container'>
+      <paper-slider min='[[min]]' max='[[max]]' value='{{value}}'>
+      </paper-slider>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+Polymer({
+  is: 'ha-labeled-slider',
+
+  properties: {
+    icon: {
+      type: String,
+    },
+
+    min: {
+      type: Number,
+    },
+
+    max: {
+      type: Number,
+    },
+
+    value: {
+      type: Number,
+      notify: true,
+    },
+  },
+});
+</script>

src/dialogs/more-info-dialog.js

@@ -66,6 +66,10 @@ export default new Polymer({
     },
   },
 
+  ready() {
+    this.$.scrollable.dialogElement = this.$.dialog;
+  },
+
   /**
    * We depend on a delayed dialogOpen value to tell the chart component
    * that the data is there. Otherwise the chart component will render

src/more-infos/more-info-alarm_control_panel.js

@@ -2,15 +2,7 @@ import Polymer from '../polymer';
 
 export default new Polymer({
   is: 'more-info-alarm_control_panel',
-  handleDisarmTap() {
-    this.callService('alarm_disarm', { code: this.enteredCode });
-  },
-  handleHomeTap() {
-    this.callService('alarm_arm_home', { code: this.enteredCode });
-  },
-  handleAwayTap() {
-    this.callService('alarm_arm_away', { code: this.enteredCode });
-  },
+
   properties: {
     hass: {
       type: Object,
@@ -53,6 +45,7 @@ export default new Polymer({
       computed: 'validateCode(enteredCode, codeFormat)',
     },
   },
+
   validateCode(code, format) {
     const re = new RegExp(format);
     if (format === null) {
@@ -60,6 +53,7 @@ export default new Polymer({
     }
     return re.test(code);
   },
+
   stateObjChanged(newVal) {
     if (newVal) {
       this.codeFormat = newVal.attributes.code_format;
@@ -80,6 +74,19 @@ export default new Polymer({
     }
     this.async(() => this.fire('iron-resize'), 500);
   },
+
+  handleDisarmTap() {
+    this.callService('alarm_disarm', { code: this.enteredCode });
+  },
+
+  handleHomeTap() {
+    this.callService('alarm_arm_home', { code: this.enteredCode });
+  },
+
+  handleAwayTap() {
+    this.callService('alarm_arm_away', { code: this.enteredCode });
+  },
+
   callService(service, data) {
     const serviceData = data || {};
     serviceData.entity_id = this.stateObj.entityId;

src/more-infos/more-info-content.js

@@ -3,7 +3,6 @@ import Polymer from '../polymer';
 import dynamicContentUpdater from '../util/dynamic-content-updater';
 import stateMoreInfoType from '../util/state-more-info-type';
 
-import './more-info-default';
 import './more-info-group';
 import './more-info-sun';
 import './more-info-configurator';

src/more-infos/more-info-default.html

@@ -11,10 +11,46 @@
     <div class='layout vertical'>
       <template is='dom-repeat' items="[[computeDisplayAttributes(stateObj)]]" as="attribute">
         <div class='data-entry layout justified horizontal'>
-          <div class='key'>[[attribute]]</div>
+          <div class='key'>[[formatAttribute(attribute)]]</div>
           <div class='value'>[[getAttributeValue(stateObj, attribute)]]</div>
         </div>
       </template>
     </div>
   </template>
 </dom-module>
+
+<script>
+(function () {
+  'use strict';
+  var FILTER_KEYS = ['entity_picture', 'friendly_name', 'icon', 'unit_of_measurement'];
+
+  Polymer({
+    is: 'more-info-default',
+
+    properties: {
+      stateObj: {
+        type: Object,
+      },
+    },
+
+    computeDisplayAttributes: function (stateObj) {
+      if (!stateObj) {
+        return [];
+      }
+
+      return Object.keys(stateObj.attributes).filter(
+        function (key) { return FILTER_KEYS.indexOf(key) === -1; });
+    },
+
+    formatAttribute: function (attribute) {
+      return attribute.replace(/_/g, ' ');
+    },
+
+    getAttributeValue: function (stateObj, attribute) {
+      const value = stateObj.attributes[attribute];
+
+      return Array.isArray(value) ? value.join(', ') : value;
+    },
+  });
+}());
+</script>

src/more-infos/more-info-default.js

@@ -1,27 +0,0 @@
-import Polymer from '../polymer';
-
-const FILTER_KEYS = ['entity_picture', 'friendly_name', 'icon', 'unit_of_measurement'];
-
-export default new Polymer({
-  is: 'more-info-default',
-
-  properties: {
-    stateObj: {
-      type: Object,
-    },
-  },
-
-  computeDisplayAttributes(stateObj) {
-    if (!stateObj) {
-      return [];
-    }
-
-    return Object.keys(stateObj.attributes).filter((key) => FILTER_KEYS.indexOf(key) === -1);
-  },
-
-  getAttributeValue(stateObj, attribute) {
-    const value = stateObj.attributes[attribute];
-
-    return Array.isArray(value) ? value.join(', ') : value;
-  },
-});

src/more-infos/more-info-hvac.html

@@ -47,8 +47,8 @@
 
     <div class$='[[computeClassNames(stateObj)]]'>
       <div class='container-temperature'>
-        <div class='center horizontal layout single-row'>
-          <div class='flex'>Target Temperature</div>
+        <div class='single-row'>
+          <div>Target Temperature</div>
           <paper-slider
             min='[[stateObj.attributes.min_temp]]'
             max='[[stateObj.attributes.max_temp]]'
@@ -60,8 +60,8 @@
       </div>
 
       <div class='container-humidity'>
-        <div class='center horizontal layout single-row'>
-          <div class='flex'>Target Humidity</div>
+        <div class='single-row'>
+          <div>Target Humidity</div>
           <paper-slider
             min='[[stateObj.attributes.min_humidity]]'
             max='[[stateObj.attributes.max_humidity]]'

src/more-infos/more-info-light.html

@@ -1,6 +1,7 @@
 <link rel='import' href='../../bower_components/polymer/polymer.html'>
 <link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>
 
+<link rel='import' href='../components/ha-labeled-slider.html'>
 <link rel='import' href='../components/ha-color-picker.html'>
 
 <dom-module id='more-info-light'>
@@ -14,7 +15,6 @@
 
     ha-color-picker {
       display: block;
-      margin: 0 auto;
       width: 250px;
 
       max-height: 0px;
@@ -24,8 +24,7 @@
 
     .has-brightness .brightness,
     .has-color_temp .color_temp {
-      margin-bottom: 8px;
-      max-height: 40px;
+      max-height: 84px;
     }
 
     .has-rgb_color ha-color-picker {
@@ -34,19 +33,20 @@
   </style>
   <template>
     <div class$='[[computeClassNames(stateObj)]]'>
-      <div class='brightness center horizontal layout'>
-        <div>Brightness</div>
-        <paper-slider
-          max='255' id='brightness' value='{{brightnessSliderValue}}'
-          on-change='brightnessSliderChanged' class='flex'>
-        </paper-slider>
+
+      <div class='brightness'>
+        <ha-labeled-slider
+          caption='Brightness' icon='mdi:brightness-5' max='255'
+          value='{{brightnessSliderValue}}'
+          on-change='brightnessSliderChanged'></ha-labeled-slider>
       </div>
-      <div class='color_temp center horizontal layout'>
-        <div>Color temperature</div>
-        <paper-slider min="154" max="500"
-          id='color_temp' value='{{ctSliderValue}}'
-          on-change='ctSliderChanged' class='flex'>
-        </paper-slider>
+
+      <div class='color_temp'>
+        <ha-labeled-slider
+          caption='Color Temperature' icon='mdi:thermometer'
+          min='154' max='500'
+          value='{{ctSliderValue}}'
+          on-change='ctSliderChanged'></ha-labeled-slider>
       </div>
 
       <ha-color-picker on-colorselected='colorPicked' height='200' width='250'>

src/util/state-more-info-type.js

@@ -4,9 +4,16 @@ const DOMAINS_WITH_MORE_INFO = [
   'hvac',
 ];
 
+const HIDE_MORE_INFO = [
+  'input_select', 'scene', 'script', 'input_slider',
+];
+
 export default function stateMoreInfoType(state) {
   if (DOMAINS_WITH_MORE_INFO.indexOf(state.domain) !== -1) {
     return state.domain;
   }
+  if (HIDE_MORE_INFO.indexOf(state.domain) !== -1) {
+    return 'hidden';
+  }
   return 'default';
 }