Lovelace: Small reorg (#1315)

* Small reorg

* Add markdown card

* Tweak closeness

src/cards/ha-entities-card.js

@@ -22,6 +22,9 @@ class HaEntitiesCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
       ha-card {
         padding: 16px;
       }
+      .states {
+        margin: -4px 0;
+      }
       .state {
         padding: 4px 0;
       }

src/panels/lovelace/cards/hui-camera-preview-card.js

@@ -1,8 +1,8 @@
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import computeDomain from '../../common/entity/compute_domain.js';
+import computeDomain from '../../../common/entity/compute_domain.js';
 
-import '../../cards/ha-camera-card.js';
+import '../../../cards/ha-camera-card.js';
 import './hui-error-card.js';
 
 class HuiCameraPreviewCard extends PolymerElement {

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

@@ -2,16 +2,16 @@ import '@polymer/iron-flex-layout/iron-flex-layout-classes.js';
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import stateCardType from '../../common/entity/state_card_type.js';
+import stateCardType from '../../../common/entity/state_card_type.js';
-import computeDomain from '../../common/entity/compute_domain.js';
+import computeDomain from '../../../common/entity/compute_domain.js';
-import { DOMAINS_HIDE_MORE_INFO } from '../../common/const.js';
+import { DOMAINS_HIDE_MORE_INFO } from '../../../common/const.js';
 
-import '../../components/ha-card.js';
+import '../../../components/ha-card.js';
 
 // just importing this now as shortcut to import correct state-card-*
-import '../../state-summary/state-card-content.js';
+import '../../../state-summary/state-card-content.js';
 
-import EventsMixin from '../../mixins/events-mixin.js';
+import EventsMixin from '../../../mixins/events-mixin.js';
 
 /*
  * @appliesMixin EventsMixin
@@ -23,8 +23,12 @@ class HuiEntitiesCard extends EventsMixin(PolymerElement) {
       ha-card {
         padding: 16px;
       }
-      .state {
+      #states {
-        padding: 4px 0;
+        margin: -4px 0;
+      }
+      #states > * {
+        display: block;
+        margin: 4px 0;
       }
       .header {
         @apply --paper-font-headline;

src/panels/lovelace/cards/hui-entity-filter-card.js

@@ -10,8 +10,8 @@ import './hui-picture-glance-card';
 import './hui-plant-status-card.js';
 import './hui-weather-forecast-card';
 
-import computeStateDomain from '../../common/entity/compute_state_domain.js';
+import computeStateDomain from '../../../common/entity/compute_state_domain.js';
-import computeCardElement from './common/compute-card-element.js';
+import computeCardElement from '../common/compute-card-element.js';
 
 class HuiEntitiesCard extends PolymerElement {
   static get properties() {
@@ -27,6 +27,11 @@ class HuiEntitiesCard extends PolymerElement {
     };
   }
 
+  constructor() {
+    super();
+    this._whenDefined = {};
+  }
+
   getCardSize() {
     return this.lastChild ? this.lastChild.getCardSize() : 1;
   }
@@ -75,6 +80,10 @@ class HuiEntitiesCard extends PolymerElement {
       error = `Unknown card type encountered: "${config.card}".`;
     } else if (!customElements.get(tag)) {
       error = `Custom element doesn't exist: "${tag}".`;
+      if (!(tag in this._whenDefined)) {
+        this._whenDefined[tag] = customElements.whenDefined(tag)
+          .then(() => this._configChanged(this.config));
+      }
     } else if (!config.filter || !Array.isArray(config.filter)) {
       error = 'No or incorrect filter.';
     }
@@ -100,14 +109,11 @@ class HuiEntitiesCard extends PolymerElement {
   }
 
   _computeCardConfig(config) {
-    const cardConfig = Object.assign(
+    return Object.assign(
       {},
-      config,
+      config.card_config,
       { entities: this._getEntities(this.hass, config.filter) }
     );
-    delete cardConfig.card;
-    delete cardConfig.filter;
-    return cardConfig;
   }
 }
 customElements.define('hui-entity-filter-card', HuiEntitiesCard);

src/panels/lovelace/cards/hui-entity-picture-card.js

@@ -1,14 +1,14 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import '../../components/ha-card.js';
+import '../../../components/ha-card.js';
 
-import { STATES_ON } from '../../common/const.js';
+import { STATES_ON } from '../../../common/const.js';
-import computeDomain from '../../common/entity/compute_domain.js';
+import computeDomain from '../../../common/entity/compute_domain.js';
-import computeStateDisplay from '../../common/entity/compute_state_display.js';
+import computeStateDisplay from '../../../common/entity/compute_state_display.js';
-import computeStateName from '../../common/entity/compute_state_name.js';
+import computeStateName from '../../../common/entity/compute_state_name.js';
 
-import LocalizeMixin from '../../mixins/localize-mixin.js';
+import LocalizeMixin from '../../../mixins/localize-mixin.js';
 
 const DOMAINS_NO_STATE = ['scene', 'script', 'weblink'];
 
@@ -141,4 +141,4 @@ class HuiPictureCard extends LocalizeMixin(PolymerElement) {
   }
 }
 
-customElements.define('hui-picture-card', HuiPictureCard);
+customElements.define('hui-entity-picture-card', HuiPictureCard);

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

@@ -1,14 +1,14 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import computeStateDisplay from '../../common/entity/compute_state_display.js';
+import computeStateDisplay from '../../../common/entity/compute_state_display.js';
-import computeStateName from '../../common/entity/compute_state_name.js';
+import computeStateName from '../../../common/entity/compute_state_name.js';
 
-import '../../components/entity/state-badge.js';
+import '../../../components/entity/state-badge.js';
-import '../../components/ha-card.js';
+import '../../../components/ha-card.js';
 
-import EventsMixin from '../../mixins/events-mixin.js';
+import EventsMixin from '../../../mixins/events-mixin.js';
-import LocalizeMixin from '../../mixins/localize-mixin.js';
+import LocalizeMixin from '../../../mixins/localize-mixin.js';
 
 /*
  * @appliesMixin EventsMixin

src/panels/lovelace/cards/hui-history-graph-card.js

@@ -1,8 +1,8 @@
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import computeDomain from '../../common/entity/compute_domain.js';
+import computeDomain from '../../../common/entity/compute_domain.js';
 
-import '../../cards/ha-history_graph-card.js';
+import '../../../cards/ha-history_graph-card.js';
 import './hui-error-card.js';
 
 class HuiHistoryGraphCard extends PolymerElement {

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

@@ -0,0 +1,67 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../../../components/ha-card.js';
+import '../../../components/ha-markdown.js';
+
+class HuiMarkdownCard extends PolymerElement {
+  static get template() {
+    return html`
+      <style>
+        :host {
+          @apply --paper-font-body1;
+        }
+        ha-markdown {
+          display: block;
+          padding: 0 16px 16px;
+          -ms-user-select: initial;
+          -webkit-user-select: initial;
+          -moz-user-select: initial;
+        }
+        :host([no-title]) ha-markdown {
+          padding-top: 16px;
+        }
+        ha-markdown p:first-child {
+          margin-top: 0;
+        }
+        ha-markdown p:last-child {
+          margin-bottom: 0;
+        }
+        ha-markdown a {
+          color: var(--primary-color);
+        }
+        ha-markdown img {
+          max-width: 100%;
+        }
+        paper-button {
+          margin: 8px;
+          font-weight: 500;
+        }
+      </style>
+      <ha-card header="[[config.title]]">
+        <ha-markdown content='[[config.content]]'></ha-markdown>
+      </ha-card>
+    `;
+  }
+
+  static get properties() {
+    return {
+      config: Object,
+      noTitle: {
+        type: Boolean,
+        reflectToAttribute: true,
+        computed: '_computeNoTitle(config.title)',
+      },
+    };
+  }
+
+  getCardSize() {
+    return this.config.content.split('\n').length;
+  }
+
+  _computeNoTitle(title) {
+    return !title;
+  }
+}
+
+customElements.define('hui-markdown-card', HuiMarkdownCard);

src/panels/lovelace/cards/hui-media-control-card.js

@@ -1,8 +1,8 @@
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import computeDomain from '../../common/entity/compute_domain.js';
+import computeDomain from '../../../common/entity/compute_domain.js';
 
-import '../../cards/ha-media_player-card.js';
+import '../../../cards/ha-media_player-card.js';
 import './hui-error-card.js';
 
 class HuiMediaControlCard extends PolymerElement {

src/panels/lovelace/cards/hui-picture-glance-card.js

@@ -2,16 +2,16 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 import '@polymer/paper-icon-button/paper-icon-button.js';
 
-import '../../components/ha-card.js';
+import '../../../components/ha-card.js';
 
-import { STATES_ON } from '../../common/const.js';
+import { STATES_ON } from '../../../common/const.js';
-import computeDomain from '../../common/entity/compute_domain.js';
+import computeDomain from '../../../common/entity/compute_domain.js';
-import computeStateDisplay from '../../common/entity/compute_state_display.js';
+import computeStateDisplay from '../../../common/entity/compute_state_display.js';
-import computeStateName from '../../common/entity/compute_state_name.js';
+import computeStateName from '../../../common/entity/compute_state_name.js';
-import stateIcon from '../../common/entity/state_icon.js';
+import stateIcon from '../../../common/entity/state_icon.js';
 
-import EventsMixin from '../../mixins/events-mixin.js';
+import EventsMixin from '../../../mixins/events-mixin.js';
-import LocalizeMixin from '../../mixins/localize-mixin.js';
+import LocalizeMixin from '../../../mixins/localize-mixin.js';
 
 const DOMAINS_FORCE_DIALOG = ['binary_sensor', 'device_tracker', 'sensor'];
 

src/panels/lovelace/cards/hui-plant-status-card.js

@@ -1,8 +1,8 @@
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import computeDomain from '../../common/entity/compute_domain.js';
+import computeDomain from '../../../common/entity/compute_domain.js';
 
-import '../../cards/ha-plant-card.js';
+import '../../../cards/ha-plant-card.js';
 import './hui-error-card.js';
 
 class HuiPlantStatusCard extends PolymerElement {

src/panels/lovelace/cards/hui-weather-forecast-card.js

@@ -1,8 +1,8 @@
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import computeDomain from '../../common/entity/compute_domain.js';
+import computeDomain from '../../../common/entity/compute_domain.js';
 
-import '../../cards/ha-weather-card.js';
+import '../../../cards/ha-weather-card.js';
 import './hui-error-card.js';
 
 class HuiWeatherForecastCard extends PolymerElement {

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

@@ -1,9 +1,24 @@
+import '../cards/hui-camera-preview-card.js';
+import '../cards/hui-entities-card.js';
+import '../cards/hui-entity-filter-card.js';
+import '../cards/hui-glance-card';
+import '../cards/hui-history-graph-card.js';
+import '../cards/hui-markdown-card.js';
+import '../cards/hui-media-control-card.js';
+import '../cards/hui-entity-picture-card.js';
+import '../cards/hui-picture-glance-card';
+import '../cards/hui-plant-status-card.js';
+import '../cards/hui-weather-forecast-card';
+import '../cards/hui-error-card.js';
+
 const CARD_TYPES = [
   'camera-preview',
   'entities',
   'entity-filter',
+  'entity-picture',
   'glance',
   'history-graph',
+  'markdown',
   'media-control',
   'picture-glance',
   'plant-status',

src/panels/lovelace/hui-view.js

@@ -1,18 +1,6 @@
 import { html } from '@polymer/polymer/lib/utils/html-tag.js';
 import { PolymerElement } from '@polymer/polymer/polymer-element.js';
 
-import './hui-camera-preview-card.js';
-import './hui-entities-card.js';
-import './hui-entity-filter-card.js';
-import './hui-glance-card';
-import './hui-history-graph-card.js';
-import './hui-media-control-card.js';
-import './hui-picture-card.js';
-import './hui-picture-glance-card';
-import './hui-plant-status-card.js';
-import './hui-weather-forecast-card';
-import './hui-error-card.js';
-
 import applyThemesOnElement from '../../common/dom/apply_themes_on_element.js';
 import computeCardElement from './common/compute-card-element.js';