Fix: entity pictures are circular again

src/components/entity/ha-state-label-badge.js

@@ -30,9 +30,7 @@ export default new Polymer({
       this.async(() => moreInfoActions.selectEntity(this.state.entityId), 1);
       return;
     }
-    if (this.state.domain === 'scene') {
-      serviceActions.callTurnOn(this.state.entityId);
-    } else if (this.state.state === 'off') {
+    if (this.state.domain === 'scene' || this.state.state === 'off') {
       serviceActions.callTurnOn(this.state.entityId);
     } else {
       serviceActions.callTurnOff(this.state.entityId);
@@ -62,7 +60,7 @@ export default new Polymer({
       case 'scene':
       case 'script':
       case 'alarm_control_panel':
-        return undefined;
+        return null;
       case 'sensor':
       default:
         return state.state === 'unknown' ? '-' : state.state;
@@ -91,12 +89,12 @@ export default new Polymer({
         return state.state === 'above_horizon' ?
         domainIcon(state.domain) : 'mdi:brightness-3';
       default:
-        return undefined;
+        return null;
     }
   },
 
   computeImage(state) {
-    return state.attributes.entity_picture;
+    return state.attributes.entity_picture || null;
   },
 
   computeLabel(state) {
@@ -115,7 +113,7 @@ export default new Polymer({
         // state == 'disarmed'
         return 'disarm';
       default:
-        return state.attributes.unit_of_measurement;
+        return state.attributes.unit_of_measurement || null;
     }
   },
 

src/components/entity/state-badge.html

@@ -1,5 +1,4 @@
 <link rel='import' href='../../../bower_components/polymer/polymer.html'>
-<link rel='import' href='../../../bower_components/iron-image/iron-image.html'>
 
 <link rel='import' href='./ha-state-icon.html'>
 
@@ -9,23 +8,15 @@
     position: relative;
     display: inline-block;
     width: 40px;
-    /*background-color: #4fc3f7;*/
     color: #44739E;
     border-radius: 50%;
-  }
-
-  .badge {
     height: 40px;
     text-align: center;
-  }
-
-  iron-image {
-    border-radius: 50%;
-    background-color: #FFFFFF;
+    background-size: cover;
+    line-height: 40px;
   }
 
   ha-state-icon {
-    margin: 0 auto;
     transition: color .3s ease-in-out;
   }
 
@@ -39,15 +30,8 @@
   </style>
 
   <template>
-    <div class='layout horizontal center badge'>
-      <ha-state-icon id='icon' state-obj='[[stateObj]]'
-        data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]'>
-      </ha-state-icon>
-      <template is='dom-if' if='[[stateObj.attributes.entity_picture]]'>
-        <iron-image
-          sizing='cover' class='fit'
-          src$="[[stateObj.attributes.entity_picture]]"></iron-image>
-      </template>
-    </div>
+    <ha-state-icon id='icon' state-obj='[[stateObj]]'
+      data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]'>
+    </ha-state-icon>
   </template>
 </dom-module>

src/components/entity/state-badge.js

@@ -16,6 +16,16 @@ export default new Polymer({
    * Called when an attribute changes that influences the color of the icon.
    */
   updateIconColor(newVal) {
+    // hide icon if we have entity picture
+    if (newVal.attributes.entity_picture) {
+      this.style.backgroundImage = `url(${newVal.attributes.entity_picture})`;
+      this.$.icon.style.display = 'none';
+      return;
+    }
+
+    this.style.backgroundImage = '';
+    this.$.icon.style.display = 'inline';
+
     // for domain light, set color of icon to light color if available and it is
     // not very white (sum rgb colors < 730)
     if (newVal.domain === 'light' && newVal.state === 'on' &&