Lovelace: Allow glance card to assume theme colors (#1732)

* Allow glance card to assume theme colors

* Better configuration options

* Added example to gallery

* Fixing problems from review
This commit is contained in:
Thomas Lovén 2018-10-05 10:26:31 +02:00 committed by Paulus Schoutsen
parent 2eb3a55f59
commit 362e758c40
2 changed files with 28 additions and 0 deletions

View File

@ -142,6 +142,21 @@ const CONFIGS = [
- light.kitchen_lights
`
},
{
heading: 'Primary theme',
config: `
- type: glance
theming: primary
entities:
- device_tracker.demo_paulus
- media_player.living_room
- sun.sun
- cover.kitchen_window
- light.kitchen_lights
- lock.kitchen_door
- light.ceiling_lights
`
},
];
class DemoPicEntity extends PolymerElement {

View File

@ -22,6 +22,11 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
static get template() {
return html`
<style>
:host(.theme-primary) {
--paper-card-background-color:var(--primary-color);
--paper-item-icon-color:var(--text-primary-color);
color:var(--text-primary-color);
}
.entities {
display: flex;
padding: 0 16px 4px;
@ -90,6 +95,14 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
setConfig(config) {
this._config = config;
this.updateStyles({ '--glance-column-width': (config && config.column_width) || '20%' });
if (config && config.theming) {
if (typeof (config.theming) !== 'string') {
throw new Error('Incorrect theming config.');
}
this.classList.add(`theme-${config.theming}`);
}
this._configEntities = processConfigEntities(config.entities);
}