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>
   </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' &&

src/components/ha-label-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='../../bower_components/iron-icon/iron-icon.html'>
 
 <dom-module id='ha-label-badge'>
@@ -25,6 +24,7 @@
 
     white-space: nowrap;
     background-color: white;
+    background-size: cover;
     transition: border .3s ease-in-out;
   }
   .label-badge .value {
@@ -74,17 +74,10 @@
     <div class='badge-container'>
       <div class='label-badge' id='badge'>
         <div class$='[[computeClasses(value)]]'>
-          <template is='dom-if' if='[[icon]]'>
-            <iron-icon icon='[[icon]]'></iron-icon>
-          </template>
-          <template is='dom-if' if='[[value]]'>[[value]]</template>
-          <template is='dom-if' if='[[image]]'>
-            <iron-image sizing='cover' class='fit'src='[[image]]'></iron-image>
-          </template>
+          <iron-icon icon='[[icon]]' hidden$='[[computeHideIcon(icon, value, image)]]'></iron-icon>
+          <span hidden$='[[computeHideValue(value, image)]]'>[[value]]</span>
         </div>
-        <template is='dom-if' if='[[label]]'>
-          <div class='label'><span>[[label]]</span></div>
-        </template>
+        <div class='label' hidden$='[[!label]]'><span>[[label]]</span></div>
       </div>
       <div class='title'>[[description]]</div>
     </div>

src/components/ha-label-badge.js

@@ -1,19 +1,24 @@
 import Polymer from '../polymer';
 
+// Beware: Polymer will not call computeHideIcon and computeHideValue if any of
+// the parameters are undefined. Set to null if not using.
 export default new Polymer({
   is: 'ha-label-badge',
 
   properties: {
     value: {
       type: String,
+      value: null,
     },
 
     icon: {
       type: String,
+      value: null,
     },
 
     label: {
       type: String,
+      value: null,
     },
 
     description: {
@@ -22,11 +27,24 @@ export default new Polymer({
 
     image: {
       type: String,
-      observe: 'imageChanged',
+      value: null,
+      observer: 'imageChanged',
     },
   },
 
   computeClasses(value) {
     return value && value.length > 4 ? 'value big' : 'value';
   },
+
+  computeHideIcon(icon, value, image) {
+    return !icon || value || image;
+  },
+
+  computeHideValue(value, image) {
+    return !value || image;
+  },
+
+  imageChanged(newVal) {
+    this.$.badge.style.backgroundImage = newVal ? `url(${newVal})` : '';
+  },
 });