Allow themeing of media control card (#8209)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
Philip Allgaier 2021-01-25 20:00:50 +01:00 committed by GitHub
parent dc5d14834d
commit a8b27e224f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 29 additions and 13 deletions

View File

@ -332,7 +332,7 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
protected updated(changedProps: PropertyValues): void {
super.updated(changedProps);
if (!this._config || !this.hass || !changedProps.has("hass")) {
if (!this._config || !this.hass || (!changedProps.has("_config") && !changedProps.has("hass"))) {
return;
}

View File

@ -37,6 +37,7 @@ export interface EmptyStateCardConfig extends LovelaceCardConfig {
export interface EntityCardConfig extends LovelaceCardConfig {
attribute?: string;
unit?: string;
theme?: string;
}
export interface EntitiesCardEntityConfig extends EntityConfig {
@ -174,6 +175,7 @@ export interface LogbookCardConfig extends LovelaceCardConfig {
entities: string[];
title?: string;
hours_to_show?: number;
theme?: string;
}
export interface MapCardConfig extends LovelaceCardConfig {
@ -198,6 +200,7 @@ export interface MarkdownCardConfig extends LovelaceCardConfig {
export interface MediaControlCardConfig extends LovelaceCardConfig {
entity: string;
theme?: string;
}
export interface HistoryGraphCardConfig extends LovelaceCardConfig {
@ -311,4 +314,5 @@ export interface WeatherForecastCardConfig extends LovelaceCardConfig {
name?: string;
show_forecast?: boolean;
secondary_info_attribute?: string;
theme?: string;
}

View File

@ -11,12 +11,14 @@ import { fireEvent } from "../../../../common/dom/fire_event";
import "../../../../components/entity/ha-entity-picker";
import { HomeAssistant } from "../../../../types";
import { MediaControlCardConfig } from "../../cards/types";
import "../../components/hui-theme-select-editor";
import { LovelaceCardEditor } from "../../types";
import { EditorTarget, EntitiesEditorEvent } from "../types";
const cardConfigStruct = object({
type: string(),
entity: optional(string()),
theme: optional(string()),
});
const includeDomains = ["media_player"];
@ -37,6 +39,10 @@ export class HuiMediaControlCardEditor extends LitElement
return this._config!.entity || "";
}
get _theme(): string {
return this._config!.theme || "";
}
protected render(): TemplateResult {
if (!this.hass || !this._config) {
return html``;
@ -57,6 +63,12 @@ export class HuiMediaControlCardEditor extends LitElement
@change="${this._valueChanged}"
allow-custom-entity
></ha-entity-picker>
<hui-theme-select-editor
.hass=${this.hass}
.value=${this._theme}
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
</div>
`;
}

View File

@ -74,6 +74,12 @@ export class HuiPictureCardEditor extends LitElement
.configValue="${"image"}"
@value-changed="${this._valueChanged}"
></paper-input>
<hui-theme-select-editor
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@value-changed="${this._valueChanged}"
></hui-theme-select-editor>
<div class="side-by-side">
<hui-action-editor
.label="${this.hass.localize(
@ -99,12 +105,6 @@ export class HuiPictureCardEditor extends LitElement
.configValue="${"hold_action"}"
@value-changed="${this._valueChanged}"
></hui-action-editor>
<hui-theme-select-editor
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@value-changed="${this._valueChanged}"
></hui-theme-select-editor>
</div>
</div>
`;

View File

@ -215,6 +215,12 @@ export class HuiPictureEntityCardEditor extends LitElement
></ha-formfield>
</div>
</div>
<hui-theme-select-editor
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@value-changed="${this._valueChanged}"
></hui-theme-select-editor>
<div class="side-by-side">
<hui-action-editor
.label="${this.hass.localize(
@ -240,12 +246,6 @@ export class HuiPictureEntityCardEditor extends LitElement
.configValue="${"hold_action"}"
@value-changed="${this._valueChanged}"
></hui-action-editor>
<hui-theme-select-editor
.hass=${this.hass}
.value="${this._theme}"
.configValue="${"theme"}"
@value-changed="${this._valueChanged}"
></hui-theme-select-editor>
</div>
</div>
`;