From 0cb05255161f55f71a3521e8e79a2febff72b526 Mon Sep 17 00:00:00 2001 From: Timmo Date: Mon, 7 Oct 2019 19:17:12 +0100 Subject: [PATCH] Add localized names to card editor (#3941) * :hammer: Add localized names to card editor * :pencil2: Rename alarm_panel to alarm-panel * :pencil2: Proper case * :hammer: Move to else * :hammer: Remove name and object from card picker --- .../editor/card-editor/hui-card-picker.ts | 58 +++++++++--------- .../card-editor/hui-dialog-edit-card.ts | 13 +++- .../hui-alarm-panel-card-editor.ts | 2 +- src/translations/en.json | 60 ++++++++++++++++++- 4 files changed, 102 insertions(+), 31 deletions(-) diff --git a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts index 33422e952d..cef6d82bec 100644 --- a/src/panels/lovelace/editor/card-editor/hui-card-picker.ts +++ b/src/panels/lovelace/editor/card-editor/hui-card-picker.ts @@ -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")}
- ${cards.map((card) => { + ${cards.map((card: string) => { return html` - - ${card.name} + + ${this.hass!.localize( + `ui.panel.lovelace.editor.card.${card}.name` + )} `; })} diff --git a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts index b45655f4f4..68fdda58ae 100644 --- a/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts +++ b/src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts @@ -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`

- ${this.hass!.localize("ui.panel.lovelace.editor.edit_card.header")} + ${heading}

${this._cardConfig === undefined diff --git a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts index 1ebe526ef5..4a4e2c7d67 100644 --- a/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts +++ b/src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts @@ -101,7 +101,7 @@ export class HuiAlarmPanelCardEditor extends LitElement })} diff --git a/src/translations/en.json b/src/translations/en.json index c21025b4e6..5e082f51f2 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -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" } } },