jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 10:16:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Love: Picture elements: Add service button and text state (#1343)

Browse Source 
* Love: Picture elements: Add service button and text state

* Feedback

* Lint

* Separate div.element

* Remove line-height

* New class for state-text

* Add line height
This commit is contained in:
c727 2018-06-27 19:56:19 +02:00 committed by Paulus Schoutsen
parent 584e959f1a
commit 88453733eb
1 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/panels/lovelace/cards/hui-picture-elements-card.js
View File

@ -1,6 +1,7 @@
import { html } from '@polymer/polymer/lib/utils/html-tag.js';
import { PolymerElement } from '@polymer/polymer/polymer-element.js';
import '../../../components/buttons/ha-call-service-button.js';
import '../../../components/entity/state-badge.js';
import '../../../components/ha-card.js';
@ -21,22 +22,30 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
return html`
<style>
ha-card {
line-height: 0;
overflow: hidden;
}
#root {
position: relative;
overflow: hidden;
line-height: 0;
}
#root img {
width: 100%;
}
#root .entity {
.element {
line-height: initial;
white-space: nowrap;
position: absolute;
transform: translate(-50%, -50%);
}
#root .clickable {
.state-text {
padding: 8px;
}
.clickable {
cursor: pointer;
padding: 4px;
}
ha-call-service-button {
color: var(--primary-color);
}
</style>
@ -66,6 +75,7 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
_configChanged(config) {
const root = this.$.root;
this._requiresStateObj = [];
this._requiresTextState = [];
while (root.lastChild) {
root.removeChild(root.lastChild);
@ -80,20 +90,30 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
let el;
if (element.type === 'state-badge') {
const entityId = element.entity;
const stateObj = this.hass.states[entityId];
el = document.createElement('state-badge');
el.stateObj = stateObj;
el.addEventListener('click', () => this._handleClick(entityId, element.action === 'toggle'));
el.classList.add('clickable');
el.title = this._computeTooltip(stateObj);
if (element.style) {
Object.keys(element.style).forEach((prop) => {
el.style.setProperty(prop, element.style[prop]);
});
}
this._requiresStateObj.push({ el, entityId });
} else if (element.type === 'state-text') {
const entityId = element.entity;
el = document.createElement('div');
el.addEventListener('click', () => this._handleClick(entityId, false));
el.classList.add('clickable', 'state-text');
this._requiresTextState.push({ el, entityId });
} else if (element.type === 'service-button') {
el = document.createElement('ha-call-service-button');
el.hass = this.hass;
el.domain = (element.service && element.domain) || 'homeassistant';
el.service = (element.service && element.service.service) || '';
el.serviceData = (element.service && element.service.data) || {};
el.innerText = element.text;
}
el.classList.add('element');
if (element.style) {
Object.keys(element.style).forEach((prop) => {
el.style.setProperty(prop, element.style[prop]);
});
}
el.classList.add('entity');
root.appendChild(el);
});
}
@ -106,6 +126,13 @@ class HuiPictureElementsCard extends LocalizeMixin(EventsMixin(PolymerElement))
el.stateObj = stateObj;
el.title = this._computeTooltip(stateObj);
});
this._requiresTextState.forEach((element) => {
const { el, entityId } = element;
const stateObj = hass.states[entityId];
el.innerText = computeStateDisplay(this.localize, stateObj);
el.title = this._computeTooltip(stateObj);
});
}
_computeTooltip(stateObj) {