mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 18:26:35 +00:00
Allow themeing of media control card (#8209)
Co-authored-by: Bram Kragten <mail@bramkragten.nl>
This commit is contained in:
parent
dc5d14834d
commit
a8b27e224f
@ -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;
|
||||
}
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
`;
|
||||
}
|
||||
|
@ -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>
|
||||
`;
|
||||
|
@ -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>
|
||||
`;
|
||||
|
Loading…
x
Reference in New Issue
Block a user