jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 03:06:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add entity_picture capability to plant card (#1145)

Browse Source 
* Add entity_picture support to plant card

* Align font size with camera card
This commit is contained in:
PeteBa 2018-05-25 23:26:47 +01:00 committed by Paulus Schoutsen
parent d3c10d9b49
commit f4c36e37bb
1 changed files with 39 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/cards/ha-plant-card.js
View File

@ -11,10 +11,38 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
static get template() { static get template() {
return html` return html`
<style> <style>
.banner {
display: flex;
align-items: flex-end;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
padding-top: 12px;
}
.has-plant-image .banner {
padding-top: 30%;
}
.header {
@apply --paper-font-headline;
line-height: 40px;
padding: 8px 16px;
}
.has-plant-image .header {
font-size: 16px;
font-weight: 500;
line-height: 16px;
padding: 16px;
color: white;
width: 100%;
background:rgba(0, 0, 0, var(--dark-secondary-opacity));
}
.content { .content {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
padding: 0 32px 24px 32px; padding: 16px 32px 24px 32px;
}
.has-plant-image .content {
padding-bottom: 16px;
} }
iron-icon { iron-icon {
color: var(--paper-item-icon-color); color: var(--paper-item-icon-color);
@ -35,12 +63,15 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
} }
</style> </style>
<ha-card header="[[computeTitle(stateObj)]]"> <ha-card class$="[[computeImageClass(stateObj.attributes.entity_picture)]]">
<div class="banner" style="background-image:url([[stateObj.attributes.entity_picture]])">
<div class="header">[[computeTitle(stateObj)]]</div>
</div>
<div class="content"> <div class="content">
<template is="dom-repeat" items="[[computeAttributes(stateObj.attributes)]]"> <template is="dom-repeat" items="[[computeAttributes(stateObj.attributes)]]">
<div class="attributes" on-click="attributeClicked"> <div class="attributes" on-click="attributeClicked">
<div><iron-icon icon="[[computeIcon(item, stateObj.attributes.battery)]]"></iron-icon></div> <div><iron-icon icon="[[computeIcon(item, stateObj.attributes.battery)]]"></iron-icon></div>
<div class\$="[[computeClass(stateObj.attributes.problem, item)]]"> <div class$="[[computeAttributeClass(stateObj.attributes.problem, item)]]">
[[computeValue(stateObj.attributes, item)]] [[computeValue(stateObj.attributes, item)]]
</div> </div>
<div class="uom">[[computeUom(stateObj.attributes.unit_of_measurement_dict, item)]]</div> <div class="uom">[[computeUom(stateObj.attributes.unit_of_measurement_dict, item)]]</div>
@ -97,10 +128,14 @@ class HaPlantCard extends EventsMixin(PolymerElement) {
return dict[attr] || ''; return dict[attr] || '';
} }
computeClass(problem, attr) { computeAttributeClass(problem, attr) {
return problem.indexOf(attr) === -1 ? '' : 'problem'; return problem.indexOf(attr) === -1 ? '' : 'problem';
} }
computeImageClass(entityPicture) {
return entityPicture ? 'has-plant-image' : '';
}
attributeClicked(ev) { attributeClicked(ev) {
this.fire('hass-more-info', { entityId: this.stateObj.attributes.sensors[ev.model.item] }); this.fire('hass-more-info', { entityId: this.stateObj.attributes.sensors[ev.model.item] });
} }