mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-08 09:56:36 +00:00
Add navigation_path to picture-glance (#1397)
* Add navigation_path to picture-glance * Lint
This commit is contained in:
parent
d299166f2a
commit
5cccf4836f
@ -14,12 +14,14 @@ import toggleEntity from '../common/entity/toggle-entity.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';
|
||||||
|
import NavigateMixin from '../../../mixins/navigate-mixin.js';
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* @appliesMixin EventsMixin
|
* @appliesMixin EventsMixin
|
||||||
* @appliesMixin LocalizeMixin
|
* @appliesMixin LocalizeMixin
|
||||||
|
* @appliesMixin NavigateMixin
|
||||||
*/
|
*/
|
||||||
class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
class HuiPictureGlanceCard extends NavigateMixin(LocalizeMixin(EventsMixin(PolymerElement))) {
|
||||||
static get template() {
|
static get template() {
|
||||||
return html`
|
return html`
|
||||||
<style>
|
<style>
|
||||||
@ -28,6 +30,9 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||||||
min-height: 48px;
|
min-height: 48px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
hui-image.clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
.box {
|
.box {
|
||||||
@apply --paper-font-common-nowrap;
|
@apply --paper-font-common-nowrap;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -57,9 +62,11 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||||||
</style>
|
</style>
|
||||||
|
|
||||||
<ha-card>
|
<ha-card>
|
||||||
<hui-image
|
<hui-image
|
||||||
hass="[[hass]]"
|
class$='[[_computeImageClass(_config)]]'
|
||||||
image="[[_config.image]]"
|
on-click='_handleImageClick'
|
||||||
|
hass="[[hass]]"
|
||||||
|
image="[[_config.image]]"
|
||||||
state-image="[[_config.state_image]]"
|
state-image="[[_config.state_image]]"
|
||||||
camera-image="[[_config.camera_image]]"
|
camera-image="[[_config.camera_image]]"
|
||||||
entity="[[_config.entity]]"
|
entity="[[_config.entity]]"
|
||||||
@ -71,7 +78,7 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||||||
<template is="dom-if" if="[[_showEntity(item, hass.states)]]">
|
<template is="dom-if" if="[[_showEntity(item, hass.states)]]">
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
on-click="_openDialog"
|
on-click="_openDialog"
|
||||||
class$="[[_computeClass(item, hass.states)]]"
|
class$="[[_computeButtonClass(item, hass.states)]]"
|
||||||
icon="[[_computeIcon(item, hass.states)]]"
|
icon="[[_computeIcon(item, hass.states)]]"
|
||||||
title="[[_computeTooltip(item, hass.states)]]"
|
title="[[_computeTooltip(item, hass.states)]]"
|
||||||
></paper-icon-button>
|
></paper-icon-button>
|
||||||
@ -83,7 +90,7 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||||||
<template is="dom-if" if="[[_showEntity(item, hass.states)]]">
|
<template is="dom-if" if="[[_showEntity(item, hass.states)]]">
|
||||||
<paper-icon-button
|
<paper-icon-button
|
||||||
on-click="_callService"
|
on-click="_callService"
|
||||||
class$="[[_computeClass(item, hass.states)]]"
|
class$="[[_computeButtonClass(item, hass.states)]]"
|
||||||
icon="[[_computeIcon(item, hass.states)]]"
|
icon="[[_computeIcon(item, hass.states)]]"
|
||||||
title="[[_computeTooltip(item, hass.states)]]"
|
title="[[_computeTooltip(item, hass.states)]]"
|
||||||
></paper-icon-button>
|
></paper-icon-button>
|
||||||
@ -150,7 +157,7 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||||||
return stateIcon(states[entityId]);
|
return stateIcon(states[entityId]);
|
||||||
}
|
}
|
||||||
|
|
||||||
_computeClass(entityId, states) {
|
_computeButtonClass(entityId, states) {
|
||||||
return STATES_OFF.includes(states[entityId].state) ? '' : 'state-on';
|
return STATES_OFF.includes(states[entityId].state) ? '' : 'state-on';
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -158,6 +165,10 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||||||
return `${computeStateName(states[entityId])}: ${computeStateDisplay(this.localize, states[entityId])}`;
|
return `${computeStateName(states[entityId])}: ${computeStateDisplay(this.localize, states[entityId])}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_computeImageClass(config) {
|
||||||
|
return config.navigation_path ? 'clickable' : '';
|
||||||
|
}
|
||||||
|
|
||||||
_openDialog(ev) {
|
_openDialog(ev) {
|
||||||
this.fire('hass-more-info', { entityId: ev.model.item });
|
this.fire('hass-more-info', { entityId: ev.model.item });
|
||||||
}
|
}
|
||||||
@ -166,6 +177,11 @@ class HuiPictureGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||||||
const entityId = ev.model.item;
|
const entityId = ev.model.item;
|
||||||
toggleEntity(this.hass, entityId);
|
toggleEntity(this.hass, entityId);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
_handleImageClick() {
|
||||||
|
if (!this._config.navigation_path) return;
|
||||||
|
this.navigate(this._config.navigation_path);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
customElements.define('hui-picture-glance-card', HuiPictureGlanceCard);
|
customElements.define('hui-picture-glance-card', HuiPictureGlanceCard);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user