Release 20180112

Author: andrey-git

CHANGELOG.md

@@ -1,6 +1,13 @@
 ## Changelog
 
 *Note: Update to at least 20171227 required for HA 0.61+*
+
+#### 2018-01-12
+*   Allow setting margin on slider via `--ha-themed-slider-margin`.
+*   Allow changing state-card badge margins via `--ha-badges-card-margin`.
+*   `extra_badge`s can now be individually themed.
+*   Allow changing the size and number of UI columns (requires `customizer`)
+
 #### 2017-12-27
 *   Hotfix for HA 0.61
 *   Change size of badges in state card to 85% to match the badges in the top section.

README.md

@@ -31,6 +31,12 @@
 *   **Update to at least 20171129 for HA 0.59-0.60**
 *   **Update to at least 20171117 for HA 0.58**
 
+#### 2018-01-12
+*   Allow setting margin on slider via `--ha-themed-slider-margin`.
+*   Allow changing state-card badge margins via `--ha-badges-card-margin`.
+*   `extra_badge`s can now be individually themed.
+*   Allow changing the size and number of UI columns (requires [customizer](https://github.com/andrey-git/home-assistant-customizer))
+
 #### 2017-12-27
 *   Hotfix for HA 0.61
 *   Change size of badges in state card to 85% to match the badges in the top section.
@@ -63,13 +69,14 @@ See [installing](docs/installing.md)
 See [activating](docs/activating.md)
 
 ## Customizer component
-See instruction in dedicated repo: [https://github.com/andrey-git/home-assistant-customizer](https://github.com/andrey-git/home-assistant-customizer/)
+See instruction in a dedicated repository: [https://github.com/andrey-git/home-assistant-customizer](https://github.com/andrey-git/home-assistant-customizer/)
 Provides the following features:
 *   Load CustomUI files (HA 0.53+)
 *   Register CustomUI panel (HA 0.52 and below).
 *   Hide CustomUI attributes in `more-info` (HA 0.50 - 0.52)
 *   Hide arbitrary attributes in `more-info` (Requires HA 0.50+)
 *   Dynamic customization.
+*   Set the width and number of UI columns (Requires CustomUI 20180112+)
 
 
 ## CustomUI panel
@@ -290,6 +297,9 @@ extra_badge:
   unit: W
 ```
 
+If you use the first format, i.e. a real sensor, you can use context-aware theming
+on it.
+
 In both cases you can specify a blacklist of badge "states", when you don't want to see the badge.
 ```yaml
 extra_badge:

src/hooks.html

@@ -1,6 +1,6 @@
 <script>
 window.customUI = window.customUI || {
-  VERSION: '20171227',
+  VERSION: '20180112',
 
   SUPPORTED_SLIDER_MODES: [
     'single-line', 'break-slider', 'break-slider-toggle', 'hide-slider', 'no-slider',

state-card-custom-ui-dbg-es5.html

@@ -1,6 +1,6 @@
 <div hidden="" by-polymer-bundler=""><script>
 window.customUI = window.customUI || {
-  VERSION: '20171227',
+  VERSION: '20180112',
 
   SUPPORTED_SLIDER_MODES: ['single-line', 'break-slider', 'break-slider-toggle', 'hide-slider', 'no-slider'],
 
@@ -33,6 +33,7 @@
             }
             break;
           case 'MORE-INFO-GROUP':
+          case 'STATE-CARD-CONTENT':
             if (element.stateObj) {
               elem._context.push(element.stateObj.entity_id);
             }
@@ -216,10 +217,30 @@
     version.textContent = 'Custom UI ' + window.customUI.VERSION;
     about.insertBefore(version, secondP);
   },
+  controlColumns: function controlColumns(columns) {
+    var partialCards = window.customUI.getElementHierarchy(document, ['home-assistant', 'home-assistant-main', 'partial-cards']);
+    if (partialCards === null) {
+      // DOM not ready. Wait 1 second.
+      window.setTimeout(window.customUI.controlColumns.bind(null, columns), 1000);
+      return;
+    }
+    partialCards.mqls.forEach(function (mql) {
+      mql.removeListener(partialCards.handleWindowChange);
+    });
+    partialCards.mqls = columns.map(function (width) {
+      var mql = window.matchMedia('(min-width: ' + width + 'px)');
+      mql.addListener(partialCards.handleWindowChange);
+      return mql;
+    });
+    partialCards.handleWindowChange();
+  },
   useCustomizer: function useCustomizer() {
     var main = window.customUI.lightOrShadow(document, 'home-assistant');
     var customizer = main.hass.states['customizer.customizer'];
     if (!customizer) return;
+    if (customizer.attributes.columns) {
+      window.customUI.controlColumns(customizer.attributes.columns);
+    }
 
     if (customizer.attributes.hide_attributes) {
       if (window.hassUtil.LOGIC_STATE_ATTRIBUTES) {
@@ -459,6 +480,9 @@
 <dom-module id="ha-themed-slider">
   <template>
     <style>
+      :host {
+        margin: var(--ha-themed-slider-margin, initial);
+      }
       .disable-off-when-min {
         --paper-slider-pin-start-color:  var(--paper-slider-pin-color);
       }
@@ -707,7 +731,7 @@
     </style>
     <div class$="[[extraClass(extraObjVisible)]] horizontal layout">
       <template is="dom-if" if="[[extraObjVisible]]">
-        <template is="dom-repeat" items="[[extraObj]]">
+        <template is="dom-repeat" items="[[extraObj]]" on-dom-change="extraDomChanged">
           <ha-state-label-badge hass="[[hass]]" state="[[item]]"></ha-state-label-badge>
         </template>
       </template>
@@ -752,20 +776,35 @@
   }
 
   _createClass(DynamicWithExtra, [{
+    key: 'connectedCallback',
+    value: function connectedCallback() {
+      _get(DynamicWithExtra.prototype.__proto__ || Object.getPrototypeOf(DynamicWithExtra.prototype), 'connectedCallback', this).call(this);
+      this._attached = true;
+    }
+  }, {
+    key: 'disconnectedCallback',
+    value: function disconnectedCallback() {
+      this._isAttached = false;
+      _get(DynamicWithExtra.prototype.__proto__ || Object.getPrototypeOf(DynamicWithExtra.prototype), 'disconnectedCallback', this).call(this);
+    }
+  }, {
     key: 'computeExtra',
-    value: function computeExtra(hass, stateObj) {
-      if (!stateObj.attributes.extra_badge) return [];
+    value: function computeExtra(hass, stateObj, attached) {
+      var _this2 = this;
+
+      if (!stateObj.attributes.extra_badge || !attached) return [];
       var extraBadges = stateObj.attributes.extra_badge;
       if (!Array.isArray(extraBadges)) {
         extraBadges = [extraBadges];
       }
       return extraBadges.map(function (extraBadge) {
         var result = null;
         if (extraBadge.entity_id && hass.states[extraBadge.entity_id]) {
-          result = Object.assign({}, hass.states[extraBadge.entity_id]);
-        } else if (extraBadge.attribute && stateObj.attributes[extraBadge.attribute]) {
+          result = Object.assign({}, window.customUI.maybeChangeObject(_this2, hass.states[extraBadge.entity_id], _this2.inDialog,
+          /* allowHidden= */false));
+        } else if (extraBadge.attribute && stateObj.attributes[extraBadge.attribute] !== undefined) {
           result = {
-            state: stateObj.attributes[extraBadge.attribute],
+            state: String(stateObj.attributes[extraBadge.attribute]),
             _domain: 'none',
             entity_id: null,
             attributes: { unit_of_measurement: extraBadge.unit }
@@ -823,7 +862,7 @@
   }, {
     key: 'tapHandler',
     value: function tapHandler(e) {
-      var _this2 = this;
+      var _this3 = this;
 
       this.$$('#overlay').style.pointerEvents = 'none';
       var lock = this.$$('#lock');
@@ -832,14 +871,29 @@
         lock.style.opacity = '0.1';
       }
       window.setTimeout(function () {
-        _this2.$$('#overlay').style.pointerEvents = '';
+        _this3.$$('#overlay').style.pointerEvents = '';
         if (lock) {
           lock.icon = 'mdi:lock-outline';
           lock.style.opacity = '';
         }
       }, 5000);
       e.stopPropagation();
     }
+  }, {
+    key: 'applyThemes',
+    value: function applyThemes(hass, element, stateObj) {
+      var themeName = stateObj.attributes.theme || 'default';
+      window.hassUtil.applyThemesOnElement(element, hass.themes || { default_theme: 'default', themes: {} }, themeName);
+    }
+  }, {
+    key: 'extraDomChanged',
+    value: function extraDomChanged() {
+      var _this4 = this;
+
+      this.root.querySelectorAll('ha-state-label-badge').forEach(function (elem) {
+        _this4.applyThemes(_this4.hass, elem, elem.state);
+      });
+    }
   }], [{
     key: 'is',
     get: function get() {
@@ -858,8 +912,9 @@
         controlElement: String,
         extraObj: {
           type: Array,
-          computed: 'computeExtra(hass, stateObj)'
+          computed: 'computeExtra(hass, stateObj, _attached)'
         },
+        _attached: Boolean,
         extraObjVisible: {
           type: Boolean,
           computed: 'computeExtraVisible(extraObj, inDialog)'
@@ -993,11 +1048,14 @@
     }, {
       key: '_setMode',
       value: function _setMode() {
-        this.hideSlider = this.mode === 'hide-slider' && this.lineTooLong;
-        this.breakSlider = (this.mode === 'break-slider' || this.mode === 'hide-slider') && this.lineTooLong;
+        var obj = {
+          hideSlider: this.mode === 'hide-slider' && this.lineTooLong,
+          breakSlider: (this.mode === 'break-slider' || this.mode === 'hide-slider') && this.lineTooLong
+        };
         if (!this.showSlider) {
-          this.breakSlider = true;
+          obj.breakSlider = true;
         }
+        this.setProperties(obj);
       }
     }, {
       key: '_onIronResize',
@@ -1007,15 +1065,19 @@
           return;
         }
         if (this.mode === 'no-slider') {
-          this.hideSlider = true;
-          this.breakSlider = true;
+          this.setProperties({
+            hideSlider: true,
+            breakSlider: true
+          });
           return;
         }
         var prevBreakSlider = this.breakSlider;
         var prevHideSlider = this.hideSlider;
-        this.lineTooLong = false;
-        this.hideSlider = false;
-        this.breakSlider = false;
+        this.setProperties({
+          lineTooLong: false,
+          hideSlider: false,
+          breakSlider: false
+        });
         var container = this.$.container;
 
         var containerWidth = container.clientWidth;
@@ -1100,21 +1162,22 @@
           this.sliderValue = 0;
         }
         if (stateObj) {
-          this.setProperties({
+          var obj = {
             minLineBreak: 0,
             maxLineBreak: 999,
             hideSlider: false,
             breakSlider: false,
             lineTooLong: false
-          });
-          if (window.customUI.SUPPORTED_SLIDER_MODES.indexOf(stateObj.attributes.state_card_mode) !== -1) {
-            this.mode = stateObj.attributes.state_card_mode;
+          };
+          if (window.customUI.SUPPORTED_SLIDER_MODES.includes(stateObj.attributes.state_card_mode)) {
+            obj.mode = stateObj.attributes.state_card_mode;
           } else {
-            this.mode = DEFAULT_MODE;
+            obj.mode = DEFAULT_MODE;
           }
           if (stateObj.attributes.stretch_slider) {
-            this.stretchSlider = true;
+            obj.stretchSlider = true;
           }
+          this.setProperties(obj);
           this._waitForLayout();
         }
       }
@@ -1308,7 +1371,7 @@
           this._container.style.display = 'inline-block';
           var params = { display: 'inline-block' };
           if (this._container.classList.contains('state')) {
-            params.margin = '0 -6px';
+            params.margin = 'var(--ha-badges-card-margin, 0 -6px)';
           }
           this.updateStyles(params);
         }