Now able to change brightness of lights from more info dialog

homeassistant/components/http/frontend.py

@@ -1,2 +1,2 @@
 """ DO NOT MODIFY. Auto-generated by build_frontend script """
-VERSION = "9e0c2f360a70a0f7fc95e814d7e99dc1"
+VERSION = "230e724e74d2deaf5b91eafa63c59c94"

homeassistant/components/http/www_static/polymer/bower.json

@@ -33,6 +33,7 @@
     "paper-dropdown": "polymer/paper-dropdown#~0.5.2",
     "paper-item": "polymer/paper-item#~0.5.2",
     "moment": "~2.8.4",
-    "core-style": "polymer/core-style#~0.5.2"
+    "core-style": "polymer/core-style#~0.5.2",
+    "paper-slider": "polymer/paper-slider#~0.5.2"
   }
 }

homeassistant/components/http/www_static/polymer/cards/state-card-display.html

@@ -7,7 +7,7 @@
   <template>
     <style>
     .state {
-      margin-left: 10px;
+      margin-left: 16px;
       text-transform: capitalize;  
       font-weight: 300;
       font-size: 1.3rem;

homeassistant/components/http/www_static/polymer/dialogs/state-card-dialog.html

@@ -2,6 +2,7 @@
 <link rel="import" href="../bower_components/core-style/core-style.html">
 
 <link rel="import" href="../cards/state-card-content.html">
+<link rel="import" href="../more-infos/more-info-content.html">
 
 <polymer-element name="state-card-dialog" attributes="api">
 <template>
@@ -12,8 +13,14 @@
 
     <core-style ref='ha-dialog'></core-style>
 
+    <style>
+
+    </style>
+
     <div>
       <state-card-content stateObj="{{stateObj}}" api="{{api}}"></state-card-content>
+      <br />
+      <more-info-content stateObj="{{stateObj}}" api="{{api}}"></more-info-content>
     </div>
 
     <paper-button dismissive>Dismiss</paper-button>

homeassistant/components/http/www_static/polymer/home-assistant-api.html

@@ -72,6 +72,17 @@
           return "display";
         }
       }
+    },
+
+    // how to render the more info of this state
+    moreInfoType: {
+      get: function() {
+        if(this.domain === 'light') {
+          return 'light';
+        } else {
+          return 'default';
+        }
+      }
     }
   });
 

homeassistant/components/http/www_static/polymer/more-infos/more-info-content.html

@@ -0,0 +1,21 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<link rel="import" href="more-info-default.html">
+<link rel="import" href="more-info-light.html">
+
+<polymer-element name="more-info-content" attributes="api stateObj" noscript>
+<template>
+  <template id="more-info-light">
+    <more-info-light
+      api="{{api}}"
+      stateObj="{{stateObj}}">
+    </more-info-light>
+  </template>
+
+  <template id="more-info-default">
+    <more-info-default stateObj="{{stateObj}}"></more-info-default>
+  </template>
+
+  <template bind ref="{{'more-info-' + stateObj.moreInfoType}}"></template>
+</template>
+</polymer-element>

homeassistant/components/http/www_static/polymer/more-infos/more-info-default.html

@@ -0,0 +1,9 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+
+<polymer-element name="more-info-default" attributes="stateObj" noscript>
+  <template>
+    <div>
+      No further options here yet..
+    </div>
+  </template>
+</polymer-element>

homeassistant/components/http/www_static/polymer/more-infos/more-info-light.html

@@ -0,0 +1,53 @@
+<link rel="import" href="../bower_components/polymer/polymer.html">
+<link rel="import" href="../bower_components/paper-slider/paper-slider.html">
+
+<polymer-element name="more-info-light" attributes="stateObj api">
+<template>
+  <style>
+    .brightness paper-slider::shadow #sliderKnobInner,
+    .brightness paper-slider::shadow #sliderBar::shadow #activeProgress {
+      background-color: #039be5;
+    }
+  </style>
+  <div>
+    <div center horizontal layout class='brightness'>
+      <div>Brightness</div>
+      <paper-slider
+        max="255" flex
+        on-core-change="{{brightnessSliderChanged}}"
+        value="{{brightnessValue}}">
+      </paper-slider>
+    </div>
+  </div>
+</template>
+<script>
+Polymer({
+
+  brightnessValue: 0,
+
+  observe: {
+    'stateObj.attributes.brightness': 'brightnessChanged'
+  },
+
+  brightnessChanged: function(oldVal, newVal) {
+    this.brightnessValue = newVal;
+  },
+
+  brightnessSliderChanged: function(ev, details, target) {
+    var bri = parseInt(target.value);
+
+    if(isNaN(bri)) return;
+
+    if(bri === 0) {
+      this.api.turn_off(this.stateObj.entity_id);
+    } else {
+      this.api.call_service("light", "turn_on", {
+        entity_id: this.stateObj.entity_id,
+        brightness: bri
+      });
+    }
+  }
+
+});
+</script>
+</polymer-element>