jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-04-24 13:27:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding Theme option to Glance and Button Cards (#1783)

Browse Source 
* Adding Theme option to Glance and Button Cards

* Updateing Theme default to `default`

* Prettier Update
This commit is contained in:
Zack Arnett 2018-10-17 14:20:05 -04:00 committed by Paulus Schoutsen
parent 2ace2165e0
commit 1f642f436a
2 changed files with 13 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/panels/lovelace/cards/hui-entity-button-card.ts
View File

@ -1,4 +1,4 @@
import { html, LitElement } from "@polymer/lit-element";
import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
import { fireEvent } from "../../../common/dom/fire_event.js";
import "../../../components/ha-card.js";
@ -8,6 +8,7 @@ import isValidEntityId from "../../../common/entity/valid_entity_id.js";
import stateIcon from "../../../common/entity/state_icon.js";
import computeStateDomain from "../../../common/entity/compute_state_domain.js";
import computeStateName from "../../../common/entity/compute_state_name.js";
import applyThemesOnElement from "../../../common/dom/apply_themes_on_element.js";
import { styleMap } from "lit-html/directives/styleMap.js";
import { HomeAssistant } from "../../../types.js";
import { HassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
@ -17,17 +18,18 @@ interface Config extends LovelaceConfig {
entity: string;
name?: string;
icon?: string;
theme?: string;
tap_action?: "toggle" | "call-service" | "more-info";
service?: string;
service_data?: object;
}
export class HuiEntityButtonCard extends HassLocalizeLitMixin(LitElement)
class HuiEntityButtonCard extends HassLocalizeLitMixin(LitElement)
implements LovelaceCard {
protected hass?: HomeAssistant;
protected config?: Config;
static get properties() {
static get properties(): PropertyDeclarations {
return {
hass: {},
config: {},
@ -43,7 +45,7 @@ export class HuiEntityButtonCard extends HassLocalizeLitMixin(LitElement)
throw new Error("Invalid Entity");
}
this.config = config;
this.config = { theme: "default", ...config };
if (this.hass) {
this.requestUpdate();
@ -56,6 +58,8 @@ export class HuiEntityButtonCard extends HassLocalizeLitMixin(LitElement)
}
const stateObj = this.hass!.states[this.config.entity];
applyThemesOnElement(this, this.hass!.themes, this.config.theme);
return html`
${this.renderStyle()}
<ha-card @click="${this.handleClick}">

19
src/panels/lovelace/cards/hui-glance-card.ts
View File

@ -5,6 +5,7 @@ import { repeat } from "lit-html/directives/repeat";
import computeStateDisplay from "../../../common/entity/compute_state_display.js";
import computeStateName from "../../../common/entity/compute_state_name.js";
import processConfigEntities from "../common/process-config-entities";
import applyThemesOnElement from "../../../common/dom/apply_themes_on_element.js";
import toggleEntity from "../common/entity/toggle-entity.js";
@ -31,7 +32,7 @@ interface Config extends LovelaceConfig {
show_state?: boolean;
title?: string;
column_width?: string;
theming?: "primary";
theme?: string;
entities: EntityConfig[];
}
@ -53,7 +54,7 @@ export class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
}
public setConfig(config: Config) {
this.config = config;
this.config = { theme: "default", ...config };
const entities = processConfigEntities(config.entities);
for (const entity of entities) {
@ -69,13 +70,6 @@ export class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
config.column_width || "20%"
);
if (config.theming) {
if (typeof config.theming !== "string") {
throw new Error("Incorrect theming config.");
}
this.classList.add(`theme-${config.theming}`);
}
this.configEntities = entities;
if (this.hass) {
@ -93,6 +87,8 @@ export class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
(conf) => conf.entity in states
);
applyThemesOnElement(this, this.hass!.themes, this.config.theme);
return html`
${this.renderStyle()}
<ha-card .header="${title}">
@ -110,11 +106,6 @@ export class HuiGlanceCard extends HassLocalizeLitMixin(LitElement)
private renderStyle() {
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;