Add localized names to card editor (#3941)

* 🔨 Add localized names to card editor

* ✏️ Rename alarm_panel to alarm-panel

* ✏️ Proper case

* 🔨 Move to else

* 🔨 Remove name and object from card picker
This commit is contained in:
Timmo 2019-10-07 19:17:12 +01:00 committed by Bram Kragten
parent dcaf4fdfe2
commit 0cb0525516
4 changed files with 102 additions and 31 deletions

View File

@ -14,31 +14,31 @@ import { getCardElementTag } from "../../common/get-card-element-tag";
import { CardPickTarget } from "../types";
import { fireEvent } from "../../../../common/dom/fire_event";
const cards = [
{ name: "Alarm panel", type: "alarm-panel" },
{ name: "Conditional", type: "conditional" },
{ name: "Entities", type: "entities" },
{ name: "Entity Button", type: "entity-button" },
{ name: "Entity Filter", type: "entity-filter" },
{ name: "Gauge", type: "gauge" },
{ name: "Glance", type: "glance" },
{ name: "History Graph", type: "history-graph" },
{ name: "Horizontal Stack", type: "horizontal-stack" },
{ name: "iFrame", type: "iframe" },
{ name: "Light", type: "light" },
{ name: "Map", type: "map" },
{ name: "Markdown", type: "markdown" },
{ name: "Media Control", type: "media-control" },
{ name: "Picture", type: "picture" },
{ name: "Picture Elements", type: "picture-elements" },
{ name: "Picture Entity", type: "picture-entity" },
{ name: "Picture Glance", type: "picture-glance" },
{ name: "Plant Status", type: "plant-status" },
{ name: "Sensor", type: "sensor" },
{ name: "Shopping List", type: "shopping-list" },
{ name: "Thermostat", type: "thermostat" },
{ name: "Vertical Stack", type: "vertical-stack" },
{ name: "Weather Forecast", type: "weather-forecast" },
const cards: string[] = [
"alarm-panel",
"conditional",
"entities",
"entity-button",
"entity-filter",
"gauge",
"glance",
"history-graph",
"horizontal-stack",
"iframe",
"light",
"map",
"markdown",
"media-control",
"picture",
"picture-elements",
"picture-entity",
"picture-glance",
"plant-status",
"sensor",
"shopping-list",
"thermostat",
"vertical-stack",
"weather-forecast",
];
@customElement("hui-card-picker")
@ -53,10 +53,12 @@ export class HuiCardPicker extends LitElement {
${this.hass!.localize("ui.panel.lovelace.editor.edit_card.pick_card")}
</h3>
<div class="cards-container">
${cards.map((card) => {
${cards.map((card: string) => {
return html`
<mwc-button @click="${this._cardPicked}" .type="${card.type}">
${card.name}
<mwc-button @click="${this._cardPicked}" .type="${card}">
${this.hass!.localize(
`ui.panel.lovelace.editor.card.${card}.name`
)}
</mwc-button>
`;
})}

View File

@ -62,10 +62,21 @@ export class HuiDialogEditCard extends LitElement {
return html``;
}
let heading: string;
if (this._cardConfig && this._cardConfig.type) {
heading = `${this.hass!.localize(
`ui.panel.lovelace.editor.card.${this._cardConfig.type}.name`
)} ${this.hass!.localize("ui.panel.lovelace.editor.edit_card.header")}`;
} else {
heading = this.hass!.localize(
"ui.panel.lovelace.editor.edit_card.header"
);
}
return html`
<ha-paper-dialog with-backdrop opened modal>
<h2>
${this.hass!.localize("ui.panel.lovelace.editor.edit_card.header")}
${heading}
</h2>
<paper-dialog-scrollable>
${this._cardConfig === undefined

View File

@ -101,7 +101,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
})}
<paper-dropdown-menu
.label="${this.hass.localize(
"ui.panel.lovelace.editor.card.alarm_panel.available_states"
"ui.panel.lovelace.editor.card.alarm-panel.available_states"
)}"
@value-changed="${this._stateAdded}"
>

View File

@ -1382,17 +1382,29 @@
"migrate": "Migrate config"
},
"card": {
"alarm_panel": {
"alarm-panel": {
"name": "Alarm Panel",
"available_states": "Available States"
},
"conditional": {
"name": "Conditional"
},
"config": {
"required": "Required",
"optional": "Optional"
},
"entities": {
"name": "Entities",
"show_header_toggle": "Show Header Toggle?"
},
"entity-button": {
"name": "Entity Button"
},
"entity-filter": {
"name": "Entity Filter"
},
"gauge": {
"name": "Gauge",
"severity": {
"define": "Define Severity?",
"green": "Green",
@ -1401,8 +1413,21 @@
}
},
"glance": {
"name": "Glance",
"columns": "Columns"
},
"history-graph": {
"name": "History Graph"
},
"horizontal-stack": {
"name": "Horizontal Stack"
},
"iframe": {
"name": "iFrame"
},
"light": {
"name": "Light"
},
"generic": {
"aspect_ratio": "Aspect Ratio",
"camera_image": "Camera Entity",
@ -1428,17 +1453,50 @@
"url": "Url"
},
"map": {
"name": "Map",
"geo_location_sources": "Geolocation Sources",
"dark_mode": "Dark Mode?",
"default_zoom": "Default Zoom",
"source": "Source"
},
"markdown": {
"name": "Markdown",
"content": "Content"
},
"media-control": {
"name": "Media Control"
},
"picture": {
"name": "Picture"
},
"picture-elements": {
"name": "Picture Elements"
},
"picture-entity": {
"name": "Picture Entity"
},
"picture-glance": {
"name": "Picture Glance"
},
"plant-status": {
"name": "Plant Status"
},
"sensor": {
"name": "Sensor",
"graph_detail": "Graph Detail",
"graph_type": "Graph Type"
},
"shopping-list": {
"name": "Shopping List"
},
"thermostat": {
"name": "Thermostat"
},
"vertical-stack": {
"name": "Vertical Stack"
},
"weather-forecast": {
"name": "Weather Forecast"
}
}
},