Love: Add column and row card (#1353)

* Love: Add column and row card

* Lint

* Add row card, also broken CSS

* Add cardSize logic

* Fix CSS

* Working now

* Feedback

* Lint

src/panels/lovelace/cards/hui-column-card.js

@@ -0,0 +1,84 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import computeCardSize from '../common/compute-card-size.js';
+import createCardElement from '../common/create-card-element.js';
+import createErrorConfig from '../common/create-error-card-config.js';
+
+class HuiColumnCard extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        #root {
+          display: flex;
+          flex-direction: column;
+          margin-top: -4px
+          margin-bottom: -8px;
+        }
+        #root > * {
+          margin: 4px 0 8px 0;
+        }
+      </style>
+      <div id="root"></div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: '_hassChanged'
+      },
+      config: {
+        type: Object,
+        observer: '_configChanged'
+      }
+    };
+  }
+
+  constructor() {
+    super();
+    this._elements = [];
+  }
+
+  getCardSize() {
+    let totalSize = 0;
+    this._elements.forEach((element) => {
+      totalSize += computeCardSize(element);
+    });
+    return totalSize;
+  }
+
+  _configChanged(config) {
+    this._elements = [];
+    const root = this.$.root;
+
+    while (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
+
+    if (!config || !config.cards || !Array.isArray(config.cards)) {
+      const error = 'Card config incorrect.';
+      const element = createCardElement(createErrorConfig(error, config));
+      root.appendChild(element);
+      return;
+    }
+
+    const elements = [];
+    config.cards.forEach((card) => {
+      const element = createCardElement(card);
+      element.hass = this.hass;
+      elements.push(element);
+      root.appendChild(element);
+    });
+    this._elements = elements;
+  }
+
+  _hassChanged(hass) {
+    this._elements.forEach((element) => {
+      element.hass = hass;
+    });
+  }
+}
+
+customElements.define('hui-column-card', HuiColumnCard);

src/panels/lovelace/cards/hui-error-card.js

@@ -24,7 +24,7 @@ class HuiErrorCard extends PolymerElement {
   }
 
   getCardSize() {
-    return 1;
+    return 4;
   }
 
   _toStr(obj) {

src/panels/lovelace/cards/hui-row-card.js

@@ -0,0 +1,85 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import computeCardSize from '../common/compute-card-size.js';
+import createCardElement from '../common/create-card-element.js';
+import createErrorConfig from '../common/create-error-card-config.js';
+
+class HuiRowCard extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        #root {
+          display: flex;
+          margin-left: -4px;
+          margin-right: -4px;
+        }
+        #root > * {
+          flex: 1 1 0;
+          margin: 0 4px;
+        }
+      </style>
+      <div id="root"></div>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: {
+        type: Object,
+        observer: '_hassChanged'
+      },
+      config: {
+        type: Object,
+        observer: '_configChanged'
+      }
+    };
+  }
+
+  constructor() {
+    super();
+    this._elements = [];
+  }
+
+  getCardSize() {
+    let size = 1;
+    this._elements.forEach((element) => {
+      const elSize = computeCardSize(element);
+      if (elSize > size) size = elSize;
+    });
+    return size;
+  }
+
+  _configChanged(config) {
+    this._elements = [];
+    const root = this.$.root;
+
+    while (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
+
+    if (!config || !config.cards || !Array.isArray(config.cards)) {
+      const error = 'Card config incorrect.';
+      const element = createCardElement(createErrorConfig(error, config));
+      root.appendChild(element);
+      return;
+    }
+
+    const elements = [];
+    config.cards.forEach((card) => {
+      const element = createCardElement(card);
+      element.hass = this.hass;
+      elements.push(element);
+      root.appendChild(element);
+    });
+    this._elements = elements;
+  }
+
+  _hassChanged(hass) {
+    this._elements.forEach((element) => {
+      element.hass = hass;
+    });
+  }
+}
+
+customElements.define('hui-row-card', HuiRowCard);

src/panels/lovelace/common/compute-card-size.js

@@ -0,0 +1,3 @@
+export default function computeCardSize(element) {
+  return typeof element.getCardSize === 'function' ? element.getCardSize() : 1;
+}

src/panels/lovelace/common/create-card-element.js

@@ -1,8 +1,10 @@
 import fireEvent from '../../../common/dom/fire_event.js';
 
 import '../cards/hui-camera-preview-card.js';
+import '../cards/hui-column-card.js';
 import '../cards/hui-entities-card.js';
 import '../cards/hui-entity-filter-card.js';
+import '../cards/hui-error-card.js';
 import '../cards/hui-glance-card';
 import '../cards/hui-history-graph-card.js';
 import '../cards/hui-iframe-card.js';
@@ -12,13 +14,14 @@ import '../cards/hui-entity-picture-card.js';
 import '../cards/hui-picture-elements-card';
 import '../cards/hui-picture-glance-card';
 import '../cards/hui-plant-status-card.js';
+import '../cards/hui-row-card.js';
 import '../cards/hui-weather-forecast-card';
-import '../cards/hui-error-card.js';
 
 import createErrorCardConfig from './create-error-card-config.js';
 
 const CARD_TYPES = [
   'camera-preview',
+  'column',
   'entities',
   'entity-filter',
   'entity-picture',
@@ -31,6 +34,7 @@ const CARD_TYPES = [
   'picture-elements',
   'picture-glance',
   'plant-status',
+  'row',
   'weather-forecast'
 ];