mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-22 08:46:35 +00:00
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:
parent
2eb3a55f59
commit
362e758c40
@ -142,6 +142,21 @@ const CONFIGS = [
|
|||||||
- light.kitchen_lights
|
- 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 {
|
class DemoPicEntity extends PolymerElement {
|
||||||
|
@ -22,6 +22,11 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||||||
static get template() {
|
static get template() {
|
||||||
return html`
|
return html`
|
||||||
<style>
|
<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 {
|
.entities {
|
||||||
display: flex;
|
display: flex;
|
||||||
padding: 0 16px 4px;
|
padding: 0 16px 4px;
|
||||||
@ -90,6 +95,14 @@ class HuiGlanceCard extends LocalizeMixin(EventsMixin(PolymerElement)) {
|
|||||||
setConfig(config) {
|
setConfig(config) {
|
||||||
this._config = config;
|
this._config = config;
|
||||||
this.updateStyles({ '--glance-column-width': (config && config.column_width) || '20%' });
|
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);
|
this._configEntities = processConfigEntities(config.entities);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user