jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Restructure/reorder configuration dashboard (#4202)

Browse Source 
* Reoreder config dashboard

* Changes base translation for config dashboard items to be pleural

* Convert to lit/ts

* remove unneded stuff

* fix child property passes

* Export page configuration

* Apply suggestion

Co-Authored-By: Bram Kragten <mail@bramkragten.nl>

* Change property to CloudStatus
This commit is contained in:
Joakim Sørensen 2019-11-10 23:25:13 +01:00 committed by Bram Kragten
parent c07b39ebde
commit 004565217e
4 changed files with 177 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

153
src/panels/config/dashboard/ha-config-dashboard.js
View File

@ -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`
<style include="iron-flex ha-style">
ha-card {
overflow: hidden;
}
.content {
padding-bottom: 32px;
}
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);
}
</style>
<app-header-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<ha-menu-button hass='[[hass]]' narrow='[[narrow]]'></ha-menu-button>
<div main-title="">[[localize('panel.config')]]</div>
</app-toolbar>
</app-header>
<div class="content">
<ha-config-section is-wide="[[isWide]]">
<span slot="header">[[localize('ui.panel.config.header')]]</span>
<span slot="introduction">[[localize('ui.panel.config.introduction')]]</span>
<template is="dom-if" if="[[computeIsLoaded(hass, 'cloud')]]">
<ha-card>
<a href='/config/cloud' tabindex="-1">
<paper-item>
<paper-item-body two-line="">
[[localize('ui.panel.config.cloud.caption')]]
<template is="dom-if" if="[[cloudStatus.logged_in]]">
<div secondary="">
[[localize('ui.panel.config.cloud.description_login', 'email', cloudStatus.email)]]
</div>
</template>
<template is="dom-if" if="[[!cloudStatus.logged_in]]">
<div secondary="">
[[localize('ui.panel.config.cloud.description_features')]]
</div>
</template>
</paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
</ha-card>
</a>
</template>
<ha-card>
<a href='/config/integrations/dashboard' tabindex="-1">
<paper-item>
<paper-item-body two-line>
[[localize('ui.panel.config.integrations.caption')]]
<div secondary>
[[localize('ui.panel.config.integrations.description')]]
</div>
</paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
</a>
<a href='/config/devices/dashboard' tabindex="-1">
<paper-item>
<paper-item-body two-line>
[[localize('ui.panel.config.devices.caption')]]
<div secondary>
[[localize('ui.panel.config.devices.description')]]
</div>
</paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
</a>
<a href='/config/users' tabindex="-1">
<paper-item>
<paper-item-body two-line>
[[localize('ui.panel.config.users.caption')]]
<div secondary>
[[localize('ui.panel.config.users.description')]]
</div>
</paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
</a>
</ha-card>
<ha-config-navigation
hass="[[hass]]"
show-advanced="[[showAdvanced]]"
></ha-config-navigation>
<template is='dom-if' if='[[!showAdvanced]]'>
<div class='promo-advanced'>
[[localize('ui.panel.profile.advanced_mode.hint_enable')]] <a
href="/profile"
>[[localize('ui.panel.profile.advanced_mode.link_profile_page')]]</a>.
</div>
</template>
</ha-config-section>
</div>
</app-header-layout>
`;
}
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);

164
src/panels/config/dashboard/ha-config-dashboard.ts Normal file
View File

@ -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`
<app-header-layout has-scrolling-region>
<app-header fixed slot="header">
<app-toolbar>
<ha-menu-button
.hass=${this.hass}
.narrow=${this.narrow}
></ha-menu-button>
<div main-title>${this.hass.localize("panel.config")}</div>
</app-toolbar>
</app-header>
<ha-config-section .narrow=${this.narrow} .isWide=${this.isWide}>
<div slot="header">
${this.hass.localize("ui.panel.config.header")}
</div>
<div slot="introduction">
${this.hass.localize("ui.panel.config.introduction")}
</div>
${isComponentLoaded(this.hass, "cloud")
? html`
<ha-card>
<a href='/config/cloud' tabindex="-1">
<paper-item>
<paper-item-body two-line="">
${this.hass.localize("ui.panel.config.cloud.caption")}
${
this.cloudStatus.logged_in
? html`
<div secondary="">
${this.hass.localize(
"ui.panel.config.cloud.description_login",
"email",
(this.cloudStatus as CloudStatusLoggedIn).email
)}
</div>
`
: html`
<div secondary="">
${this.hass.localize(
"ui.panel.config.cloud.description_features"
)}
</div>
`
}
</paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
</ha-card>
</a>
`
: ""}
<ha-config-navigation
.hass=${this.hass}
.showAdvanced=${this.showAdvanced}
.pages=${[
{ page: "integrations", core: true },
{ page: "devices", core: true },
{ page: "automation" },
{ page: "script" },
{ page: "scene" },
]}
></ha-config-navigation>
<ha-config-navigation
.hass=${this.hass}
.showAdvanced=${this.showAdvanced}
.pages=${[
{ page: "core", core: true },
{ page: "server_control", core: true },
{ page: "entity_registry", core: true },
{ page: "area_registry", core: true },
{ page: "person" },
{ page: "users", core: true },
{ page: "zha" },
{ page: "zwave" },
{ page: "customize", core: true, advanced: true },
]}
></ha-config-navigation>
${!this.showAdvanced
? html`
<div class="promo-advanced">
${this.hass.localize(
"ui.panel.profile.advanced_mode.hint_enable"
)}
<a href="/profile"
>${this.hass.localize(
"ui.panel.profile.advanced_mode.link_profile_page"
)}</a
>.
</div>
`
: ""}
</ha-config-section>
</app-header-layout>
`;
}
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;
}
}

19
src/panels/config/dashboard/ha-config-navigation.ts
View File

@ -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`
<ha-card>
${PAGES.map(({ page, core, advanced }) =>
${this.pages.map(({ page, core, advanced }) =>
(core || isComponentLoaded(this.hass, page)) &&
(!advanced || this.showAdvanced)
? html`

18
src/translations/en.json
View File

@ -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",