From cfda9f6aec744356fed61bea7884b35fbdcc2330 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 28 Jan 2020 16:26:21 +0100 Subject: [PATCH 1/6] Change config navigation to tabs --- src/layouts/hass-loading-screen.ts | 5 + src/layouts/hass-subpage.ts | 1 + src/layouts/hass-tabs-subpage.ts | 221 +++++++++++++ src/panels/config/areas/ha-config-areas.ts | 27 +- .../config/automation/ha-automation-editor.ts | 302 +++++++++-------- .../config/automation/ha-automation-picker.ts | 23 +- .../config/automation/ha-config-automation.js | 5 + .../config/cloud/account/cloud-account.js | 5 +- src/panels/config/cloud/alexa/cloud-alexa.ts | 2 +- .../cloud-google-assistant.ts | 2 +- src/panels/config/cloud/login/cloud-login.js | 5 +- src/panels/config/core/ha-config-core.js | 22 +- .../config/customize/ha-config-customize.js | 37 ++- .../config/dashboard/ha-config-dashboard.ts | 45 ++- .../config/dashboard/ha-config-navigation.ts | 89 ++--- .../config/devices/ha-config-device-page.ts | 15 +- .../devices/ha-config-devices-dashboard.ts | 17 +- .../config/devices/ha-config-devices.ts | 1 + .../entities/entity-registry-settings.ts | 29 +- .../config/entities/ha-config-entities.ts | 79 +++-- src/panels/config/ha-config-router.ts | 177 ---------- src/panels/config/ha-panel-config.ts | 308 +++++++++++------- .../ha-config-entries-dashboard.ts | 23 +- .../integrations/ha-config-integrations.ts | 2 +- src/panels/config/person/ha-config-person.ts | 23 +- src/panels/config/scene/ha-config-scene.ts | 1 + src/panels/config/scene/ha-scene-dashboard.ts | 98 +++--- src/panels/config/scene/ha-scene-editor.ts | 238 +++++++------- src/panels/config/script/ha-config-script.js | 5 + src/panels/config/script/ha-script-editor.ts | 64 ++-- src/panels/config/script/ha-script-picker.ts | 24 +- .../ha-config-server-control.js | 21 +- .../config/users/ha-config-user-picker.js | 24 +- src/panels/config/users/ha-config-users.js | 5 + src/panels/config/users/ha-user-editor.ts | 18 +- src/panels/config/zone/ha-config-zone.ts | 24 +- 36 files changed, 1116 insertions(+), 871 deletions(-) create mode 100644 src/layouts/hass-tabs-subpage.ts delete mode 100644 src/panels/config/ha-config-router.ts diff --git a/src/layouts/hass-loading-screen.ts b/src/layouts/hass-loading-screen.ts index c75db2dfe973..e0670fa4eeb6 100644 --- a/src/layouts/hass-loading-screen.ts +++ b/src/layouts/hass-loading-screen.ts @@ -50,6 +50,11 @@ class HassLoadingScreen extends LitElement { return [ haStyle, css` + :host { + display: block; + height: 100%; + background-color: var(--primary-background-color); + } .content { height: calc(100% - 64px); display: flex; diff --git a/src/layouts/hass-subpage.ts b/src/layouts/hass-subpage.ts index 34ad70f212af..39c539d7ee9b 100644 --- a/src/layouts/hass-subpage.ts +++ b/src/layouts/hass-subpage.ts @@ -59,6 +59,7 @@ class HassSubpage extends LitElement { background-color: var(--app-header-background-color); font-weight: 400; color: var(--app-header-text-color, white); + border-bottom: var(--app-header-border-bottom, none); } ha-menu-button, diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts new file mode 100644 index 000000000000..4a41766f7469 --- /dev/null +++ b/src/layouts/hass-tabs-subpage.ts @@ -0,0 +1,221 @@ +import { + LitElement, + property, + TemplateResult, + html, + customElement, + css, + CSSResult, + PropertyValues, +} from "lit-element"; +import "../components/ha-menu-button"; +import "../components/ha-paper-icon-button-arrow-prev"; +import { classMap } from "lit-html/directives/class-map"; +import { Route, HomeAssistant } from "../types"; +import { navigate } from "../common/navigate"; +import "@material/mwc-ripple"; +import { ConfigPageNavigation } from "../panels/config/dashboard/ha-config-navigation"; +import { isComponentLoaded } from "../common/config/is_component_loaded"; + +@customElement("hass-tabs-subpage") +class HassTabsSubpage extends LitElement { + @property() public hass!: HomeAssistant; + @property({ type: Boolean }) public showBackButton = true; + @property({ type: String, attribute: "back-path" }) public backPath?: string; + @property() public backCallback?: () => void; + @property({ type: Boolean }) public hassio = false; + @property({ type: Boolean }) public showAdvanced = false; + @property() public route!: Route; + @property() public tabs!: ConfigPageNavigation[]; + @property({ type: Boolean, reflect: true }) public narrow = false; + @property() private _activeTab: number = -1; + + protected updated(changedProperties: PropertyValues) { + super.updated(changedProperties); + if (changedProperties.has("route")) { + this._activeTab = this.tabs.findIndex((tab) => + this.route.prefix.includes(`/config/${tab.page}`) + ); + } + } + + protected render(): TemplateResult { + return html` +
+ +
+ ${this.tabs.map(({ page, core, advanced, icon }, index) => + (core || isComponentLoaded(this.hass, page)) && + (!advanced || this.showAdvanced) + ? html` +
+ ${this.narrow + ? html` + + ` + : ""} + ${!this.narrow || index === this._activeTab + ? html` + ${this.hass.localize( + `ui.panel.config.${page}.caption` + )} + ` + : ""} + +
+ ` + : "" + )} +
+ +
+ +
+
+
+ +
+ `; + } + + private _tabTapped(ev: MouseEvent): void { + navigate(this, `/config/${(ev.currentTarget as any).page}`, true); + } + + private _backTapped(): void { + if (this.backPath) { + navigate(this, this.backPath); + return; + } + if (this.backCallback) { + this.backCallback(); + return; + } + history.back(); + } + + static get styles(): CSSResult { + return css` + :host { + display: block; + height: 100%; + background-color: var(--primary-background-color); + } + + .toolbar { + display: flex; + align-items: center; + font-size: 20px; + height: 64px; + background-color: var(--sidebar-background-color); + font-weight: 400; + color: var(--sidebar-text-color); + border-bottom: 1px solid var(--divider-color); + padding: 0 16px; + } + + #tabbar { + display: flex; + font-size: 14px; + } + + #tabbar.bottom-bar { + position: absolute; + bottom: 0; + left: 0; + padding: 0 16px; + box-sizing: border-box; + border-top: 1px solid var(--divider-color); + justify-content: space-between; + z-index: 1; + font-size: 12px; + width: 100%; + } + + #tabbar:not(.bottom-bar) { + margin: auto; + left: 50%; + position: absolute; + transform: translate(-50%, 0); + } + + .tab { + padding: 0 32px; + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + justify-content: center; + height: 64px; + } + + .tab.active { + color: var(--primary-color); + } + + #tabbar:not(.bottom-bar) .tab.active { + border-bottom: 2px solid var(--primary-color); + } + + .bottom-bar .tab { + padding: 0 16px; + width: 20%; + min-width: 0; + } + + ha-menu-button, + ha-paper-icon-button-arrow-prev, + ::slotted([slot="toolbar-icon"]) { + pointer-events: auto; + color: var(--sidebar-icon-color); + } + + ha-paper-icon-button-arrow-prev.hidden { + visibility: hidden; + } + + [main-title] { + margin: 0 0 0 24px; + line-height: 20px; + flex-grow: 1; + } + + .content { + position: relative; + width: 100%; + height: calc(100% - 64px); + overflow-y: auto; + overflow: auto; + -webkit-overflow-scrolling: touch; + } + + #toolbar-icon { + position: absolute; + right: 16px; + } + + :host([narrow]) .content { + height: calc(100% - 128px); + } + `; + } +} + +declare global { + interface HTMLElementTagNameMap { + "hass-tabs-subpage": HassTabsSubpage; + } +} diff --git a/src/panels/config/areas/ha-config-areas.ts b/src/panels/config/areas/ha-config-areas.ts index 348bc6656ca4..eee7f5c4251d 100644 --- a/src/panels/config/areas/ha-config-areas.ts +++ b/src/panels/config/areas/ha-config-areas.ts @@ -10,7 +10,7 @@ import { import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; -import { HomeAssistant } from "../../../types"; +import { HomeAssistant, Route } from "../../../types"; import { AreaRegistryEntry, updateAreaRegistryEntry, @@ -20,7 +20,7 @@ import { } from "../../../data/area_registry"; import "../../../components/ha-card"; import "../../../components/ha-fab"; -import "../../../layouts/hass-subpage"; +import "../../../layouts/hass-tabs-subpage"; import "../../../layouts/hass-loading-screen"; import "../ha-config-section"; import { @@ -30,11 +30,14 @@ import { import { classMap } from "lit-html/directives/class-map"; import { computeRTL } from "../../../common/util/compute_rtl"; import { UnsubscribeFunc } from "home-assistant-js-websocket"; +import { configSections } from "../ha-panel-config"; @customElement("ha-config-areas") export class HaConfigAreas extends LitElement { @property() public hass!: HomeAssistant; @property() public isWide?: boolean; + @property() public narrow!: boolean; + @property() public route!: Route; @property() private _areas?: AreaRegistryEntry[]; private _unsubAreas?: UnsubscribeFunc; @@ -52,9 +55,12 @@ export class HaConfigAreas extends LitElement { `; } return html` - @@ -95,10 +101,11 @@ export class HaConfigAreas extends LitElement { : html``} - + - - - -
- ${this.automation - ? computeStateName(this.automation) - : this.hass.localize( - "ui.panel.config.automation.editor.default_name" - )} -
- ${this.creatingNew - ? "" - : html` - - `} - - - -
- ${this._errors + this._backTapped()} + .tabs=${configSections[1]} + > + ${this.creatingNew + ? "" + : html` + + `} + ${this._errors + ? html` +
${this._errors}
+ ` + : ""} +
+ ${this._config ? html` -
${this._errors}
- ` - : ""} -
- ${this._config - ? html` - - ${this._config.alias} - + + ${this._config.alias} + + ${this.hass.localize( + "ui.panel.config.automation.editor.introduction" + )} + + +
+ + + +
+ + + + + + ${this.hass.localize( + "ui.panel.config.automation.editor.triggers.header" + )} + + +

${this.hass.localize( - "ui.panel.config.automation.editor.introduction" + "ui.panel.config.automation.editor.triggers.introduction" )} - - -

- - - -
- - - - - +

+ ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.header" + "ui.panel.config.automation.editor.triggers.learn_more" )} - - -

- ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.introduction" - )} -

- - ${this.hass.localize( - "ui.panel.config.automation.editor.triggers.learn_more" - )} - - - - + + + + - - + + + ${this.hass.localize( + "ui.panel.config.automation.editor.conditions.header" + )} + + +

${this.hass.localize( - "ui.panel.config.automation.editor.conditions.header" + "ui.panel.config.automation.editor.conditions.introduction" )} - - -

- ${this.hass.localize( - "ui.panel.config.automation.editor.conditions.introduction" - )} -

- - ${this.hass.localize( - "ui.panel.config.automation.editor.conditions.learn_more" - )} - - - - +

+ + ${this.hass.localize( + "ui.panel.config.automation.editor.conditions.learn_more" + )} + + + + - - + + + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.header" + )} + + +

${this.hass.localize( - "ui.panel.config.automation.editor.actions.header" + "ui.panel.config.automation.editor.actions.introduction" )} - - -

- ${this.hass.localize( - "ui.panel.config.automation.editor.actions.introduction" - )} -

- - ${this.hass.localize( - "ui.panel.config.automation.editor.actions.learn_more" - )} - - - - - ` - : ""} -
+

+ + ${this.hass.localize( + "ui.panel.config.automation.editor.actions.learn_more" + )} + + + + + ` + : ""}
- + `; } @@ -409,7 +402,10 @@ export class HaAutomationEditor extends LitElement { bottom: 24px; right: 24px; } - + ha-fab[narrow] { + bottom: 76px; + margin-bottom: -140px; + } ha-fab[dirty] { margin-bottom: 0; } diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index d50cc496ad1f..c57d1f90d28e 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -11,7 +11,7 @@ import { ifDefined } from "lit-html/directives/if-defined"; import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-tooltip/paper-tooltip"; -import "../../../layouts/hass-subpage"; +import "../../../layouts/hass-tabs-subpage"; import "../../../components/ha-card"; import "../../../components/ha-fab"; @@ -22,7 +22,7 @@ import "../ha-config-section"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { computeRTL } from "../../../common/util/compute_rtl"; import { haStyle } from "../../../resources/styles"; -import { HomeAssistant } from "../../../types"; +import { HomeAssistant, Route } from "../../../types"; import { AutomationEntity, showAutomationEditor, @@ -32,18 +32,24 @@ import format_date_time from "../../../common/datetime/format_date_time"; import { fireEvent } from "../../../common/dom/fire_event"; import { showThingtalkDialog } from "./show-dialog-thingtalk"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; +import { configSections } from "../ha-panel-config"; @customElement("ha-automation-picker") class HaAutomationPicker extends LitElement { @property() public hass!: HomeAssistant; @property() public isWide!: boolean; + @property() public narrow!: boolean; + @property() public route!: Route; @property() public automations!: AutomationEntity[]; protected render(): TemplateResult { return html` -
@@ -150,6 +156,7 @@ class HaAutomationPicker extends LitElement {
- + `; } @@ -221,7 +228,9 @@ class HaAutomationPicker extends LitElement { bottom: 24px; right: 24px; } - + ha-fab[narrow] { + bottom: 76px; + } ha-fab[rtl] { right: auto; left: 16px; diff --git a/src/panels/config/automation/ha-config-automation.js b/src/panels/config/automation/ha-config-automation.js index ec685ae32900..d3052b96407b 100644 --- a/src/panels/config/automation/ha-config-automation.js +++ b/src/panels/config/automation/ha-config-automation.js @@ -33,6 +33,8 @@ class HaConfigAutomation extends PolymerElement { hass="[[hass]]" automations="[[automations]]" is-wide="[[isWide]]" + narrow="[[narrow]]" + route="[[route]]" > @@ -41,6 +43,8 @@ class HaConfigAutomation extends PolymerElement { hass="[[hass]]" automation="[[automation]]" is-wide="[[isWide]]" + narrow="[[narrow]]" + route="[[route]]" creating-new="[[_creatingNew]]" > @@ -52,6 +56,7 @@ class HaConfigAutomation extends PolymerElement { hass: Object, route: Object, isWide: Boolean, + narrow: Boolean, _routeData: Object, _routeMatches: Boolean, _creatingNew: Boolean, diff --git a/src/panels/config/cloud/account/cloud-account.js b/src/panels/config/cloud/account/cloud-account.js index 2bc95e8f3223..19f37a5aff85 100644 --- a/src/panels/config/cloud/account/cloud-account.js +++ b/src/panels/config/cloud/account/cloud-account.js @@ -63,10 +63,7 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) { color: var(--primary-color); } - +
- +
-
- + `; } @@ -52,10 +58,16 @@ class HaConfigCore extends LocalizeMixin(PolymerElement) { return { hass: Object, isWide: Boolean, + narrow: Boolean, showAdvanced: Boolean, + route: Object, }; } + _computeTabs() { + return configSections[3]; + } + computeClasses(isWide) { return isWide ? "content" : "content narrow"; } diff --git a/src/panels/config/customize/ha-config-customize.js b/src/panels/config/customize/ha-config-customize.js index b5d622fc4b4b..b85ae26f092e 100644 --- a/src/panels/config/customize/ha-config-customize.js +++ b/src/panels/config/customize/ha-config-customize.js @@ -1,10 +1,8 @@ -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/paper-icon-button/paper-icon-button"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; +import "../../../layouts/hass-tabs-subpage"; import "../../../resources/ha-style"; import "../../../components/ha-paper-icon-button-arrow-prev"; @@ -17,6 +15,8 @@ import { computeStateDomain } from "../../../common/entity/compute_state_domain" import { sortStatesByName } from "../../../common/entity/states_sort_by_name"; import LocalizeMixin from "../../../mixins/localize-mixin"; +import { configSections } from "../ha-panel-config"; + /* * @appliesMixin LocalizeMixin */ @@ -29,19 +29,14 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) { } - - - - -
- [[localize('ui.panel.config.customize.caption')]] -
- - - +
@@ -59,7 +54,7 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) {
- + `; } @@ -67,7 +62,9 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) { return { hass: Object, isWide: Boolean, - + narrow: Boolean, + route: Object, + showAdvanced: Boolean, entities: { type: Array, computed: "computeEntities(hass)", @@ -95,6 +92,10 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) { history.back(); } + _computeTabs() { + return configSections[3]; + } + computeEntities(hass) { return Object.keys(hass.states) .map((key) => hass.states[key]) diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index 95e4256a7b59..c9c3dc6931da 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -23,6 +23,7 @@ import "../../../components/ha-icon-next"; import "../ha-config-section"; import "./ha-config-navigation"; +import { configSections } from "../ha-panel-config"; @customElement("ha-config-dashboard") class HaConfigDashboard extends LitElement { @@ -86,36 +87,22 @@ class HaConfigDashboard extends LitElement { ` : ""} - + ${configSections.map( + (section) => html` + + + + ` + )} - - - @@ -142,6 +129,12 @@ class HaConfigDashboard extends LitElement { return [ haStyle, css` + app-header { + --app-header-background-color: var(--sidebar-background-color); + --app-header-text-color: var(--sidebar-text-color); + border-bottom: 1px solid var(--divider-color); + } + ha-config-navigation:last-child { margin-bottom: 24px; } diff --git a/src/panels/config/dashboard/ha-config-navigation.ts b/src/panels/config/dashboard/ha-config-navigation.ts index 0d5547547594..50d9b119f2c3 100644 --- a/src/panels/config/dashboard/ha-config-navigation.ts +++ b/src/panels/config/dashboard/ha-config-navigation.ts @@ -22,6 +22,7 @@ export interface ConfigPageNavigation { page: string; core?: boolean; advanced?: boolean; + icon?: string; info?: any; } @@ -30,57 +31,49 @@ class HaConfigNavigation extends LitElement { @property() public hass!: HomeAssistant; @property() public showAdvanced!: boolean; @property() public pages!: ConfigPageNavigation[]; - @property() public curPage!: string; protected render(): TemplateResult { return html` - - ${this.pages.map(({ page, core, advanced, info }) => - (core || isComponentLoaded(this.hass, page)) && - (!advanced || this.showAdvanced) - ? html` - - - - ${this.hass.localize(`ui.panel.config.${page}.caption`)} - ${page === "cloud" && (info as CloudStatus) - ? info.logged_in - ? html` -
- ${this.hass.localize( - "ui.panel.config.cloud.description_login", - "email", - (info as CloudStatusLoggedIn).email - )} -
- ` - : html` -
- ${this.hass.localize( - "ui.panel.config.cloud.description_features" - )} -
- ` + ${this.pages.map(({ page, core, advanced, info }) => + (core || isComponentLoaded(this.hass, page)) && + (!advanced || this.showAdvanced) + ? html` + + + + ${this.hass.localize(`ui.panel.config.${page}.caption`)} + ${page === "cloud" && (info as CloudStatus) + ? info.logged_in + ? html` +
+ ${this.hass.localize( + "ui.panel.config.cloud.description_login", + "email", + (info as CloudStatusLoggedIn).email + )} +
+ ` : html`
${this.hass.localize( - `ui.panel.config.${page}.description` + "ui.panel.config.cloud.description_features" )}
- `} - - - - - ` - : "" - )} - + ` + : html` +
+ ${this.hass.localize( + `ui.panel.config.${page}.description` + )} +
+ `} + + + + + ` + : "" + )} `; } @@ -105,10 +98,6 @@ class HaConfigNavigation extends LitElement { transition: opacity 15ms linear; will-change: opacity; } - .iron-selected paper-item::before { - background-color: var(--sidebar-selected-icon-color); - opacity: 0.12; - } a:not(.iron-selected):focus::before { background-color: currentColor; opacity: var(--dark-divider-opacity); @@ -117,12 +106,6 @@ class HaConfigNavigation extends LitElement { .iron-selected:focus paper-item::before { opacity: 0.2; } - .iron-selected paper-item[pressed]::before { - opacity: 0.37; - } - paper-listbox { - padding: 0; - } `; } } diff --git a/src/panels/config/devices/ha-config-device-page.ts b/src/panels/config/devices/ha-config-device-page.ts index 2bc8d4fb0d50..35f68520ae80 100644 --- a/src/panels/config/devices/ha-config-device-page.ts +++ b/src/panels/config/devices/ha-config-device-page.ts @@ -9,7 +9,7 @@ import { import memoizeOne from "memoize-one"; -import "../../../layouts/hass-subpage"; +import "../../../layouts/hass-tabs-subpage"; import "../../../layouts/hass-error-screen"; import "../ha-config-section"; @@ -18,7 +18,7 @@ import "./device-detail/ha-device-triggers-card"; import "./device-detail/ha-device-conditions-card"; import "./device-detail/ha-device-actions-card"; import "./device-detail/ha-device-entities-card"; -import { HomeAssistant } from "../../../types"; +import { HomeAssistant, Route } from "../../../types"; import { ConfigEntry } from "../../../data/config_entries"; import { EntityRegistryEntry, @@ -45,6 +45,7 @@ import { import { compare } from "../../../common/string/compare"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { createValidEntityId } from "../../../common/entity/valid_entity_id"; +import { configSections } from "../ha-panel-config"; export interface EntityRegistryStateEntry extends EntityRegistryEntry { stateName?: string; @@ -60,6 +61,7 @@ export class HaConfigDevicePage extends LitElement { @property() public deviceId!: string; @property() public narrow!: boolean; @property() public showAdvanced!: boolean; + @property() public route!: Route; @property() private _triggers: DeviceTrigger[] = []; @property() private _conditions: DeviceCondition[] = []; @property() private _actions: DeviceAction[] = []; @@ -133,7 +135,12 @@ export class HaConfigDevicePage extends LitElement { const entities = this._entities(this.deviceId, this.entities); return html` - + - + `; } diff --git a/src/panels/config/devices/ha-config-devices-dashboard.ts b/src/panels/config/devices/ha-config-devices-dashboard.ts index ef2f32d684d7..f6486c575a3e 100644 --- a/src/panels/config/devices/ha-config-devices-dashboard.ts +++ b/src/panels/config/devices/ha-config-devices-dashboard.ts @@ -1,4 +1,4 @@ -import "../../../layouts/hass-subpage"; +import "../../../layouts/hass-tabs-subpage"; import "./ha-devices-data-table"; import { @@ -10,11 +10,12 @@ import { CSSResult, css, } from "lit-element"; -import { HomeAssistant } from "../../../types"; +import { HomeAssistant, Route } from "../../../types"; import { DeviceRegistryEntry } from "../../../data/device_registry"; import { EntityRegistryEntry } from "../../../data/entity_registry"; import { ConfigEntry } from "../../../data/config_entries"; import { AreaRegistryEntry } from "../../../data/area_registry"; +import { configSections } from "../ha-panel-config"; @customElement("ha-config-devices-dashboard") export class HaConfigDeviceDashboard extends LitElement { @@ -26,12 +27,16 @@ export class HaConfigDeviceDashboard extends LitElement { @property() public entities!: EntityRegistryEntry[]; @property() public areas!: AreaRegistryEntry[]; @property() public domain!: string; + @property() public route!: Route; protected render(): TemplateResult { return html` -
- + `; } diff --git a/src/panels/config/devices/ha-config-devices.ts b/src/panels/config/devices/ha-config-devices.ts index 0f0a78fcd620..2db8938019d0 100644 --- a/src/panels/config/devices/ha-config-devices.ts +++ b/src/panels/config/devices/ha-config-devices.ts @@ -100,6 +100,7 @@ class HaConfigDevices extends HassRouterPage { pageEl.narrow = this.narrow; pageEl.isWide = this.isWide; pageEl.showAdvanced = this.showAdvanced; + pageEl.route = this.routeTail; } private _loadData() { diff --git a/src/panels/config/entities/entity-registry-settings.ts b/src/panels/config/entities/entity-registry-settings.ts index 547838c8fbae..0e4fcb95a852 100644 --- a/src/panels/config/entities/entity-registry-settings.ts +++ b/src/panels/config/entities/entity-registry-settings.ts @@ -1,32 +1,29 @@ +import "@polymer/paper-input/paper-input"; +import { HassEntity } from "home-assistant-js-websocket"; import { - LitElement, - html, css, CSSResult, - TemplateResult, - property, customElement, + html, + LitElement, + property, PropertyValues, + TemplateResult, } from "lit-element"; -import "@polymer/paper-input/paper-input"; - +import { fireEvent } from "../../../common/dom/fire_event"; +import { computeDomain } from "../../../common/entity/compute_domain"; +import { computeStateName } from "../../../common/entity/compute_state_name"; import "../../../components/ha-switch"; - -import { PolymerChangedEvent } from "../../../polymer-types"; -import { HomeAssistant } from "../../../types"; -import { HassEntity } from "home-assistant-js-websocket"; // tslint:disable-next-line: no-duplicate-imports import { HaSwitch } from "../../../components/ha-switch"; - -import { computeDomain } from "../../../common/entity/compute_domain"; -import { computeStateName } from "../../../common/entity/compute_state_name"; import { - updateEntityRegistryEntry, - removeEntityRegistryEntry, EntityRegistryEntry, + removeEntityRegistryEntry, + updateEntityRegistryEntry, } from "../../../data/entity_registry"; import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; -import { fireEvent } from "../../../common/dom/fire_event"; +import { PolymerChangedEvent } from "../../../polymer-types"; +import { HomeAssistant } from "../../../types"; @customElement("entity-registry-settings") export class EntityRegistrySettings extends LitElement { diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index 00a95df4da10..67e97518d046 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -1,59 +1,59 @@ +import "@polymer/paper-checkbox/paper-checkbox"; +import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; +import "@polymer/paper-item/paper-icon-item"; +import "@polymer/paper-listbox/paper-listbox"; +import "@polymer/paper-tooltip/paper-tooltip"; +import { UnsubscribeFunc } from "home-assistant-js-websocket"; import { - LitElement, - TemplateResult, - html, css, CSSResult, + customElement, + html, + LitElement, property, query, - customElement, + TemplateResult, } from "lit-element"; import { styleMap } from "lit-html/directives/style-map"; - -import "@polymer/paper-checkbox/paper-checkbox"; -import "@polymer/paper-dropdown-menu/paper-dropdown-menu"; -import "@polymer/paper-item/paper-icon-item"; -import "@polymer/paper-listbox/paper-listbox"; -import "@polymer/paper-tooltip/paper-tooltip"; - -import { HomeAssistant } from "../../../types"; -import { - EntityRegistryEntry, - computeEntityRegistryName, - subscribeEntityRegistry, - removeEntityRegistryEntry, - updateEntityRegistryEntry, -} from "../../../data/entity_registry"; -import "../../../layouts/hass-subpage"; -import "../../../layouts/hass-loading-screen"; -import "../../../components/data-table/ha-data-table"; -import "../../../components/ha-icon"; +import memoize from "memoize-one"; +import { computeDomain } from "../../../common/entity/compute_domain"; import { domainIcon } from "../../../common/entity/domain_icon"; import { stateIcon } from "../../../common/entity/state_icon"; -import { computeDomain } from "../../../common/entity/compute_domain"; -import { - showEntityRegistryDetailDialog, - loadEntityRegistryDetailDialog, -} from "./show-dialog-entity-registry-detail"; -import { UnsubscribeFunc } from "home-assistant-js-websocket"; -import memoize from "memoize-one"; +import "../../../components/data-table/ha-data-table"; // tslint:disable-next-line import { DataTableColumnContainer, + DataTableColumnData, + HaDataTable, RowClickedEvent, SelectionChangedEvent, - HaDataTable, - DataTableColumnData, } from "../../../components/data-table/ha-data-table"; +import "../../../components/ha-icon"; +import { + computeEntityRegistryName, + EntityRegistryEntry, + removeEntityRegistryEntry, + subscribeEntityRegistry, + updateEntityRegistryEntry, +} from "../../../data/entity_registry"; import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; +import "../../../layouts/hass-loading-screen"; +import "../../../layouts/hass-tabs-subpage"; import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; +import { HomeAssistant, Route } from "../../../types"; import { DialogEntityRegistryDetail } from "./dialog-entity-registry-detail"; +import { + loadEntityRegistryDetailDialog, + showEntityRegistryDetailDialog, +} from "./show-dialog-entity-registry-detail"; +import { configSections } from "../ha-panel-config"; @customElement("ha-config-entities") export class HaConfigEntities extends SubscribeMixin(LitElement) { @property() public hass!: HomeAssistant; @property() public isWide!: boolean; @property() public narrow!: boolean; + @property() public route!: Route; @property() private _entities?: EntityRegistryEntry[]; @property() private _showDisabled = false; @property() private _showUnavailable = true; @@ -224,9 +224,12 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { `; } return html` -
@@ -367,7 +370,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
- + `; } @@ -490,6 +493,10 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { static get styles(): CSSResult { return css` + hass-loading-screen { + --app-header-background-color: var(--sidebar-background-color); + --app-header-text-color: var(--sidebar-text-color); + } a { color: var(--primary-color); } diff --git a/src/panels/config/ha-config-router.ts b/src/panels/config/ha-config-router.ts deleted file mode 100644 index dd883f0d0a5a..000000000000 --- a/src/panels/config/ha-config-router.ts +++ /dev/null @@ -1,177 +0,0 @@ -import { property, customElement } from "lit-element"; -import "../../layouts/hass-loading-screen"; -import { HomeAssistant } from "../../types"; -import { CloudStatus } from "../../data/cloud"; -import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page"; -import { PolymerElement } from "@polymer/polymer"; - -declare global { - // for fire event - interface HASSDomEvents { - "ha-refresh-cloud-status": undefined; - } -} - -@customElement("ha-config-router") -class HaConfigRouter extends HassRouterPage { - @property() public hass!: HomeAssistant; - @property() public narrow!: boolean; - @property() public wideSidebar: boolean = false; - @property() public wide: boolean = false; - @property() public isWide: boolean = false; - @property() public showAdvanced: boolean = false; - @property() public cloudStatus?: CloudStatus; - - protected routerOptions: RouterOptions = { - defaultPage: "dashboard", - cacheAll: true, - preloadAll: true, - routes: { - areas: { - tag: "ha-config-areas", - load: () => - import( - /* webpackChunkName: "panel-config-areas" */ "./areas/ha-config-areas" - ), - }, - automation: { - tag: "ha-config-automation", - load: () => - import( - /* webpackChunkName: "panel-config-automation" */ "./automation/ha-config-automation" - ), - }, - cloud: { - tag: "ha-config-cloud", - load: () => - import( - /* webpackChunkName: "panel-config-cloud" */ "./cloud/ha-config-cloud" - ), - }, - core: { - tag: "ha-config-core", - load: () => - import( - /* webpackChunkName: "panel-config-core" */ "./core/ha-config-core" - ), - }, - devices: { - tag: "ha-config-devices", - load: () => - import( - /* webpackChunkName: "panel-config-devices" */ "./devices/ha-config-devices" - ), - }, - server_control: { - tag: "ha-config-server-control", - load: () => - import( - /* webpackChunkName: "panel-config-server-control" */ "./server_control/ha-config-server-control" - ), - }, - customize: { - tag: "ha-config-customize", - load: () => - import( - /* webpackChunkName: "panel-config-customize" */ "./customize/ha-config-customize" - ), - }, - dashboard: { - tag: "ha-config-dashboard", - load: () => - import( - /* webpackChunkName: "panel-config-dashboard" */ "./dashboard/ha-config-dashboard" - ), - }, - entities: { - tag: "ha-config-entities", - load: () => - import( - /* webpackChunkName: "panel-config-entities" */ "./entities/ha-config-entities" - ), - }, - integrations: { - tag: "ha-config-integrations", - load: () => - import( - /* webpackChunkName: "panel-config-integrations" */ "./integrations/ha-config-integrations" - ), - }, - person: { - tag: "ha-config-person", - load: () => - import( - /* webpackChunkName: "panel-config-person" */ "./person/ha-config-person" - ), - }, - script: { - tag: "ha-config-script", - load: () => - import( - /* webpackChunkName: "panel-config-script" */ "./script/ha-config-script" - ), - }, - scene: { - tag: "ha-config-scene", - load: () => - import( - /* webpackChunkName: "panel-config-scene" */ "./scene/ha-config-scene" - ), - }, - users: { - tag: "ha-config-users", - load: () => - import( - /* webpackChunkName: "panel-config-users" */ "./users/ha-config-users" - ), - }, - zone: { - tag: "ha-config-zone", - load: () => - import( - /* webpackChunkName: "panel-config-zone" */ "./zone/ha-config-zone" - ), - }, - zha: { - tag: "zha-config-dashboard-router", - load: () => - import( - /* webpackChunkName: "panel-config-zha" */ "./zha/zha-config-dashboard-router" - ), - }, - zwave: { - tag: "ha-config-zwave", - load: () => - import( - /* webpackChunkName: "panel-config-zwave" */ "./zwave/ha-config-zwave" - ), - }, - }, - }; - protected updatePageEl(el) { - if ("setProperties" in el) { - // As long as we have Polymer panels - (el as PolymerElement).setProperties({ - route: this.routeTail, - hass: this.hass, - showAdvanced: this.showAdvanced, - isWide: this.isWide, - narrow: this.narrow, - cloudStatus: this.cloudStatus, - }); - } else { - el.route = this.routeTail; - el.hass = this.hass; - el.showAdvanced = this.showAdvanced; - el.isWide = this.isWide; - el.narrow = this.narrow; - el.cloudStatus = this.cloudStatus; - } - } -} - -declare global { - interface HTMLElementTagNameMap { - "ha-config-router": HaConfigRouter; - } -} diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts index d0b763ddc70f..3c1df1b23372 100644 --- a/src/panels/config/ha-panel-config.ts +++ b/src/panels/config/ha-panel-config.ts @@ -1,12 +1,4 @@ -import { - property, - PropertyValues, - customElement, - LitElement, - html, - CSSResult, - css, -} from "lit-element"; +import { property, PropertyValues, customElement } from "lit-element"; import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-item/paper-item"; import "../../layouts/hass-loading-screen"; @@ -18,9 +10,9 @@ import { getOptimisticFrontendUserDataCollection, CoreFrontendUserData, } from "../../data/frontend"; -import "./ha-config-router"; -import "./dashboard/ha-config-navigation"; -import { classMap } from "lit-html/directives/class-map"; +import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page"; +import { PolymerElement } from "@polymer/polymer"; +import { ConfigPageNavigation } from "./dashboard/ha-config-navigation"; declare global { // for fire event @@ -29,14 +21,170 @@ declare global { } } -const NO_SIDEBAR_PAGES = ["zone"]; +export const configSections: ConfigPageNavigation[][] = [ + [ + { page: "integrations", icon: "hass:home-assistant", core: true }, + { page: "devices", icon: "hass:home-assistant", core: true }, + { page: "entities", icon: "hass:home-assistant", core: true }, + { page: "areas", icon: "hass:home-assistant", core: true }, + ], + [ + { page: "automation", icon: "hass:home-assistant" }, + { page: "scene", icon: "hass:home-assistant" }, + { page: "script", icon: "hass:home-assistant" }, + ], + [ + { page: "person", icon: "hass:home-assistant" }, + { page: "zone", icon: "hass:home-assistant", core: true }, + { page: "users", icon: "hass:home-assistant", core: true }, + ], + [ + { page: "core", icon: "hass:home-assistant", core: true }, + { page: "server_control", icon: "hass:home-assistant", core: true }, + { + page: "customize", + icon: "hass:home-assistant", + core: true, + advanced: true, + }, + { page: "zha" }, + { page: "zwave" }, + ], +]; @customElement("ha-panel-config") -class HaPanelConfig extends LitElement { +class HaPanelConfig extends HassRouterPage { @property() public hass!: HomeAssistant; @property() public narrow!: boolean; @property() public route!: Route; + protected routerOptions: RouterOptions = { + defaultPage: "dashboard", + cacheAll: true, + preloadAll: true, + routes: { + areas: { + tag: "ha-config-areas", + load: () => + import( + /* webpackChunkName: "panel-config-areas" */ "./areas/ha-config-areas" + ), + }, + automation: { + tag: "ha-config-automation", + load: () => + import( + /* webpackChunkName: "panel-config-automation" */ "./automation/ha-config-automation" + ), + }, + cloud: { + tag: "ha-config-cloud", + load: () => + import( + /* webpackChunkName: "panel-config-cloud" */ "./cloud/ha-config-cloud" + ), + }, + core: { + tag: "ha-config-core", + load: () => + import( + /* webpackChunkName: "panel-config-core" */ "./core/ha-config-core" + ), + }, + devices: { + tag: "ha-config-devices", + load: () => + import( + /* webpackChunkName: "panel-config-devices" */ "./devices/ha-config-devices" + ), + }, + server_control: { + tag: "ha-config-server-control", + load: () => + import( + /* webpackChunkName: "panel-config-server-control" */ "./server_control/ha-config-server-control" + ), + }, + customize: { + tag: "ha-config-customize", + load: () => + import( + /* webpackChunkName: "panel-config-customize" */ "./customize/ha-config-customize" + ), + }, + dashboard: { + tag: "ha-config-dashboard", + load: () => + import( + /* webpackChunkName: "panel-config-dashboard" */ "./dashboard/ha-config-dashboard" + ), + }, + entities: { + tag: "ha-config-entities", + load: () => + import( + /* webpackChunkName: "panel-config-entities" */ "./entities/ha-config-entities" + ), + }, + integrations: { + tag: "ha-config-integrations", + load: () => + import( + /* webpackChunkName: "panel-config-integrations" */ "./integrations/ha-config-integrations" + ), + }, + person: { + tag: "ha-config-person", + load: () => + import( + /* webpackChunkName: "panel-config-person" */ "./person/ha-config-person" + ), + }, + script: { + tag: "ha-config-script", + load: () => + import( + /* webpackChunkName: "panel-config-script" */ "./script/ha-config-script" + ), + }, + scene: { + tag: "ha-config-scene", + load: () => + import( + /* webpackChunkName: "panel-config-scene" */ "./scene/ha-config-scene" + ), + }, + users: { + tag: "ha-config-users", + load: () => + import( + /* webpackChunkName: "panel-config-users" */ "./users/ha-config-users" + ), + }, + zone: { + tag: "ha-config-zone", + load: () => + import( + /* webpackChunkName: "panel-config-zone" */ "./zone/ha-config-zone" + ), + }, + zha: { + tag: "zha-config-dashboard-router", + load: () => + import( + /* webpackChunkName: "panel-config-zha" */ "./zha/zha-config-dashboard-router" + ), + }, + zwave: { + tag: "ha-config-zwave", + load: () => + import( + /* webpackChunkName: "panel-config-zwave" */ "./zwave/ha-config-zwave" + ), + }, + }, + }; + @property() private _wideSidebar: boolean = false; @property() private _wide: boolean = false; @property() private _coreUserData?: CoreFrontendUserData; @@ -82,67 +230,45 @@ class HaPanelConfig extends LitElement { if (isComponentLoaded(this.hass, "cloud")) { this._updateCloudStatus(); } + this.style.setProperty( + "--app-header-background-color", + "var(--sidebar-background-color)" + ); + this.style.setProperty( + "--app-header-text-color", + "var(--sidebar-text-color)" + ); + this.style.setProperty( + "--app-header-border-bottom", + "1px solid var(--divider-color)" + ); this.addEventListener("ha-refresh-cloud-status", () => this._updateCloudStatus() ); } - protected render() { - const dividerPos = this.route.path.indexOf("/", 1); - const curPage = - dividerPos === -1 - ? this.route.path.substr(1) - : this.route.path.substr(1, dividerPos - 1); - + protected updatePageEl(el) { const isWide = this.hass.dockedSidebar === "docked" ? this._wideSidebar : this._wide; - const showSidebar = isWide && !NO_SIDEBAR_PAGES.includes(curPage); - return html` - ${showSidebar - ? html` -
-
Configuration
-
- -
-
- ` - : ""} - - `; + if ("setProperties" in el) { + // As long as we have Polymer panels + (el as PolymerElement).setProperties({ + route: this.routeTail, + hass: this.hass, + showAdvanced: this._showAdvanced, + isWide, + narrow: this.narrow, + cloudStatus: this._cloudStatus, + }); + } else { + el.route = this.routeTail; + el.hass = this.hass; + el.showAdvanced = this._showAdvanced; + el.isWide = isWide; + el.narrow = this.narrow; + el.cloudStatus = this._cloudStatus; + } } private async _updateCloudStatus() { @@ -152,54 +278,6 @@ class HaPanelConfig extends LitElement { setTimeout(() => this._updateCloudStatus(), 5000); } } - - static get styles(): CSSResult { - return css` - :host { - display: block; - height: 100%; - background-color: var(--primary-background-color); - } - - a { - text-decoration: none; - color: var(--primary-text-color); - } - - .side-bar { - border-right: 1px solid var(--divider-color); - background: white; - width: 320px; - float: left; - box-sizing: border-box; - position: fixed; - } - - .toolbar { - display: flex; - align-items: center; - font-size: 20px; - height: 64px; - padding: 0 16px 0 16px; - pointer-events: none; - background-color: var(--primary-background-color); - font-weight: 400; - color: var(--primary-text-color); - border-bottom: 1px solid var(--divider-color); - } - - .wide-config { - float: right; - width: calc(100% - 320px); - height: 100%; - } - - .navigation { - height: calc(100vh - 64px); - overflow: auto; - } - `; - } } declare global { diff --git a/src/panels/config/integrations/ha-config-entries-dashboard.ts b/src/panels/config/integrations/ha-config-entries-dashboard.ts index 2c55f6854499..85c2826bd0c4 100644 --- a/src/panels/config/integrations/ha-config-entries-dashboard.ts +++ b/src/panels/config/integrations/ha-config-entries-dashboard.ts @@ -12,7 +12,7 @@ import "../../../components/ha-card"; import "../../../components/ha-icon-next"; import "../../../components/ha-fab"; import "../../../components/entity/ha-state-icon"; -import "../../../layouts/hass-subpage"; +import "../../../layouts/hass-tabs-subpage"; import "../../../resources/ha-style"; import "../../../components/ha-icon"; @@ -38,18 +38,21 @@ import { css, CSSResult, } from "lit-element"; -import { HomeAssistant } from "../../../types"; +import { HomeAssistant, Route } from "../../../types"; import { ConfigEntry, deleteConfigEntry } from "../../../data/config_entries"; import { fireEvent } from "../../../common/dom/fire_event"; import { EntityRegistryEntry } from "../../../data/entity_registry"; import { DataEntryFlowProgress } from "../../../data/data_entry_flow"; import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; +import { configSections } from "../ha-panel-config"; @customElement("ha-config-entries-dashboard") export class HaConfigManagerDashboard extends LitElement { @property() public hass!: HomeAssistant; @property() public showAdvanced!: boolean; @property() public isWide!: boolean; + @property() public narrow!: boolean; + @property() public route!: Route; @property() private configEntries!: ConfigEntry[]; @@ -72,9 +75,12 @@ export class HaConfigManagerDashboard extends LitElement { protected render(): TemplateResult { return html` - - + `; } @@ -361,7 +368,9 @@ export class HaConfigManagerDashboard extends LitElement { right: 16px; z-index: 1; } - + ha-fab[narrow] { + bottom: 76px; + } ha-fab[rtl] { right: auto; left: 16px; diff --git a/src/panels/config/integrations/ha-config-integrations.ts b/src/panels/config/integrations/ha-config-integrations.ts index e3abd2f4fe1d..511f4e639068 100644 --- a/src/panels/config/integrations/ha-config-integrations.ts +++ b/src/panels/config/integrations/ha-config-integrations.ts @@ -104,7 +104,7 @@ class HaConfigIntegrations extends HassRouterPage { pageEl.narrow = this.narrow; pageEl.isWide = this.isWide; pageEl.showAdvanced = this.showAdvanced; - + pageEl.route = this.routeTail; if (this._currentPage === "dashboard") { pageEl.configEntriesInProgress = this._configEntriesInProgress; return; diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts index b2b30089b04c..a48d9f3c1345 100644 --- a/src/panels/config/person/ha-config-person.ts +++ b/src/panels/config/person/ha-config-person.ts @@ -9,7 +9,7 @@ import { import "@polymer/paper-item/paper-item"; import "@polymer/paper-item/paper-item-body"; -import { HomeAssistant } from "../../../types"; +import { HomeAssistant, Route } from "../../../types"; import { Person, fetchPersons, @@ -19,7 +19,7 @@ import { } from "../../../data/person"; import "../../../components/ha-card"; import "../../../components/ha-fab"; -import "../../../layouts/hass-subpage"; +import "../../../layouts/hass-tabs-subpage"; import "../../../layouts/hass-loading-screen"; import { compare } from "../../../common/string/compare"; import "../ha-config-section"; @@ -28,10 +28,13 @@ import { loadPersonDetailDialog, } from "./show-dialog-person-detail"; import { User, fetchUsers } from "../../../data/user"; +import { configSections } from "../ha-panel-config"; class HaConfigPerson extends LitElement { @property() public hass?: HomeAssistant; @property() public isWide?: boolean; + @property() public narrow?: boolean; + @property() public route!: Route; @property() private _storageItems?: Person[]; @property() private _configItems?: Person[]; private _usersLoad?: Promise; @@ -48,9 +51,12 @@ class HaConfigPerson extends LitElement { } const hass = this.hass; return html` - - +
@@ -72,8 +77,7 @@ class HaSceneDashboard extends LitElement { ` : this.scenes.map( (scene) => html` - -
+
- -
${computeStateName(scene)}
- - - - ${ - !scene.attributes.id - ? html` - - ${this.hass.localize( - "ui.panel.config.scene.picker.only_editable" - )} - - ` - : "" - } - + +
${computeStateName(scene)}
+ +
+ + + ${!scene.attributes.id + ? html` + + ${this.hass.localize( + "ui.panel.config.scene.picker.only_editable" + )} + + ` + : ""} +
- +
` )} - - + `; } @@ -152,13 +154,11 @@ class HaSceneDashboard extends LitElement { css` :host { display: block; - } - - hass-subpage { - min-height: 100vh; + height: 100%; } ha-card { + padding-bottom: 8px; margin-bottom: 56px; } @@ -173,6 +173,10 @@ class HaSceneDashboard extends LitElement { color: var(--primary-text-color); } + .actions { + display: flex; + } + ha-entity-toggle { margin-right: 16px; } @@ -188,7 +192,9 @@ class HaSceneDashboard extends LitElement { bottom: 24px; right: 24px; } - + ha-fab[narrow] { + bottom: 76px; + } ha-fab[rtl] { right: auto; left: 16px; diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts index 295e5192a168..2499125f3d49 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -26,7 +26,7 @@ import "../../../layouts/ha-app-layout"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { haStyle } from "../../../resources/styles"; -import { HomeAssistant } from "../../../types"; +import { HomeAssistant, Route } from "../../../types"; import { navigate } from "../../../common/navigate"; import { computeRTL } from "../../../common/util/compute_rtl"; import { @@ -55,6 +55,7 @@ import memoizeOne from "memoize-one"; import { computeDomain } from "../../../common/entity/compute_domain"; import { HassEvent } from "home-assistant-js-websocket"; import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; +import { configSections } from "../ha-panel-config"; interface DeviceEntities { id: string; @@ -69,7 +70,9 @@ interface DeviceEntitiesLookup { @customElement("ha-scene-editor") export class HaSceneEditor extends SubscribeMixin(LitElement) { @property() public hass!: HomeAssistant; - @property() public isWide?: boolean; + @property() public narrow!: boolean; + @property() public isWide!: boolean; + @property() public route!: Route; @property() public scene?: SceneEntity; @property() public creatingNew?: boolean; @property() public showAdvanced!: boolean; @@ -157,39 +160,36 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) { this._deviceRegistryEntries ); return html` - - - - -
- ${this.scene - ? computeStateName(this.scene) - : this.hass.localize( - "ui.panel.config.scene.editor.default_name" - )} -
- ${this.creatingNew - ? "" - : html` - - `} - - - -
- ${this._errors - ? html` -
${this._errors}
- ` - : ""} + this._backTapped()} + .tabs=${configSections[1]} + > + + ${ + this.creatingNew + ? "" + : html` + + ` + } + + ${ + this._errors + ? html` +
${this._errors}
+ ` + : "" + }
- ${this.scene - ? computeStateName(this.scene) - : this.hass.localize( - "ui.panel.config.scene.editor.default_name" - )} + ${ + this.scene + ? computeStateName(this.scene) + : this.hass.localize( + "ui.panel.config.scene.editor.default_name" + ) + }
${this.hass.localize( @@ -291,87 +293,88 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) { - ${this.showAdvanced - ? html` - -
- ${this.hass.localize( - "ui.panel.config.scene.editor.entities.header" - )} -
-
- ${this.hass.localize( - "ui.panel.config.scene.editor.entities.introduction" - )} -
- ${entities.length - ? html` - - ${entities.map((entityId) => { - const stateObj = this.hass.states[entityId]; - if (!stateObj) { - return html``; - } - return html` - - - - ${computeStateName(stateObj)} - - - - `; - })} - - ` - : ""} - - -
+ ${ + this.showAdvanced + ? html` + +
${this.hass.localize( - "ui.panel.config.scene.editor.entities.device_entities" + "ui.panel.config.scene.editor.entities.header" )} -
- - - ` - : ""} +
+ ${this.hass.localize( + "ui.panel.config.scene.editor.entities.introduction" + )} +
+ ${entities.length + ? html` + + ${entities.map((entityId) => { + const stateObj = this.hass.states[entityId]; + if (!stateObj) { + return html``; + } + return html` + + + + ${computeStateName(stateObj)} + + + + `; + })} + + ` + : ""} + + +
+ ${this.hass.localize( + "ui.panel.config.scene.editor.entities.device_entities" + )} + +
+ + + ` + : "" + }
-
@@ -42,6 +44,8 @@ class HaConfigScript extends PolymerElement { hass="[[hass]]" script="[[script]]" is-wide="[[isWide]]" + narrow="[[narrow]]" + route="[[route]]" creating-new="[[_creatingNew]]" > @@ -53,6 +57,7 @@ class HaConfigScript extends PolymerElement { hass: Object, route: Object, isWide: Boolean, + narrow: Boolean, _routeData: Object, _routeMatches: Boolean, _creatingNew: Boolean, diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index bf527d6b3b0d..19302d286bb7 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -11,7 +11,6 @@ import { TemplateResult, } from "lit-element"; import { classMap } from "lit-html/directives/class-map"; -import { computeStateName } from "../../../common/entity/compute_state_name"; import { navigate } from "../../../common/navigate"; import { computeRTL } from "../../../common/util/compute_rtl"; import "../../../components/ha-fab"; @@ -25,14 +24,17 @@ import { import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; import "../../../layouts/ha-app-layout"; import { haStyle } from "../../../resources/styles"; -import { HomeAssistant } from "../../../types"; +import { HomeAssistant, Route } from "../../../types"; import "../automation/action/ha-automation-action"; import { computeObjectId } from "../../../common/entity/compute_object_id"; +import { configSections } from "../ha-panel-config"; export class HaScriptEditor extends LitElement { @property() public hass!: HomeAssistant; @property() public script!: ScriptEntity; @property() public isWide?: boolean; + @property() public narrow!: boolean; + @property() public route!: Route; @property() public creatingNew?: boolean; @property() private _config?: ScriptConfig; @property() private _dirty?: boolean; @@ -40,32 +42,25 @@ export class HaScriptEditor extends LitElement { protected render(): TemplateResult { return html` - - - - -
- ${this.script - ? computeStateName(this.script) - : this.hass.localize( - "ui.panel.config.script.editor.default_name" - )} -
- ${this.creatingNew - ? "" - : html` - - `} - - + this._backTapped()} + .tabs=${configSections[1]} + > + ${this.creatingNew + ? "" + : html` + + `}
${this._errors @@ -134,9 +129,9 @@ export class HaScriptEditor extends LitElement {
- + `; } @@ -301,7 +296,10 @@ export class HaScriptEditor extends LitElement { bottom: 24px; right: 24px; } - + ha-fab[narrow] { + bottom: 76px; + margin-bottom: -140px; + } ha-fab[dirty] { margin-bottom: 0; } diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index 82dbaee3a62b..2dab312ad87b 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -11,7 +11,7 @@ import "@polymer/paper-icon-button/paper-icon-button"; import "@polymer/paper-item/paper-item-body"; import { HassEntity } from "home-assistant-js-websocket"; -import "../../../layouts/hass-subpage"; +import "../../../layouts/hass-tabs-subpage"; import { computeRTL } from "../../../common/util/compute_rtl"; @@ -22,21 +22,27 @@ import "../ha-config-section"; import { computeStateName } from "../../../common/entity/compute_state_name"; import { haStyle } from "../../../resources/styles"; -import { HomeAssistant } from "../../../types"; +import { HomeAssistant, Route } from "../../../types"; import { triggerScript } from "../../../data/script"; import { showToast } from "../../../util/toast"; +import { configSections } from "../ha-panel-config"; @customElement("ha-script-picker") class HaScriptPicker extends LitElement { @property() public hass!: HomeAssistant; @property() public scripts!: HassEntity[]; @property() public isWide!: boolean; + @property() public narrow!: boolean; + @property() public route!: Route; protected render(): TemplateResult { return html` -
@@ -99,8 +105,8 @@ class HaScriptPicker extends LitElement { - + `; } @@ -169,7 +175,9 @@ class HaScriptPicker extends LitElement { bottom: 24px; right: 24px; } - + ha-fab[narrow] { + bottom: 76px; + } ha-fab[rtl] { right: auto; left: 16px; diff --git a/src/panels/config/server_control/ha-config-server-control.js b/src/panels/config/server_control/ha-config-server-control.js index 21c9162b87cd..47840ca0c1e2 100644 --- a/src/panels/config/server_control/ha-config-server-control.js +++ b/src/panels/config/server_control/ha-config-server-control.js @@ -4,12 +4,13 @@ import "@polymer/paper-icon-button/paper-icon-button"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; -import "../../../layouts/hass-subpage"; +import "../../../layouts/hass-tabs-subpage"; import "../../../resources/ha-style"; import "./ha-config-section-server-control"; import LocalizeMixin from "../../../mixins/localize-mixin"; +import { configSections } from "../ha-panel-config"; /* * @appliesMixin LocalizeMixin @@ -33,9 +34,13 @@ class HaConfigServerControl extends LocalizeMixin(PolymerElement) { } -
- + `; } @@ -52,10 +57,16 @@ class HaConfigServerControl extends LocalizeMixin(PolymerElement) { return { hass: Object, isWide: Boolean, + narrow: Boolean, + route: Object, showAdvanced: Boolean, }; } + _computeTabs() { + return configSections[3]; + } + computeClasses(isWide) { return isWide ? "content" : "content narrow"; } diff --git a/src/panels/config/users/ha-config-user-picker.js b/src/panels/config/users/ha-config-user-picker.js index babfea2436ab..8c93c2ac8cf2 100644 --- a/src/panels/config/users/ha-config-user-picker.js +++ b/src/panels/config/users/ha-config-user-picker.js @@ -3,7 +3,7 @@ import "@polymer/paper-item/paper-item-body"; import { html } from "@polymer/polymer/lib/utils/html-tag"; import { PolymerElement } from "@polymer/polymer/polymer-element"; -import "../../../layouts/hass-subpage"; +import "../../../layouts/hass-tabs-subpage"; import "../../../components/ha-icon-next"; import "../../../components/ha-card"; import "../../../components/ha-fab"; @@ -13,6 +13,7 @@ import NavigateMixin from "../../../mixins/navigate-mixin"; import { EventsMixin } from "../../../mixins/events-mixin"; import { computeRTL } from "../../../common/util/compute_rtl"; +import { configSections } from "../ha-panel-config"; let registeredDialog = false; @@ -41,6 +42,9 @@ class HaUserPicker extends EventsMixin( right: auto; left: 16px; } + ha-fab[narrow] { + bottom: 76px; + } ha-fab[rtl][is-wide] { bottom: 24px; right: auto; @@ -58,9 +62,12 @@ class HaUserPicker extends EventsMixin( } - `; @@ -47,6 +51,7 @@ class HaConfigUsers extends NavigateMixin(PolymerElement) { return { hass: Object, isWide: Boolean, + narrow: Boolean, route: { type: Object, observer: "_checkRoute", diff --git a/src/panels/config/users/ha-user-editor.ts b/src/panels/config/users/ha-user-editor.ts index 207cde707c6a..969620f7a070 100644 --- a/src/panels/config/users/ha-user-editor.ts +++ b/src/panels/config/users/ha-user-editor.ts @@ -10,10 +10,10 @@ import { import { until } from "lit-html/directives/until"; import "@material/mwc-button"; -import "../../../layouts/hass-subpage"; +import "../../../layouts/hass-tabs-subpage"; import { haStyle } from "../../../resources/styles"; import "../../../components/ha-card"; -import { HomeAssistant } from "../../../types"; +import { HomeAssistant, Route } from "../../../types"; import { fireEvent } from "../../../common/dom/fire_event"; import { navigate } from "../../../common/navigate"; import { @@ -29,6 +29,7 @@ import { showConfirmationDialog, showPromptDialog, } from "../../../dialogs/generic/show-dialog-box"; +import { configSections } from "../ha-panel-config"; declare global { interface HASSDomEvents { @@ -42,6 +43,8 @@ const GROUPS = [SYSTEM_GROUP_ID_USER, SYSTEM_GROUP_ID_ADMIN]; class HaUserEditor extends LitElement { @property() public hass?: HomeAssistant; @property() public user?: User; + @property() public narrow?: boolean; + @property() public route!: Route; protected render(): TemplateResult { const hass = this.hass; @@ -51,8 +54,11 @@ class HaUserEditor extends LitElement { } return html` - @@ -130,7 +136,7 @@ class HaUserEditor extends LitElement { : ""} - + `; } @@ -225,7 +231,7 @@ class HaUserEditor extends LitElement { } ha-card { max-width: 600px; - margin: 0 auto 16px; + margin: 16px auto 16px; } hass-subpage ha-card:first-of-type { direction: ltr; diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts index 8554d5433eca..a70f3e4a4f41 100644 --- a/src/panels/config/zone/ha-config-zone.ts +++ b/src/panels/config/zone/ha-config-zone.ts @@ -16,10 +16,10 @@ import "@polymer/paper-tooltip/paper-tooltip"; import "../../../components/map/ha-locations-editor"; -import { HomeAssistant } from "../../../types"; +import { HomeAssistant, Route } from "../../../types"; import "../../../components/ha-card"; import "../../../components/ha-fab"; -import "../../../layouts/hass-subpage"; +import "../../../layouts/hass-tabs-subpage"; import "../../../layouts/hass-loading-screen"; import { compare } from "../../../common/string/compare"; import "../ha-config-section"; @@ -42,12 +42,14 @@ import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket"; import memoizeOne from "memoize-one"; import { SubscribeMixin } from "../../../mixins/subscribe-mixin"; import { subscribeEntityRegistry } from "../../../data/entity_registry"; +import { configSections } from "../ha-panel-config"; @customElement("ha-config-zone") export class HaConfigZone extends SubscribeMixin(LitElement) { @property() public hass!: HomeAssistant; @property() public isWide?: boolean; @property() public narrow?: boolean; + @property() public route!: Route; @property() private _storageItems?: Zone[]; @property() private _stateItems?: HassEntity[]; @property() private _activeEntry: string = ""; @@ -179,7 +181,13 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { `; return html` - + ${this.narrow ? html` @@ -206,10 +214,11 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { ` : ""} - + Date: Tue, 28 Jan 2020 16:38:01 +0100 Subject: [PATCH 2/6] Update ha-menu-button.ts --- src/components/ha-menu-button.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ha-menu-button.ts b/src/components/ha-menu-button.ts index 1086ca8c87f1..7f64e3443276 100644 --- a/src/components/ha-menu-button.ts +++ b/src/components/ha-menu-button.ts @@ -135,7 +135,7 @@ class HaMenuButton extends LitElement { top: 5px; right: 2px; border-radius: 50%; - border: 2px solid var(--primary-color); + border: 2px solid var(--app-header-background-color); } `; } From 4e9f8f7e8f1b0323c8653e36127b6dbd003aa1dd Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 28 Jan 2020 17:04:23 +0100 Subject: [PATCH 3/6] Icons --- .../config/dashboard/ha-config-dashboard.ts | 39 ++++++------------- .../config/dashboard/ha-config-navigation.ts | 9 +++-- src/panels/config/ha-panel-config.ts | 24 ++++++------ 3 files changed, 28 insertions(+), 44 deletions(-) diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index c9c3dc6931da..b2c796cdb48a 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -58,32 +58,17 @@ class HaConfigDashboard extends LitElement { ${this.cloudStatus && 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" - )} -
- `} - - - - + ` : ""} @@ -130,8 +115,6 @@ class HaConfigDashboard extends LitElement { haStyle, css` app-header { - --app-header-background-color: var(--sidebar-background-color); - --app-header-text-color: var(--sidebar-text-color); border-bottom: 1px solid var(--divider-color); } diff --git a/src/panels/config/dashboard/ha-config-navigation.ts b/src/panels/config/dashboard/ha-config-navigation.ts index 50d9b119f2c3..509621149d61 100644 --- a/src/panels/config/dashboard/ha-config-navigation.ts +++ b/src/panels/config/dashboard/ha-config-navigation.ts @@ -1,6 +1,6 @@ import "@polymer/iron-icon/iron-icon"; import "@polymer/paper-item/paper-item-body"; -import "@polymer/paper-item/paper-item"; +import "@polymer/paper-item/paper-icon-item"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; @@ -34,12 +34,13 @@ class HaConfigNavigation extends LitElement { protected render(): TemplateResult { return html` - ${this.pages.map(({ page, core, advanced, info }) => + ${this.pages.map(({ page, core, advanced, info, icon }) => (core || isComponentLoaded(this.hass, page)) && (!advanced || this.showAdvanced) ? html` - + + ${this.hass.localize(`ui.panel.config.${page}.caption`)} ${page === "cloud" && (info as CloudStatus) @@ -69,7 +70,7 @@ class HaConfigNavigation extends LitElement { `} - + ` : "" diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts index 3c1df1b23372..3fa2cd56d881 100644 --- a/src/panels/config/ha-panel-config.ts +++ b/src/panels/config/ha-panel-config.ts @@ -23,32 +23,32 @@ declare global { export const configSections: ConfigPageNavigation[][] = [ [ - { page: "integrations", icon: "hass:home-assistant", core: true }, + { page: "integrations", icon: "hass:sitemap", core: true }, { page: "devices", icon: "hass:home-assistant", core: true }, { page: "entities", icon: "hass:home-assistant", core: true }, - { page: "areas", icon: "hass:home-assistant", core: true }, + { page: "areas", icon: "hass:floor-plan", core: true }, ], [ - { page: "automation", icon: "hass:home-assistant" }, - { page: "scene", icon: "hass:home-assistant" }, - { page: "script", icon: "hass:home-assistant" }, + { page: "automation", icon: "hass:cogs" }, + { page: "scene", icon: "hass:tune" }, + { page: "script", icon: "hass:script-text" }, ], [ - { page: "person", icon: "hass:home-assistant" }, - { page: "zone", icon: "hass:home-assistant", core: true }, - { page: "users", icon: "hass:home-assistant", core: true }, + { page: "person", icon: "hass:account" }, + { page: "zone", icon: "hass:map-marker-radius", core: true }, + { page: "users", icon: "hass:account-badge-horizontal", core: true }, ], [ { page: "core", icon: "hass:home-assistant", core: true }, - { page: "server_control", icon: "hass:home-assistant", core: true }, + { page: "server_control", icon: "hass:server", core: true }, { page: "customize", - icon: "hass:home-assistant", + icon: "hass:pencil", core: true, advanced: true, }, - { page: "zha" }, - { page: "zwave" }, + { page: "zha", icon: "hass:zigbee" }, + { page: "zwave", icon: "hass:z-wave" }, ], ]; From 5853a599198a3de8c3ed58855a7ad896f2086551 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 28 Jan 2020 17:26:36 +0100 Subject: [PATCH 4/6] update --- src/layouts/hass-tabs-subpage.ts | 4 ++++ src/panels/config/dashboard/ha-config-dashboard.ts | 2 +- src/panels/config/ha-panel-config.ts | 4 ++-- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index 4a41766f7469..0c298818ec79 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -162,6 +162,10 @@ class HassTabsSubpage extends LitElement { height: 64px; } + .name { + white-space: nowrap; + } + .tab.active { color: var(--primary-color); } diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index b2c796cdb48a..db8512c31219 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -15,7 +15,7 @@ import "../../../components/ha-menu-button"; import { haStyle } from "../../../resources/styles"; import { HomeAssistant } from "../../../types"; -import { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud"; +import { CloudStatus } from "../../../data/cloud"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import "../../../components/ha-card"; diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts index 3fa2cd56d881..0af1ac967a1a 100644 --- a/src/panels/config/ha-panel-config.ts +++ b/src/panels/config/ha-panel-config.ts @@ -24,8 +24,8 @@ declare global { export const configSections: ConfigPageNavigation[][] = [ [ { page: "integrations", icon: "hass:sitemap", core: true }, - { page: "devices", icon: "hass:home-assistant", core: true }, - { page: "entities", icon: "hass:home-assistant", core: true }, + { page: "devices", icon: "hass:devices", core: true }, + { page: "entities", icon: "hass:shape", core: true }, { page: "areas", icon: "hass:floor-plan", core: true }, ], [ From 1a6365a8fcb102d9fdb623e955a4f0e0ae1b72a3 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 28 Jan 2020 21:23:00 +0100 Subject: [PATCH 5/6] Review comments --- src/common/entity/domain_icon.ts | 8 +- src/layouts/hass-tabs-subpage.ts | 50 ++++--- src/panels/config/areas/ha-config-areas.ts | 2 +- .../config/automation/ha-automation-editor.ts | 2 +- .../config/automation/ha-automation-picker.ts | 2 +- .../config/dashboard/ha-config-dashboard.ts | 19 +-- .../config/dashboard/ha-config-navigation.ts | 43 +++--- src/panels/config/ha-config-section.ts | 83 +++++++++--- src/panels/config/ha-panel-config.ts | 124 +++++++++++++++--- .../ha-config-entries-dashboard.ts | 2 +- src/panels/config/person/ha-config-person.ts | 2 +- src/panels/config/scene/ha-scene-dashboard.ts | 2 +- src/panels/config/scene/ha-scene-editor.ts | 2 +- src/panels/config/script/ha-script-editor.ts | 2 +- src/panels/config/script/ha-script-picker.ts | 2 +- .../config/users/ha-config-user-picker.js | 2 +- src/panels/config/zone/ha-config-zone.ts | 2 +- 17 files changed, 245 insertions(+), 104 deletions(-) diff --git a/src/common/entity/domain_icon.ts b/src/common/entity/domain_icon.ts index 0bb2535a7712..9d36310a2e47 100644 --- a/src/common/entity/domain_icon.ts +++ b/src/common/entity/domain_icon.ts @@ -8,7 +8,7 @@ import { DEFAULT_DOMAIN_ICON } from "../const"; const fixedIcons = { alert: "hass:alert", alexa: "hass:amazon-alexa", - automation: "hass:playlist-play", + automation: "hass:robot", calendar: "hass:calendar", camera: "hass:video", climate: "hass:thermostat", @@ -36,8 +36,8 @@ const fixedIcons = { plant: "hass:flower", proximity: "hass:apple-safari", remote: "hass:remote", - scene: "hass:google-pages", - script: "hass:file-document", + scene: "hass:palette", + script: "hass:script-text", sensor: "hass:eye", simple_alarm: "hass:bell", sun: "hass:white-balance-sunny", @@ -48,7 +48,7 @@ const fixedIcons = { water_heater: "hass:thermometer", weather: "hass:weather-cloudy", weblink: "hass:open-in-new", - zone: "hass:map-marker", + zone: "hass:map-marker-radius", }; export const domainIcon = (domain: string, state?: string): string => { diff --git a/src/layouts/hass-tabs-subpage.ts b/src/layouts/hass-tabs-subpage.ts index 0c298818ec79..4a51d61785ac 100644 --- a/src/layouts/hass-tabs-subpage.ts +++ b/src/layouts/hass-tabs-subpage.ts @@ -14,19 +14,28 @@ import { classMap } from "lit-html/directives/class-map"; import { Route, HomeAssistant } from "../types"; import { navigate } from "../common/navigate"; import "@material/mwc-ripple"; -import { ConfigPageNavigation } from "../panels/config/dashboard/ha-config-navigation"; import { isComponentLoaded } from "../common/config/is_component_loaded"; +export interface PageNavigation { + path: string; + translationKey?: string; + component?: string; + name?: string; + core?: boolean; + exportOnly?: boolean; + icon?: string; + info?: any; +} + @customElement("hass-tabs-subpage") class HassTabsSubpage extends LitElement { @property() public hass!: HomeAssistant; - @property({ type: Boolean }) public showBackButton = true; @property({ type: String, attribute: "back-path" }) public backPath?: string; @property() public backCallback?: () => void; @property({ type: Boolean }) public hassio = false; @property({ type: Boolean }) public showAdvanced = false; @property() public route!: Route; - @property() public tabs!: ConfigPageNavigation[]; + @property() public tabs!: PageNavigation[]; @property({ type: Boolean, reflect: true }) public narrow = false; @property() private _activeTab: number = -1; @@ -34,7 +43,7 @@ class HassTabsSubpage extends LitElement { super.updated(changedProperties); if (changedProperties.has("route")) { this._activeTab = this.tabs.findIndex((tab) => - this.route.prefix.includes(`/config/${tab.page}`) + this.route.prefix.includes(tab.path) ); } } @@ -46,31 +55,32 @@ class HassTabsSubpage extends LitElement { aria-label="Back" .hassio=${this.hassio} @click=${this._backTapped} - class=${classMap({ hidden: !this.showBackButton })} >
- ${this.tabs.map(({ page, core, advanced, icon }, index) => - (core || isComponentLoaded(this.hass, page)) && - (!advanced || this.showAdvanced) + ${this.tabs.map((page, index) => + (!page.component || + page.core || + isComponentLoaded(this.hass, page.component)) && + (!page.exportOnly || this.showAdvanced) ? html`
${this.narrow ? html` - + ` : ""} ${!this.narrow || index === this._activeTab ? html` ${this.hass.localize( - `ui.panel.config.${page}.caption` - )}${page.translationKey + ? this.hass.localize(page.translationKey) + : name} ` : ""} @@ -92,7 +102,7 @@ class HassTabsSubpage extends LitElement { } private _tabTapped(ev: MouseEvent): void { - navigate(this, `/config/${(ev.currentTarget as any).page}`, true); + navigate(this, (ev.currentTarget as any).path, true); } private _backTapped(): void { @@ -125,6 +135,12 @@ class HassTabsSubpage extends LitElement { color: var(--sidebar-text-color); border-bottom: 1px solid var(--divider-color); padding: 0 16px; + box-sizing: border-box; + } + + :host([narrow]) .toolbar { + background-color: var(--primary-background-color); + border-bottom: none; } #tabbar { @@ -138,6 +154,7 @@ class HassTabsSubpage extends LitElement { left: 0; padding: 0 16px; box-sizing: border-box; + background-color: var(--sidebar-background-color); border-top: 1px solid var(--divider-color); justify-content: space-between; z-index: 1; @@ -160,6 +177,7 @@ class HassTabsSubpage extends LitElement { align-items: center; justify-content: center; height: 64px; + cursor: pointer; } .name { @@ -187,10 +205,6 @@ class HassTabsSubpage extends LitElement { color: var(--sidebar-icon-color); } - ha-paper-icon-button-arrow-prev.hidden { - visibility: hidden; - } - [main-title] { margin: 0 0 0 24px; line-height: 20px; diff --git a/src/panels/config/areas/ha-config-areas.ts b/src/panels/config/areas/ha-config-areas.ts index eee7f5c4251d..0e236d991c1d 100644 --- a/src/panels/config/areas/ha-config-areas.ts +++ b/src/panels/config/areas/ha-config-areas.ts @@ -201,7 +201,7 @@ All devices in this area will become unassigned.`) right: 24px; } ha-fab[narrow] { - bottom: 76px; + bottom: 84px; } ha-fab.rtl { right: auto; diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index 77e0506992eb..c62833ee7d1e 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -403,7 +403,7 @@ export class HaAutomationEditor extends LitElement { right: 24px; } ha-fab[narrow] { - bottom: 76px; + bottom: 84px; margin-bottom: -140px; } ha-fab[dirty] { diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index c57d1f90d28e..b7906ed7f29d 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -229,7 +229,7 @@ class HaAutomationPicker extends LitElement { right: 24px; } ha-fab[narrow] { - bottom: 76px; + bottom: 84px; } ha-fab[rtl] { right: auto; diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index db8512c31219..f48db7fb3e71 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -42,7 +42,6 @@ class HaConfigDashboard extends LitElement { .hass=${this.hass} .narrow=${this.narrow} > -
${this.hass.localize("panel.config")}
@@ -63,7 +62,9 @@ class HaConfigDashboard extends LitElement { .showAdvanced=${this.showAdvanced} .pages=${[ { - page: "cloud", + component: "cloud", + path: "/config/cloud", + translationKey: "ui.panel.config.cloud.caption", info: this.cloudStatus, icon: "hass:cloud-lock", }, @@ -83,14 +84,6 @@ class HaConfigDashboard extends LitElement { ` )} - - - - ${!this.showAdvanced ? html`
@@ -115,12 +108,14 @@ class HaConfigDashboard extends LitElement { haStyle, css` app-header { - border-bottom: 1px solid var(--divider-color); + --app-header-background-color: var(--primary-background-color); } - ha-config-navigation:last-child { margin-bottom: 24px; } + ha-config-section { + margin-top: -20px; + } ha-card { overflow: hidden; } diff --git a/src/panels/config/dashboard/ha-config-navigation.ts b/src/panels/config/dashboard/ha-config-navigation.ts index 509621149d61..3af4194ac972 100644 --- a/src/panels/config/dashboard/ha-config-navigation.ts +++ b/src/panels/config/dashboard/ha-config-navigation.ts @@ -17,40 +17,41 @@ import { } from "lit-element"; import { HomeAssistant } from "../../../types"; import { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud"; - -export interface ConfigPageNavigation { - page: string; - core?: boolean; - advanced?: boolean; - icon?: string; - info?: any; -} +import { PageNavigation } from "../../../layouts/hass-tabs-subpage"; @customElement("ha-config-navigation") class HaConfigNavigation extends LitElement { @property() public hass!: HomeAssistant; @property() public showAdvanced!: boolean; - @property() public pages!: ConfigPageNavigation[]; + @property() public pages!: PageNavigation[]; protected render(): TemplateResult { return html` - ${this.pages.map(({ page, core, advanced, info, icon }) => - (core || isComponentLoaded(this.hass, page)) && - (!advanced || this.showAdvanced) + ${this.pages.map((page) => + (!page.component || + page.core || + isComponentLoaded(this.hass, page.component)) && + (!page.exportOnly || this.showAdvanced) ? html` - + - + - ${this.hass.localize(`ui.panel.config.${page}.caption`)} - ${page === "cloud" && (info as CloudStatus) - ? info.logged_in + ${this.hass.localize( + `ui.panel.config.${page.component}.caption` + )} + ${page.component === "cloud" && (page.info as CloudStatus) + ? page.info.logged_in ? html`
${this.hass.localize( "ui.panel.config.cloud.description_login", "email", - (info as CloudStatusLoggedIn).email + (page.info as CloudStatusLoggedIn).email )}
` @@ -64,7 +65,7 @@ class HaConfigNavigation extends LitElement { : html`
${this.hass.localize( - `ui.panel.config.${page}.description` + `ui.panel.config.${page.component}.description` )}
`} @@ -87,6 +88,10 @@ class HaConfigNavigation extends LitElement { display: block; outline: 0; } + ha-icon, + ha-icon-next { + color: var(--secondary-text-color); + } .iron-selected paper-item::before, a:not(.iron-selected):focus::before { position: absolute; diff --git a/src/panels/config/ha-config-section.ts b/src/panels/config/ha-config-section.ts index 802bd651282d..2e4e70db3cd4 100644 --- a/src/panels/config/ha-config-section.ts +++ b/src/panels/config/ha-config-section.ts @@ -1,18 +1,59 @@ -import { customElement } from "lit-element"; +import { customElement, LitElement, html, css, property } from "lit-element"; +import { classMap } from "lit-html/directives/class-map"; @customElement("ha-config-section") -export class HaConfigSection extends HTMLElement { - constructor() { - super(); - this.attachShadow({ mode: "open" }); - this.shadowRoot!.innerHTML = ` - -
-
-
-
-
-
-
+ + .narrow.content { + max-width: 640px; + } + .narrow .together { + margin-top: 20px; + } + .narrow .intro { + padding-bottom: 20px; + margin-right: 0; + max-width: 500px; + } `; } } diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts index 0af1ac967a1a..54907c8e0b00 100644 --- a/src/panels/config/ha-panel-config.ts +++ b/src/panels/config/ha-panel-config.ts @@ -12,7 +12,7 @@ import { } from "../../data/frontend"; import { HassRouterPage, RouterOptions } from "../../layouts/hass-router-page"; import { PolymerElement } from "@polymer/polymer"; -import { ConfigPageNavigation } from "./dashboard/ha-config-navigation"; +import { PageNavigation } from "../../layouts/hass-tabs-subpage"; declare global { // for fire event @@ -21,34 +21,116 @@ declare global { } } -export const configSections: ConfigPageNavigation[][] = [ +export const configSections: PageNavigation[][] = [ [ - { page: "integrations", icon: "hass:sitemap", core: true }, - { page: "devices", icon: "hass:devices", core: true }, - { page: "entities", icon: "hass:shape", core: true }, - { page: "areas", icon: "hass:floor-plan", core: true }, + { + component: "integrations", + path: "/config/integrations", + translationKey: "ui.panel.config.integrations.caption", + icon: "hass:puzzle", + core: true, + }, + { + component: "devices", + path: "/config/devices", + translationKey: "ui.panel.config.devices.caption", + icon: "hass:devices", + core: true, + }, + { + component: "entities", + path: "/config/entities", + translationKey: "ui.panel.config.entities.caption", + icon: "hass:shape", + core: true, + }, + { + component: "areas", + path: "/config/areas", + translationKey: "ui.panel.config.areas.caption", + icon: "hass:sofa", + core: true, + }, ], [ - { page: "automation", icon: "hass:cogs" }, - { page: "scene", icon: "hass:tune" }, - { page: "script", icon: "hass:script-text" }, + { + component: "automation", + path: "/config/automation", + translationKey: "ui.panel.config.automation.caption", + icon: "hass:robot", + }, + { + component: "scene", + path: "/config/scene", + translationKey: "ui.panel.config.scene.caption", + icon: "hass:palette", + }, + { + component: "script", + path: "/config/script", + translationKey: "ui.panel.config.script.caption", + icon: "hass:script-text", + }, ], [ - { page: "person", icon: "hass:account" }, - { page: "zone", icon: "hass:map-marker-radius", core: true }, - { page: "users", icon: "hass:account-badge-horizontal", core: true }, + { + component: "person", + path: "/config/person", + translationKey: "ui.panel.config.person.caption", + icon: "hass:account", + }, + { + component: "zone", + path: "/config/zone", + translationKey: "ui.panel.config.zone.caption", + icon: "hass:map-marker-radius", + core: true, + }, + { + component: "users", + path: "/config/users", + translationKey: "ui.panel.config.users.caption", + icon: "hass:account-badge-horizontal", + core: true, + }, ], [ - { page: "core", icon: "hass:home-assistant", core: true }, - { page: "server_control", icon: "hass:server", core: true }, { - page: "customize", + component: "core", + path: "/config/core", + translationKey: "ui.panel.config.core.caption", + icon: "hass:home-assistant", + core: true, + }, + { + component: "server_control", + path: "/config/server_control", + translationKey: "ui.panel.config.server_control.caption", + icon: "hass:server", + core: true, + }, + { + component: "customize", + path: "/config/customize", + translationKey: "ui.panel.config.customize.caption", icon: "hass:pencil", core: true, - advanced: true, + exportOnly: true, + }, + ], + [ + { + component: "zha", + path: "/config/zha", + translationKey: "ui.panel.config.zha.caption", + icon: "hass:zigbee", + }, + { + component: "zwave", + path: "/config/zwave", + translationKey: "ui.panel.config.zwave.caption", + icon: "hass:z-wave", }, - { page: "zha", icon: "hass:zigbee" }, - { page: "zwave", icon: "hass:z-wave" }, ], ]; @@ -230,6 +312,9 @@ class HaPanelConfig extends HassRouterPage { if (isComponentLoaded(this.hass, "cloud")) { this._updateCloudStatus(); } + this.addEventListener("ha-refresh-cloud-status", () => + this._updateCloudStatus() + ); this.style.setProperty( "--app-header-background-color", "var(--sidebar-background-color)" @@ -242,9 +327,6 @@ class HaPanelConfig extends HassRouterPage { "--app-header-border-bottom", "1px solid var(--divider-color)" ); - this.addEventListener("ha-refresh-cloud-status", () => - this._updateCloudStatus() - ); } protected updatePageEl(el) { diff --git a/src/panels/config/integrations/ha-config-entries-dashboard.ts b/src/panels/config/integrations/ha-config-entries-dashboard.ts index 85c2826bd0c4..1de2a92c5ca5 100644 --- a/src/panels/config/integrations/ha-config-entries-dashboard.ts +++ b/src/panels/config/integrations/ha-config-entries-dashboard.ts @@ -369,7 +369,7 @@ export class HaConfigManagerDashboard extends LitElement { z-index: 1; } ha-fab[narrow] { - bottom: 76px; + bottom: 84px; } ha-fab[rtl] { right: auto; diff --git a/src/panels/config/person/ha-config-person.ts b/src/panels/config/person/ha-config-person.ts index a48d9f3c1345..b0daa4c83127 100644 --- a/src/panels/config/person/ha-config-person.ts +++ b/src/panels/config/person/ha-config-person.ts @@ -239,7 +239,7 @@ ${this.hass!.localize("ui.panel.config.person.confirm_delete2")}`) z-index: 1; } ha-fab[narrow] { - bottom: 76px; + bottom: 84px; } ha-fab[is-wide] { bottom: 24px; diff --git a/src/panels/config/scene/ha-scene-dashboard.ts b/src/panels/config/scene/ha-scene-dashboard.ts index 05692b537641..b1ec6cf55c8c 100644 --- a/src/panels/config/scene/ha-scene-dashboard.ts +++ b/src/panels/config/scene/ha-scene-dashboard.ts @@ -193,7 +193,7 @@ class HaSceneDashboard extends LitElement { right: 24px; } ha-fab[narrow] { - bottom: 76px; + bottom: 84px; } ha-fab[rtl] { right: auto; diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts index 2499125f3d49..258b7371c276 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -710,7 +710,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) { right: 24px; } ha-fab[narrow] { - bottom: 76px; + bottom: 84px; margin-bottom: -140px; } ha-fab[dirty] { diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 19302d286bb7..47a6b03e8d75 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -297,7 +297,7 @@ export class HaScriptEditor extends LitElement { right: 24px; } ha-fab[narrow] { - bottom: 76px; + bottom: 84px; margin-bottom: -140px; } ha-fab[dirty] { diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index 2dab312ad87b..54efd28ad175 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -176,7 +176,7 @@ class HaScriptPicker extends LitElement { right: 24px; } ha-fab[narrow] { - bottom: 76px; + bottom: 84px; } ha-fab[rtl] { right: auto; diff --git a/src/panels/config/users/ha-config-user-picker.js b/src/panels/config/users/ha-config-user-picker.js index 8c93c2ac8cf2..0f1ca0217ec5 100644 --- a/src/panels/config/users/ha-config-user-picker.js +++ b/src/panels/config/users/ha-config-user-picker.js @@ -43,7 +43,7 @@ class HaUserPicker extends EventsMixin( left: 16px; } ha-fab[narrow] { - bottom: 76px; + bottom: 84px; } ha-fab[rtl][is-wide] { bottom: 24px; diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts index a70f3e4a4f41..dc855785f7de 100644 --- a/src/panels/config/zone/ha-config-zone.ts +++ b/src/panels/config/zone/ha-config-zone.ts @@ -463,7 +463,7 @@ ${this.hass!.localize("ui.panel.config.zone.confirm_delete2")}`) right: 24px; } ha-fab[narrow] { - bottom: 76px; + bottom: 84px; } `; } From c45937a25d4bcebd4cd5b1490f90c731ffd76a7a Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 28 Jan 2020 21:33:13 +0100 Subject: [PATCH 6/6] configSections -> object instead of array --- src/panels/config/areas/ha-config-areas.ts | 2 +- .../config/automation/ha-automation-editor.ts | 2 +- .../config/automation/ha-automation-picker.ts | 2 +- src/panels/config/core/ha-config-core.js | 2 +- src/panels/config/customize/ha-config-customize.js | 2 +- src/panels/config/dashboard/ha-config-dashboard.ts | 2 +- src/panels/config/devices/ha-config-device-page.ts | 2 +- .../config/devices/ha-config-devices-dashboard.ts | 2 +- src/panels/config/entities/ha-config-entities.ts | 2 +- src/panels/config/ha-panel-config.ts | 14 +++++++------- .../integrations/ha-config-entries-dashboard.ts | 2 +- src/panels/config/person/ha-config-person.ts | 2 +- src/panels/config/scene/ha-scene-dashboard.ts | 2 +- src/panels/config/scene/ha-scene-editor.ts | 2 +- src/panels/config/script/ha-script-editor.ts | 2 +- src/panels/config/script/ha-script-picker.ts | 2 +- .../server_control/ha-config-server-control.js | 2 +- src/panels/config/users/ha-config-user-picker.js | 2 +- src/panels/config/users/ha-user-editor.ts | 2 +- src/panels/config/zone/ha-config-zone.ts | 2 +- 20 files changed, 26 insertions(+), 26 deletions(-) diff --git a/src/panels/config/areas/ha-config-areas.ts b/src/panels/config/areas/ha-config-areas.ts index 0e236d991c1d..7c3cf09932c6 100644 --- a/src/panels/config/areas/ha-config-areas.ts +++ b/src/panels/config/areas/ha-config-areas.ts @@ -60,7 +60,7 @@ export class HaConfigAreas extends LitElement { .narrow=${this.narrow} back-path="/config" .route=${this.route} - .tabs=${configSections[0]} + .tabs=${configSections.persons} > diff --git a/src/panels/config/automation/ha-automation-editor.ts b/src/panels/config/automation/ha-automation-editor.ts index c62833ee7d1e..968f92af24ab 100644 --- a/src/panels/config/automation/ha-automation-editor.ts +++ b/src/panels/config/automation/ha-automation-editor.ts @@ -55,7 +55,7 @@ export class HaAutomationEditor extends LitElement { .narrow=${this.narrow} .route=${this.route} .backCallback=${() => this._backTapped()} - .tabs=${configSections[1]} + .tabs=${configSections.automation} > ${this.creatingNew ? "" diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts index b7906ed7f29d..608956c48777 100644 --- a/src/panels/config/automation/ha-automation-picker.ts +++ b/src/panels/config/automation/ha-automation-picker.ts @@ -49,7 +49,7 @@ class HaAutomationPicker extends LitElement { .narrow=${this.narrow} back-path="/config" .route=${this.route} - .tabs=${configSections[1]} + .tabs=${configSections.automation} >
diff --git a/src/panels/config/core/ha-config-core.js b/src/panels/config/core/ha-config-core.js index a5caee0f40d8..723d74f9f1b6 100644 --- a/src/panels/config/core/ha-config-core.js +++ b/src/panels/config/core/ha-config-core.js @@ -65,7 +65,7 @@ class HaConfigCore extends LocalizeMixin(PolymerElement) { } _computeTabs() { - return configSections[3]; + return configSections.general; } computeClasses(isWide) { diff --git a/src/panels/config/customize/ha-config-customize.js b/src/panels/config/customize/ha-config-customize.js index b85ae26f092e..abd812191f0d 100644 --- a/src/panels/config/customize/ha-config-customize.js +++ b/src/panels/config/customize/ha-config-customize.js @@ -93,7 +93,7 @@ class HaConfigCustomize extends LocalizeMixin(PolymerElement) { } _computeTabs() { - return configSections[3]; + return configSections.general; } computeEntities(hass) { diff --git a/src/panels/config/dashboard/ha-config-dashboard.ts b/src/panels/config/dashboard/ha-config-dashboard.ts index f48db7fb3e71..5114a62631dd 100644 --- a/src/panels/config/dashboard/ha-config-dashboard.ts +++ b/src/panels/config/dashboard/ha-config-dashboard.ts @@ -73,7 +73,7 @@ class HaConfigDashboard extends LitElement { ` : ""} - ${configSections.map( + ${Object.values(configSections).map( (section) => html`
diff --git a/src/panels/config/entities/ha-config-entities.ts b/src/panels/config/entities/ha-config-entities.ts index 67e97518d046..f16cfd5fb21a 100644 --- a/src/panels/config/entities/ha-config-entities.ts +++ b/src/panels/config/entities/ha-config-entities.ts @@ -229,7 +229,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) { .narrow=${this.narrow} back-path="/config" .route=${this.route} - .tabs=${configSections[0]} + .tabs=${configSections.integrations} >
diff --git a/src/panels/config/ha-panel-config.ts b/src/panels/config/ha-panel-config.ts index 54907c8e0b00..f5c31b369a0e 100644 --- a/src/panels/config/ha-panel-config.ts +++ b/src/panels/config/ha-panel-config.ts @@ -21,8 +21,8 @@ declare global { } } -export const configSections: PageNavigation[][] = [ - [ +export const configSections: { [name: string]: PageNavigation[] } = { + integrations: [ { component: "integrations", path: "/config/integrations", @@ -52,7 +52,7 @@ export const configSections: PageNavigation[][] = [ core: true, }, ], - [ + automation: [ { component: "automation", path: "/config/automation", @@ -72,7 +72,7 @@ export const configSections: PageNavigation[][] = [ icon: "hass:script-text", }, ], - [ + persons: [ { component: "person", path: "/config/person", @@ -94,7 +94,7 @@ export const configSections: PageNavigation[][] = [ core: true, }, ], - [ + general: [ { component: "core", path: "/config/core", @@ -118,7 +118,7 @@ export const configSections: PageNavigation[][] = [ exportOnly: true, }, ], - [ + other: [ { component: "zha", path: "/config/zha", @@ -132,7 +132,7 @@ export const configSections: PageNavigation[][] = [ icon: "hass:z-wave", }, ], -]; +}; @customElement("ha-panel-config") class HaPanelConfig extends HassRouterPage { diff --git a/src/panels/config/integrations/ha-config-entries-dashboard.ts b/src/panels/config/integrations/ha-config-entries-dashboard.ts index 1de2a92c5ca5..6aa95b96e55a 100644 --- a/src/panels/config/integrations/ha-config-entries-dashboard.ts +++ b/src/panels/config/integrations/ha-config-entries-dashboard.ts @@ -80,7 +80,7 @@ export class HaConfigManagerDashboard extends LitElement { .narrow=${this.narrow} back-path="/config" .route=${this.route} - .tabs=${configSections[0]} + .tabs=${configSections.integrations} >
diff --git a/src/panels/config/scene/ha-scene-editor.ts b/src/panels/config/scene/ha-scene-editor.ts index 258b7371c276..d1b10ff3f5fa 100644 --- a/src/panels/config/scene/ha-scene-editor.ts +++ b/src/panels/config/scene/ha-scene-editor.ts @@ -165,7 +165,7 @@ export class HaSceneEditor extends SubscribeMixin(LitElement) { .narrow=${this.narrow} .route=${this.route} .backCallback=${() => this._backTapped()} - .tabs=${configSections[1]} + .tabs=${configSections.automation} > ${ diff --git a/src/panels/config/script/ha-script-editor.ts b/src/panels/config/script/ha-script-editor.ts index 47a6b03e8d75..3dcd615c03d2 100644 --- a/src/panels/config/script/ha-script-editor.ts +++ b/src/panels/config/script/ha-script-editor.ts @@ -47,7 +47,7 @@ export class HaScriptEditor extends LitElement { .narrow=${this.narrow} .route=${this.route} .backCallback=${() => this._backTapped()} - .tabs=${configSections[1]} + .tabs=${configSections.automation} > ${this.creatingNew ? "" diff --git a/src/panels/config/script/ha-script-picker.ts b/src/panels/config/script/ha-script-picker.ts index 54efd28ad175..836cf63f1a75 100644 --- a/src/panels/config/script/ha-script-picker.ts +++ b/src/panels/config/script/ha-script-picker.ts @@ -42,7 +42,7 @@ class HaScriptPicker extends LitElement { .narrow=${this.narrow} back-path="/config" .route=${this.route} - .tabs=${configSections[1]} + .tabs=${configSections.automation} >
diff --git a/src/panels/config/server_control/ha-config-server-control.js b/src/panels/config/server_control/ha-config-server-control.js index 47840ca0c1e2..ef93fe8fd658 100644 --- a/src/panels/config/server_control/ha-config-server-control.js +++ b/src/panels/config/server_control/ha-config-server-control.js @@ -64,7 +64,7 @@ class HaConfigServerControl extends LocalizeMixin(PolymerElement) { } _computeTabs() { - return configSections[3]; + return configSections.general; } computeClasses(isWide) { diff --git a/src/panels/config/users/ha-config-user-picker.js b/src/panels/config/users/ha-config-user-picker.js index 0f1ca0217ec5..c7a78b581e2e 100644 --- a/src/panels/config/users/ha-config-user-picker.js +++ b/src/panels/config/users/ha-config-user-picker.js @@ -149,7 +149,7 @@ class HaUserPicker extends EventsMixin( } _computeTabs() { - return configSections[2]; + return configSections.persons; } _addUser() { diff --git a/src/panels/config/users/ha-user-editor.ts b/src/panels/config/users/ha-user-editor.ts index 969620f7a070..2aa50c413c34 100644 --- a/src/panels/config/users/ha-user-editor.ts +++ b/src/panels/config/users/ha-user-editor.ts @@ -58,7 +58,7 @@ class HaUserEditor extends LitElement { .hass=${this.hass} .narrow=${this.narrow} .route=${this.route} - .tabs=${configSections[2]} + .tabs=${configSections.persons} >
diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts index dc855785f7de..96ff7936076a 100644 --- a/src/panels/config/zone/ha-config-zone.ts +++ b/src/panels/config/zone/ha-config-zone.ts @@ -186,7 +186,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) { .narrow=${this.narrow} .route=${this.route} back-path="/config" - .tabs=${configSections[2]} + .tabs=${configSections.persons} > ${this.narrow ? html`