diff --git a/gallery/src/demos/demo-hui-entities-card.js b/gallery/src/demos/demo-hui-entities-card.js index 44f38fa4f5..e47232f937 100644 --- a/gallery/src/demos/demo-hui-entities-card.js +++ b/gallery/src/demos/demo-hui-entities-card.js @@ -121,6 +121,11 @@ const CONFIGS = [ url: http://google.com/ icon: mdi:google name: Google + - type: divider + - type: divider + style: + height: 16px + background: center / contain url("https://d33wubrfki0l68.cloudfront.net/075995fe17a5351e2699b2dd878652ec4f1d8654/8bfdd/demo/favicon-192x192.png") ` }, ]; diff --git a/src/panels/lovelace/common/create-row-element.js b/src/panels/lovelace/common/create-row-element.js index 1621edaa5a..32a8a65cc0 100644 --- a/src/panels/lovelace/common/create-row-element.js +++ b/src/panels/lovelace/common/create-row-element.js @@ -11,12 +11,14 @@ import '../entity-rows/hui-text-entity-row.js'; import '../entity-rows/hui-timer-entity-row.js'; import '../entity-rows/hui-toggle-entity-row.js'; +import '../special-rows/hui-divider-row.js'; import '../special-rows/hui-weblink-row.js'; import createErrorCardConfig from './create-error-card-config.js'; const CUSTOM_TYPE_PREFIX = 'custom:'; const SPECIAL_TYPES = new Set([ + 'divider', 'weblink' ]); const DOMAIN_TO_ELEMENT_TYPE = { diff --git a/src/panels/lovelace/special-rows/hui-divider-row.js b/src/panels/lovelace/special-rows/hui-divider-row.js new file mode 100644 index 0000000000..404c1dd532 --- /dev/null +++ b/src/panels/lovelace/special-rows/hui-divider-row.js @@ -0,0 +1,43 @@ +import { html } from '@polymer/polymer/lib/utils/html-tag.js'; +import { PolymerElement } from '@polymer/polymer/polymer-element.js'; + +class HuiDividerRow extends PolymerElement { + static get template() { + return html``; + } + + setConfig(config) { + if (!config) { + throw new Error('Error in card configuration.'); + } + this._config = config; + this._createDivider(); + } + + ready() { + super.ready(); + this._createDivider(); + } + + _createDivider() { + const root = this.shadowRoot; + if (root === null) return; + + while (root.lastChild) { + root.removeChild(root.lastChild); + } + + const style = this._config.style || { + height: '1px', + 'background-color': 'var(--secondary-text-color)' + }; + + const el = document.createElement('div'); + Object.keys(style).forEach((prop) => { + el.style.setProperty(prop, style[prop]); + }); + + root.appendChild(el); + } +} +customElements.define('hui-divider-row', HuiDividerRow);