diff --git a/src/cards/ha-entities-card.js b/src/cards/ha-entities-card.js
index aa373d6c0c..10832a22b1 100644
--- a/src/cards/ha-entities-card.js
+++ b/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;
}
diff --git a/src/panels/lovelace/hui-camera-preview-card.js b/src/panels/lovelace/cards/hui-camera-preview-card.js
similarity index 93%
rename from src/panels/lovelace/hui-camera-preview-card.js
rename to src/panels/lovelace/cards/hui-camera-preview-card.js
index 9f1ffa706a..c034379a25 100644
--- a/src/panels/lovelace/hui-camera-preview-card.js
+++ b/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 {
diff --git a/src/panels/lovelace/hui-entities-card.js b/src/panels/lovelace/cards/hui-entities-card.js
similarity index 85%
rename from src/panels/lovelace/hui-entities-card.js
rename to src/panels/lovelace/cards/hui-entities-card.js
index d5e3f8a862..69d1e7b131 100644
--- a/src/panels/lovelace/hui-entities-card.js
+++ b/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 computeDomain from '../../common/entity/compute_domain.js';
-import { DOMAINS_HIDE_MORE_INFO } from '../../common/const.js';
+import stateCardType from '../../../common/entity/state_card_type.js';
+import computeDomain from '../../../common/entity/compute_domain.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 {
- padding: 4px 0;
+ #states {
+ margin: -4px 0;
+ }
+ #states > * {
+ display: block;
+ margin: 4px 0;
}
.header {
@apply --paper-font-headline;
diff --git a/src/panels/lovelace/hui-entity-filter-card.js b/src/panels/lovelace/cards/hui-entity-filter-card.js
similarity index 87%
rename from src/panels/lovelace/hui-entity-filter-card.js
rename to src/panels/lovelace/cards/hui-entity-filter-card.js
index d96256c464..b85b9fd220 100644
--- a/src/panels/lovelace/hui-entity-filter-card.js
+++ b/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 computeCardElement from './common/compute-card-element.js';
+import computeStateDomain from '../../../common/entity/compute_state_domain.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);
diff --git a/src/panels/lovelace/hui-picture-card.js b/src/panels/lovelace/cards/hui-entity-picture-card.js
similarity index 88%
rename from src/panels/lovelace/hui-picture-card.js
rename to src/panels/lovelace/cards/hui-entity-picture-card.js
index 5eb1dbcb10..c40b82f025 100644
--- a/src/panels/lovelace/hui-picture-card.js
+++ b/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 computeDomain from '../../common/entity/compute_domain.js';
-import computeStateDisplay from '../../common/entity/compute_state_display.js';
-import computeStateName from '../../common/entity/compute_state_name.js';
+import { STATES_ON } from '../../../common/const.js';
+import computeDomain from '../../../common/entity/compute_domain.js';
+import computeStateDisplay from '../../../common/entity/compute_state_display.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);
diff --git a/src/panels/lovelace/hui-error-card.js b/src/panels/lovelace/cards/hui-error-card.js
similarity index 100%
rename from src/panels/lovelace/hui-error-card.js
rename to src/panels/lovelace/cards/hui-error-card.js
diff --git a/src/panels/lovelace/hui-glance-card.js b/src/panels/lovelace/cards/hui-glance-card.js
similarity index 89%
rename from src/panels/lovelace/hui-glance-card.js
rename to src/panels/lovelace/cards/hui-glance-card.js
index 74da286b62..599aba8d0b 100644
--- a/src/panels/lovelace/hui-glance-card.js
+++ b/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 computeStateName from '../../common/entity/compute_state_name.js';
+import computeStateDisplay from '../../../common/entity/compute_state_display.js';
+import computeStateName from '../../../common/entity/compute_state_name.js';
-import '../../components/entity/state-badge.js';
-import '../../components/ha-card.js';
+import '../../../components/entity/state-badge.js';
+import '../../../components/ha-card.js';
-import EventsMixin from '../../mixins/events-mixin.js';
-import LocalizeMixin from '../../mixins/localize-mixin.js';
+import EventsMixin from '../../../mixins/events-mixin.js';
+import LocalizeMixin from '../../../mixins/localize-mixin.js';
/*
* @appliesMixin EventsMixin
diff --git a/src/panels/lovelace/hui-history-graph-card.js b/src/panels/lovelace/cards/hui-history-graph-card.js
similarity index 92%
rename from src/panels/lovelace/hui-history-graph-card.js
rename to src/panels/lovelace/cards/hui-history-graph-card.js
index f0568a8712..af4820fa57 100644
--- a/src/panels/lovelace/hui-history-graph-card.js
+++ b/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 {
diff --git a/src/panels/lovelace/cards/hui-markdown-card.js b/src/panels/lovelace/cards/hui-markdown-card.js
new file mode 100644
index 0000000000..8c991c07ed
--- /dev/null
+++ b/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`
+
+
+
+
+ `;
+ }
+
+ 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);
diff --git a/src/panels/lovelace/hui-media-control-card.js b/src/panels/lovelace/cards/hui-media-control-card.js
similarity index 92%
rename from src/panels/lovelace/hui-media-control-card.js
rename to src/panels/lovelace/cards/hui-media-control-card.js
index cbe2178d59..ffc811c3e6 100644
--- a/src/panels/lovelace/hui-media-control-card.js
+++ b/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 {
diff --git a/src/panels/lovelace/hui-picture-glance-card.js b/src/panels/lovelace/cards/hui-picture-glance-card.js
similarity index 90%
rename from src/panels/lovelace/hui-picture-glance-card.js
rename to src/panels/lovelace/cards/hui-picture-glance-card.js
index 5b6dbf217d..7da67341e7 100644
--- a/src/panels/lovelace/hui-picture-glance-card.js
+++ b/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 computeDomain from '../../common/entity/compute_domain.js';
-import computeStateDisplay from '../../common/entity/compute_state_display.js';
-import computeStateName from '../../common/entity/compute_state_name.js';
-import stateIcon from '../../common/entity/state_icon.js';
+import { STATES_ON } from '../../../common/const.js';
+import computeDomain from '../../../common/entity/compute_domain.js';
+import computeStateDisplay from '../../../common/entity/compute_state_display.js';
+import computeStateName from '../../../common/entity/compute_state_name.js';
+import stateIcon from '../../../common/entity/state_icon.js';
-import EventsMixin from '../../mixins/events-mixin.js';
-import LocalizeMixin from '../../mixins/localize-mixin.js';
+import EventsMixin from '../../../mixins/events-mixin.js';
+import LocalizeMixin from '../../../mixins/localize-mixin.js';
const DOMAINS_FORCE_DIALOG = ['binary_sensor', 'device_tracker', 'sensor'];
diff --git a/src/panels/lovelace/hui-plant-status-card.js b/src/panels/lovelace/cards/hui-plant-status-card.js
similarity index 93%
rename from src/panels/lovelace/hui-plant-status-card.js
rename to src/panels/lovelace/cards/hui-plant-status-card.js
index 17b8a9a520..0d9045b454 100644
--- a/src/panels/lovelace/hui-plant-status-card.js
+++ b/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 {
diff --git a/src/panels/lovelace/hui-weather-forecast-card.js b/src/panels/lovelace/cards/hui-weather-forecast-card.js
similarity index 93%
rename from src/panels/lovelace/hui-weather-forecast-card.js
rename to src/panels/lovelace/cards/hui-weather-forecast-card.js
index d259d5537b..a27614c3ec 100644
--- a/src/panels/lovelace/hui-weather-forecast-card.js
+++ b/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 {
diff --git a/src/panels/lovelace/common/compute-card-element.js b/src/panels/lovelace/common/compute-card-element.js
index 9c43f2880f..da0caab0ac 100644
--- a/src/panels/lovelace/common/compute-card-element.js
+++ b/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',
diff --git a/src/panels/lovelace/hui-view.js b/src/panels/lovelace/hui-view.js
index b43255e516..36f2c47a65 100644
--- a/src/panels/lovelace/hui-view.js
+++ b/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';