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

break theme picker out of lovelace (#12140)

Browse Source
This commit is contained in:
Bram Kragten 2022-03-28 17:21:16 +02:00 committed by GitHub
parent b080bca9ce
commit a44b8981e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
26 changed files with 206 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/ha-selector/ha-selector-location.ts
View File

@ -6,7 +6,6 @@ import type {
LocationSelector,
LocationSelectorValue,
} from "../../data/selector";
import "../../panels/lovelace/components/hui-theme-select-editor";
import type { HomeAssistant } from "../../types";
import type { MarkerLocation } from "../map/ha-locations-editor";
import "../map/ha-locations-editor";

6
src/components/ha-selector/ha-selector-theme.ts
View File

@ -1,4 +1,4 @@
import "../../panels/lovelace/components/hui-theme-select-editor";
import "../ha-theme-picker";
import { html, LitElement } from "lit";
import { customElement, property } from "lit/decorators";
import type { HomeAssistant } from "../../types";
@ -18,11 +18,11 @@ export class HaThemeSelector extends LitElement {
protected render() {
return html`
<hui-theme-select-editor
<ha-theme-picker
.hass=${this.hass}
.value=${this.value}
.label=${this.label}
></hui-theme-select-editor>
></ha-theme-picker>
`;
}
}

22
src/panels/lovelace/components/hui-theme-select-editor.ts → src/components/ha-theme-picker.ts
View File

@ -2,13 +2,13 @@ import "@material/mwc-button";
import "@material/mwc-list/mwc-list-item";
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { customElement, property } from "lit/decorators";
import { fireEvent } from "../../../common/dom/fire_event";
import { stopPropagation } from "../../../common/dom/stop_propagation";
import "../../../components/ha-select";
import { HomeAssistant } from "../../../types";
import { fireEvent } from "../common/dom/fire_event";
import { stopPropagation } from "../common/dom/stop_propagation";
import "./ha-select";
import { HomeAssistant } from "../types";
@customElement("hui-theme-select-editor")
export class HuiThemeSelectEditor extends LitElement {
@customElement("ha-theme-picker")
export class HaThemePicker extends LitElement {
@property() public value?: string;
@property() public label?: string;
@ -19,11 +19,7 @@ export class HuiThemeSelectEditor extends LitElement {
return html`
<ha-select
.label=${this.label ||
`${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`}
this.hass!.localize("ui.components.theme_picker.theme")}
.value=${this.value}
@selected=${this._changed}
@closed=${stopPropagation}
@ -32,7 +28,7 @@ export class HuiThemeSelectEditor extends LitElement {
>
<mwc-list-item value="remove"
>${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.no_theme"
"ui.components.theme_picker.no_theme"
)}</mwc-list-item
>
${Object.keys(this.hass!.themes.themes)
@ -64,6 +60,6 @@ export class HuiThemeSelectEditor extends LitElement {
declare global {
interface HTMLElementTagNameMap {
"hui-theme-select-editor": HuiThemeSelectEditor;
"ha-theme-picker": HaThemePicker;
}
}

1
src/panels/lovelace/editor/config-elements/config-elements-style.ts
View File

@ -23,7 +23,6 @@ export const configElementStyle = css`
.suffix {
margin: 0 8px;
}
hui-theme-select-editor,
hui-action-editor,
ha-select,
ha-textfield,

8
src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts
View File

@ -99,6 +99,14 @@ export class HuiAlarmPanelCardEditor
return this.hass!.localize(`ui.panel.lovelace.editor.card.generic.name`);
}
if (schema.name === "theme") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
return this.hass!.localize(
`ui.panel.lovelace.editor.card.alarm-panel.${
schema.name === "states" ? "available_states" : schema.name

6
src/panels/lovelace/editor/config-elements/hui-area-card-editor.ts
View File

@ -69,6 +69,12 @@ export class HuiAreaCardEditor
private _computeLabelCallback = (schema: HaFormSchema) => {
switch (schema.name) {
case "theme":
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
case "area":
return this.hass!.localize("ui.panel.lovelace.editor.card.area.name");
case "navigation_path":

8
src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
View File

@ -200,6 +200,14 @@ export class HuiButtonCardEditor
)}`;
}
if (schema.name === "theme") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
return this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
);

8
src/panels/lovelace/editor/config-elements/hui-calendar-card-editor.ts
View File

@ -121,6 +121,14 @@ export class HuiCalendarCardEditor
return this.hass!.localize("ui.panel.lovelace.editor.card.generic.title");
}
if (schema.name === "theme") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
return this.hass!.localize(
`ui.panel.lovelace.editor.card.calendar.${schema.name}`
);

11
src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts
View File

@ -31,7 +31,7 @@ import "../../../../components/ha-icon";
import "../../../../components/ha-switch";
import type { HomeAssistant } from "../../../../types";
import type { EntitiesCardConfig } from "../../cards/types";
import "../../components/hui-theme-select-editor";
import "../../../../components/ha-theme-picker";
import { TIMESTAMP_RENDERING_FORMATS } from "../../components/types";
import type { LovelaceRowConfig } from "../../entity-rows/types";
import { headerFooterConfigStructs } from "../../header-footer/structs";
@ -265,12 +265,17 @@ export class HuiEntitiesCardEditor
.configValue=${"title"}
@input=${this._valueChanged}
></ha-textfield>
<hui-theme-select-editor
<ha-theme-picker
.hass=${this.hass}
.value=${this._theme}
.label=${`${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`}
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
></ha-theme-picker>
<div class="side-by-side">
<ha-formfield
.label=${this.hass.localize(

8
src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
View File

@ -112,6 +112,14 @@ export class HuiEntityCardEditor
);
}
if (schema.name === "theme") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
return this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
);

6
src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts
View File

@ -172,6 +172,12 @@ export class HuiGaugeCardEditor
return this.hass!.localize(
"ui.panel.lovelace.editor.card.gauge.needle_gauge"
);
case "theme":
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
return (
this.hass!.localize(

22
src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts
View File

@ -117,11 +117,23 @@ export class HuiGlanceCardEditor
fireEvent(this, "config-changed", { config });
}
private _computeLabelCallback = (schema: HaFormSchema) =>
this.hass!.localize(
`ui.panel.lovelace.editor.card.glance.${schema.name}`
) ||
this.hass!.localize(`ui.panel.lovelace.editor.card.generic.${schema.name}`);
private _computeLabelCallback = (schema: HaFormSchema) => {
if (schema.name === "theme") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
return (
this.hass!.localize(
`ui.panel.lovelace.editor.card.glance.${schema.name}`
) ||
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
)
);
};
}
declare global {

8
src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
View File

@ -75,6 +75,14 @@ export class HuiHumidifierCardEditor
);
}
if (schema.name === "theme") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
return this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
);

8
src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts
View File

@ -179,6 +179,14 @@ export class HuiLightCardEditor
);
}
if (schema.name === "theme") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
return this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
);

23
src/panels/lovelace/editor/config-elements/hui-logbook-card-editor.ts
View File

@ -96,11 +96,24 @@ export class HuiLogbookCardEditor
fireEvent(this, "config-changed", { config: ev.detail.value });
}
private _computeLabelCallback = (schema: HaFormSchema) =>
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
) ||
this.hass!.localize(`ui.panel.lovelace.editor.card.logbook.${schema.name}`);
private _computeLabelCallback = (schema: HaFormSchema) => {
if (schema.name === "theme") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
return (
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
) ||
this.hass!.localize(
`ui.panel.lovelace.editor.card.logbook.${schema.name}`
)
);
};
}
declare global {

22
src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts
View File

@ -58,13 +58,23 @@ export class HuiMarkdownCardEditor
fireEvent(this, "config-changed", { config: ev.detail.value });
}
private _computeLabelCallback = (schema: HaFormSchema) =>
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
) ||
this.hass!.localize(
`ui.panel.lovelace.editor.card.markdown.${schema.name}`
private _computeLabelCallback = (schema: HaFormSchema) => {
if (schema.name === "theme") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
return (
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
) ||
this.hass!.localize(
`ui.panel.lovelace.editor.card.markdown.${schema.name}`
)
);
};
}
declare global {

11
src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts
View File

@ -5,7 +5,7 @@ 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 "../../../../components/ha-theme-picker";
import { LovelaceCardEditor } from "../../types";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { EditorTarget, EntitiesEditorEvent } from "../types";
@ -62,12 +62,17 @@ export class HuiMediaControlCardEditor
@change=${this._valueChanged}
allow-custom-entity
></ha-entity-picker>
<hui-theme-select-editor
<ha-theme-picker
.label=${`${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`}
.hass=${this.hass}
.value=${this._theme}
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
></ha-theme-picker>
</div>
`;
}

11
src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts
View File

@ -6,7 +6,7 @@ import { ActionConfig } from "../../../../data/lovelace";
import { HomeAssistant } from "../../../../types";
import { PictureCardConfig } from "../../cards/types";
import "../../components/hui-action-editor";
import "../../components/hui-theme-select-editor";
import "../../../../components/ha-theme-picker";
import { LovelaceCardEditor } from "../../types";
import { actionConfigStruct } from "../structs/action-struct";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
@ -72,12 +72,17 @@ export class HuiPictureCardEditor
.configValue=${"image"}
@input=${this._valueChanged}
></ha-textfield>
<hui-theme-select-editor
<ha-theme-picker
.hass=${this.hass}
.value=${this._theme}
.label=${`${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`}
.configValue=${"theme"}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
></ha-theme-picker>
<hui-action-editor
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.generic.tap_action"

8
src/panels/lovelace/editor/config-elements/hui-picture-entity-card-editor.ts
View File

@ -170,6 +170,14 @@ export class HuiPictureEntityCardEditor
);
}
if (schema.name === "theme") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
return (
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`

8
src/panels/lovelace/editor/config-elements/hui-picture-glance-card-editor.ts
View File

@ -165,6 +165,14 @@ export class HuiPictureGlanceCardEditor
);
}
if (schema.name === "theme") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
return (
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`

8
src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts
View File

@ -64,7 +64,13 @@ export class HuiPlantStatusCardEditor
"ui.panel.lovelace.editor.card.generic.entity"
);
}
if (schema.name === "theme") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
return this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
);

8
src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
View File

@ -153,6 +153,14 @@ export class HuiSensorCardEditor
);
}
if (schema.name === "theme") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
if (schema.name === "detail") {
return this.hass!.localize(
"ui.panel.lovelace.editor.card.sensor.show_more_detail"

11
src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts
View File

@ -6,7 +6,7 @@ import { isComponentLoaded } from "../../../../common/config/is_component_loaded
import { fireEvent } from "../../../../common/dom/fire_event";
import { HomeAssistant } from "../../../../types";
import { ShoppingListCardConfig } from "../../cards/types";
import "../../components/hui-theme-select-editor";
import "../../../../components/ha-theme-picker";
import { LovelaceCardEditor } from "../../types";
import { baseLovelaceCardConfig } from "../structs/base-card-struct";
import { EditorTarget, EntitiesEditorEvent } from "../types";
@ -67,12 +67,17 @@ export class HuiShoppingListEditor
.configValue=${"title"}
@input=${this._valueChanged}
></ha-textfield>
<hui-theme-select-editor
<ha-theme-picker
.hass=${this.hass}
.value=${this._theme}
.configValue=${"theme"}
.label=${`${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`}
@value-changed=${this._valueChanged}
></hui-theme-select-editor>
></ha-theme-picker>
</div>
`;
}

8
src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
View File

@ -71,6 +71,14 @@ export class HuiThermostatCardEditor
);
}
if (schema.name === "theme") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
return this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`
);

8
src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts
View File

@ -184,6 +184,14 @@ export class HuiWeatherForecastCardEditor
)})`;
}
if (schema.name === "theme") {
return `${this.hass!.localize(
"ui.panel.lovelace.editor.card.generic.theme"
)} (${this.hass!.localize(
"ui.panel.lovelace.editor.card.config.optional"
)})`;
}
return (
this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.${schema.name}`

5
src/translations/en.json
View File

@ -401,6 +401,10 @@
"add_device_id": "Choose device",
"add_entity_id": "Choose entity"
},
"theme-picker": {
"theme": "Theme",
"no_theme": "No theme"
},
"user-picker": {
"no_user": "No user",
"add_user": "Add user",
@ -3458,7 +3462,6 @@
"tap_action": "Tap Action",
"title": "Title",
"theme": "Theme",
"no_theme": "No theme",
"unit": "Unit",
"url": "URL",
"state": "State",