diff --git a/src/panels/config/dashboard/ha-config-dashboard.js b/src/panels/config/dashboard/ha-config-dashboard.js deleted file mode 100644 index 3b827450c5..0000000000 --- a/src/panels/config/dashboard/ha-config-dashboard.js +++ /dev/null @@ -1,153 +0,0 @@ -import "@polymer/app-layout/app-header-layout/app-header-layout"; -import "@polymer/app-layout/app-header/app-header"; -import "@polymer/app-layout/app-toolbar/app-toolbar"; -import "@polymer/iron-icon/iron-icon"; -import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-item/paper-item"; -import { html } from "@polymer/polymer/lib/utils/html-tag"; -import { PolymerElement } from "@polymer/polymer/polymer-element"; - -import "../../../components/ha-card"; -import "../../../components/ha-menu-button"; -import "../../../components/ha-icon-next"; - -import "../ha-config-section"; -import "./ha-config-navigation"; - -import { isComponentLoaded } from "../../../common/config/is_component_loaded"; -import LocalizeMixin from "../../../mixins/localize-mixin"; -import NavigateMixin from "../../../mixins/navigate-mixin"; - -/* - * @appliesMixin LocalizeMixin - */ -class HaConfigDashboard extends NavigateMixin(LocalizeMixin(PolymerElement)) { - static get template() { - return html` - - - - - - -
[[localize('panel.config')]]
- - - -
- - [[localize('ui.panel.config.header')]] - [[localize('ui.panel.config.introduction')]] - - - - - - - - [[localize('ui.panel.config.integrations.caption')]] -
- [[localize('ui.panel.config.integrations.description')]] -
- - - - - - - - [[localize('ui.panel.config.devices.caption')]] -
- [[localize('ui.panel.config.devices.description')]] -
- - - - - - - - - [[localize('ui.panel.config.users.caption')]] -
- [[localize('ui.panel.config.users.description')]] -
- - - - - - - - - - -
- -`; - } - - static get properties() { - return { - hass: Object, - narrow: Boolean, - isWide: Boolean, - cloudStatus: Object, - showAdvanced: Boolean, - }; - } - - computeIsLoaded(hass, component) { - return isComponentLoaded(hass, component); - } -} - -customElements.define("ha-config-dashboard", HaConfigDashboard); diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts new file mode 100644 index 0000000000..dbc34bb381 --- /dev/null +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -0,0 +1,164 @@ +import { + LitElement, + TemplateResult, + html, + CSSResultArray, + css, + customElement, + property, +} from "lit-element"; +import "@polymer/app-layout/app-header-layout/app-header-layout"; +import "@polymer/app-layout/app-header/app-header"; +import "@polymer/app-layout/app-toolbar/app-toolbar"; + +import "../../../components/ha-menu-button"; + +import { haStyle } from "../../../resources/styles"; +import { HomeAssistant } from "../../../types"; +import { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud"; +import { isComponentLoaded } from "../../../common/config/is_component_loaded"; + +import "../../../components/ha-card"; + +import "../ha-config-section"; +import "./ha-config-navigation"; + +@customElement("ha-config-dashboard") +class HaConfigDashboard extends LitElement { + @property() public hass!: HomeAssistant; + @property() public narrow!: boolean; + @property() public isWide!: boolean; + @property() public cloudStatus!: CloudStatus; + @property() public showAdvanced!: boolean; + + protected render(): TemplateResult | void { + return html` + + + + +
${this.hass.localize("panel.config")}
+ + + + +
+ ${this.hass.localize("ui.panel.config.header")} +
+ +
+ ${this.hass.localize("ui.panel.config.introduction")} +
+ + ${isComponentLoaded(this.hass, "cloud") + ? html` + + + + + ${this.hass.localize("ui.panel.config.cloud.caption")} + ${ + this.cloudStatus.logged_in + ? html` +
+ ${this.hass.localize( + "ui.panel.config.cloud.description_login", + "email", + (this.cloudStatus as CloudStatusLoggedIn).email + )} +
+ ` + : html` +
+ ${this.hass.localize( + "ui.panel.config.cloud.description_features" + )} +
+ ` + } + + + + + + ` + : ""} + + + + + + ${!this.showAdvanced + ? html` +
+ ${this.hass.localize( + "ui.panel.profile.advanced_mode.hint_enable" + )} + ${this.hass.localize( + "ui.panel.profile.advanced_mode.link_profile_page" + )}. +
+ ` + : ""} + + + `; + } + + static get styles(): CSSResultArray { + return [ + haStyle, + css` + ha-card { + overflow: hidden; + } + ha-card a { + text-decoration: none; + color: var(--primary-text-color); + } + .promo-advanced { + text-align: center; + color: var(--secondary-text-color); + } + .promo-advanced a { + color: var(--secondary-text-color); + } + `, + ]; + } +} + +declare global { + interface HTMLElementTagNameMap { + "ha-config-dashboard": HaConfigDashboard; + } +} diff --git a/src/panels/config/dashboard/ha-config-navigation.ts b/src/panels/config/dashboard/ha-config-navigation.ts index 72abd3ad17..3b7ebb889d 100644 --- a/src/panels/config/dashboard/ha-config-navigation.ts +++ b/src/panels/config/dashboard/ha-config-navigation.ts @@ -17,33 +17,22 @@ import { } from "lit-element"; import { HomeAssistant } from "../../../types"; -const PAGES: Array<{ +export interface ConfigPageNavigation { page: string; core?: boolean; advanced?: boolean; -}> = [ - { page: "core", core: true }, - { page: "server_control", core: true }, - { page: "person" }, - { page: "entity_registry", core: true }, - { page: "area_registry", core: true }, - { page: "automation" }, - { page: "script" }, - { page: "scene" }, - { page: "zha" }, - { page: "zwave" }, - { page: "customize", core: true, advanced: true }, -]; +} @customElement("ha-config-navigation") class HaConfigNavigation extends LitElement { @property() public hass!: HomeAssistant; @property() public showAdvanced!: boolean; + @property() public pages!: ConfigPageNavigation[]; protected render(): TemplateResult | void { return html` - ${PAGES.map(({ page, core, advanced }) => + ${this.pages.map(({ page, core, advanced }) => (core || isComponentLoaded(this.hass, page)) && (!advanced || this.showAdvanced) ? html` diff --git a/src/translations/en.json b/src/translations/en.json index 0d69a1f5b6..a3175d6f1e 100755 --- a/src/translations/en.json +++ b/src/translations/en.json @@ -661,10 +661,10 @@ } }, "area_registry": { - "caption": "Area Registry", + "caption": "Areas", "description": "Overview of all areas in your home.", "picker": { - "header": "Area Registry", + "header": "Areas", "introduction": "Areas are used to organize where devices are. This information will be used throughout Home Assistant to help you in organizing your interface, permissions and integrations with other systems.", "introduction2": "To place devices in an area, use the link below to navigate to the integrations page and then click on a configured integration to get to the device cards.", "integrations_page": "Integrations page", @@ -704,7 +704,7 @@ } }, "server_control": { - "caption": "Server Control", + "caption": "Server Controls", "description": "Restart and stop the Home Assistant server", "section": { "validation": { @@ -734,10 +734,10 @@ } }, "customize": { - "caption": "Customization", + "caption": "Customizations", "description": "Customize your entities", "picker": { - "header": "Customization", + "header": "Customizations", "introduction": "Tweak per-entity attributes. Added/edited customizations will take effect immediately. Removed customizations will take effect when the entity is updated." }, "warning": { @@ -754,7 +754,7 @@ "pick_attribute": "Pick an attribute to override" }, "automation": { - "caption": "Automation", + "caption": "Automations", "description": "Create and edit automations", "picker": { "header": "Automation Editor", @@ -977,7 +977,7 @@ } }, "script": { - "caption": "Script", + "caption": "Scripts", "description": "Create and edit scripts", "picker": { "header": "Script Editor", @@ -1229,10 +1229,10 @@ } }, "entity_registry": { - "caption": "Entity Registry", + "caption": "Entities", "description": "Overview of all known entities.", "picker": { - "header": "Entity Registry", + "header": "Entities", "introduction": "Home Assistant keeps a registry of every entity it has ever seen that can be uniquely identified. Each of these entities will have an entity ID assigned which will be reserved for just this entity.", "introduction2": "Use the entity registry to override the name, change the entity ID or remove the entry from Home Assistant. Note, removing the entity registry entry won't remove the entity. To do that, follow the link below and remove it from the integrations page.", "integrations_page": "Integrations page",