Skip to content

Change config panel navigation #4377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bramkragten merged 6 commits into from
Jan 12, 2020
Merged

Change config panel navigation #4377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ffdc817
Change config panel navigation
bramkragten Dec 23, 2019
8236ed6
Show active + don't show toolbar?
bramkragten Jan 9, 2020
06dcd3d
Update ha-panel-config.ts
bramkragten Jan 9, 2020
f7743a6
Change color of menu toolbar
bramkragten Jan 11, 2020
844b12b
Update ha-config-router.ts
bramkragten Jan 11, 2020
9bd6483
Review comments
bramkragten Jan 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion src/layouts/hass-subpage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,14 @@ import {
} from "lit-element";
import "../components/ha-menu-button";
import "../components/ha-paper-icon-button-arrow-prev";
import { classMap } from "lit-html/directives/class-map";

@customElement("hass-subpage")
class HassSubpage extends LitElement {
@property()
public header?: string;

@property({ type: Boolean })
public showBackButton = true;
@property({ type: Boolean })
public hassio = false;

Expand All @@ -25,6 +27,7 @@ class HassSubpage extends LitElement {
aria-label="Back"
.hassio=${this.hassio}
@click=${this._backTapped}
class=${classMap({ hidden: !this.showBackButton })}
></ha-paper-icon-button-arrow-prev>

<div main-title>${this.header}</div>
Expand Down Expand Up @@ -64,6 +67,10 @@ class HassSubpage extends LitElement {
pointer-events: auto;
}

ha-paper-icon-button-arrow-prev.hidden {
visibility: hidden;
}

[main-title] {
margin: 0 0 0 24px;
line-height: 20px;
Expand Down
0 ...a_registry/dialog-area-registry-detail.ts → ...nfig/areas/dialog-area-registry-detail.ts
View file
Open in desktop
File renamed without changes.
9 changes: 5 additions & 4 deletions .../area_registry/ha-config-area-registry.ts → src/panels/config/areas/ha-config-areas.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
css,
CSSResult,
property,
customElement,
} from "lit-element";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-item-body";
Expand All @@ -30,7 +31,8 @@ import { classMap } from "lit-html/directives/class-map";
import { computeRTL } from "../../../common/util/compute_rtl";
import { UnsubscribeFunc } from "home-assistant-js-websocket";

class HaConfigAreaRegistry extends LitElement {
@customElement("ha-config-areas")
export class HaConfigAreas extends LitElement {
@property() public hass!: HomeAssistant;
@property() public isWide?: boolean;
@property() private _areas?: AreaRegistryEntry[];
Expand All @@ -51,7 +53,8 @@ class HaConfigAreaRegistry extends LitElement {
}
return html`
<hass-subpage
header="${this.hass.localize("ui.panel.config.area_registry.caption")}"
.header="${this.hass.localize("ui.panel.config.area_registry.caption")}"
.showBackButton=${!this.isWide}
>
<ha-config-section .isWide=${this.isWide}>
<span slot="header">
Expand Down Expand Up @@ -208,5 +211,3 @@ All devices in this area will become unassigned.`)
`;
}
}

customElements.define("ha-config-area-registry", HaConfigAreaRegistry);
0 ...istry/show-dialog-area-registry-detail.ts → ...areas/show-dialog-area-registry-detail.ts
View file
Open in desktop
File renamed without changes.
1 change: 1 addition & 0 deletions src/panels/config/automation/ha-automation-picker.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ class HaAutomationPicker extends LitElement {
protected render(): TemplateResult | void {
return html`
<hass-subpage
.showBackButton=${!this.isWide}
.header=${this.hass.localize("ui.panel.config.automation.caption")}
>
<ha-config-section .isWide=${this.isWide}>
Expand Down
5 changes: 4 additions & 1 deletion src/panels/config/cloud/account/cloud-account.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,10 @@ class CloudAccount extends EventsMixin(LocalizeMixin(PolymerElement)) {
color: var(--primary-color);
}
</style>
<hass-subpage header="[[localize('ui.panel.config.cloud.caption')]]">
<hass-subpage
showBackButton="[[!isWide]]"
header="[[localize('ui.panel.config.cloud.caption')]]"
Copy link
Copy Markdown
Member

@balloob balloob Jan 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
header="[[localize('ui.panel.config.cloud.caption')]]"
.header="[[localize('ui.panel.config.cloud.caption')]]"

Copy link
Copy Markdown
Member Author

@bramkragten bramkragten Jan 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Polymer

>
<div class="content">
<ha-config-section is-wide="[[isWide]]">
<span slot="header"
Expand Down
5 changes: 4 additions & 1 deletion src/panels/config/cloud/login/cloud-login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,10 @@ class CloudLogin extends LocalizeMixin(
color: var(--secondary-text-color);
}
</style>
<hass-subpage header="[[localize('ui.panel.config.cloud.caption')]]">
<hass-subpage
showBackButton="[[!isWide]]"
header="[[localize('ui.panel.config.cloud.caption')]]"
>
<div class="content">
<ha-config-section is-wide="[[isWide]]">
<span slot="header"
Expand Down
5 changes: 4 additions & 1 deletion src/panels/config/core/ha-config-core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,10 @@ class HaConfigCore extends LocalizeMixin(PolymerElement) {
}
</style>

<hass-subpage header="[[localize('ui.panel.config.core.caption')]]">
<hass-subpage
header="[[localize('ui.panel.config.core.caption')]]"
Copy link
Copy Markdown
Member

@balloob balloob Jan 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

props

Copy link
Copy Markdown
Member Author

@bramkragten bramkragten Jan 12, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Polymer

showBackButton="[[!isWide]]"
>
<div class$="[[computeClasses(isWide)]]">
<ha-config-section-core
is-wide="[[isWide]]"
Expand Down
7 changes: 6 additions & 1 deletion src/panels/config/customize/ha-config-customize.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,17 @@ import LocalizeMixin from "../../../mixins/localize-mixin";
class HaConfigCustomize extends LocalizeMixin(PolymerElement) {
static get template() {
return html`
<style include="ha-style"></style>
<style include="ha-style">
ha-paper-icon-button-arrow-prev[hide] {
visibility: hidden;
}
</style>

<app-header-layout has-scrolling-region="">
<app-header slot="header" fixed="">
<app-toolbar>
<ha-paper-icon-button-arrow-prev
hide$="[[isWide]]"
on-click="_backTapped"
></ha-paper-icon-button-arrow-prev>
<div main-title="">
Expand Down
116 changes: 59 additions & 57 deletions src/panels/config/dashboard/ha-config-dashboard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,65 +55,67 @@ class HaConfigDashboard extends LitElement {

${isComponentLoaded(this.hass, "cloud")
? html`
<ha-card>
<a href='/config/cloud' tabindex="-1">
<paper-item>
<paper-item-body two-line="">
${this.hass.localize("ui.panel.config.cloud.caption")}
${
this.cloudStatus.logged_in
? html`
<div secondary="">
${this.hass.localize(
"ui.panel.config.cloud.description_login",
"email",
(this.cloudStatus as CloudStatusLoggedIn).email
)}
</div>
`
: html`
<div secondary="">
${this.hass.localize(
"ui.panel.config.cloud.description_features"
)}
</div>
`
}
</paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
</ha-card>
</a>
`
<ha-card>
<a href="/config/cloud" tabindex="-1">
<paper-item>
<paper-item-body two-line="">
${this.hass.localize("ui.panel.config.cloud.caption")}
${this.cloudStatus.logged_in
? html`
<div secondary="">
${this.hass.localize(
"ui.panel.config.cloud.description_login",
"email",
(this.cloudStatus as CloudStatusLoggedIn)
.email
)}
</div>
`
: html`
<div secondary="">
${this.hass.localize(
"ui.panel.config.cloud.description_features"
)}
</div>
`}
</paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
</a>
</ha-card>
`
: ""}

<ha-config-navigation
.hass=${this.hass}
.showAdvanced=${this.showAdvanced}
.pages=${[
{ page: "integrations", core: true },
{ page: "devices", core: true },
{ page: "automation" },
{ page: "script" },
{ page: "scene" },
]}
></ha-config-navigation>

<ha-config-navigation
.hass=${this.hass}
.showAdvanced=${this.showAdvanced}
.pages=${[
{ page: "core", core: true },
{ page: "server_control", core: true },
{ page: "entity_registry", core: true },
{ page: "area_registry", core: true },
{ page: "person" },
{ page: "users", core: true },
{ page: "zha" },
{ page: "zwave" },
{ page: "customize", core: true, advanced: true },
]}
></ha-config-navigation>
<ha-card>
<ha-config-navigation
.hass=${this.hass}
.showAdvanced=${this.showAdvanced}
.pages=${[
{ page: "integrations", core: true },
{ page: "devices", core: true },
{ page: "automation" },
{ page: "script" },
{ page: "scene" },
]}
></ha-config-navigation>
</ha-card>
<ha-card>
<ha-config-navigation
.hass=${this.hass}
.showAdvanced=${this.showAdvanced}
.pages=${[
{ page: "core", core: true },
{ page: "server_control", core: true },
{ page: "entities", core: true },
{ page: "areas", core: true },
{ page: "person" },
{ page: "users", core: true },
{ page: "zha" },
{ page: "zwave" },
{ page: "customize", core: true, advanced: true },
]}
></ha-config-navigation>
</ha-card>

${!this.showAdvanced
? html`
Expand Down
67 changes: 56 additions & 11 deletions src/panels/config/dashboard/ha-config-navigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,43 +16,70 @@ import {
css,
} from "lit-element";
import { HomeAssistant } from "../../../types";
import { CloudStatus, CloudStatusLoggedIn } from "../../../data/cloud";

export interface ConfigPageNavigation {
page: string;
core?: boolean;
advanced?: boolean;
info?: any;
}

@customElement("ha-config-navigation")
class HaConfigNavigation extends LitElement {
@property() public hass!: HomeAssistant;
@property() public showAdvanced!: boolean;
@property() public pages!: ConfigPageNavigation[];
@property() public curPage!: string;

protected render(): TemplateResult | void {
return html`
<ha-card>
${this.pages.map(({ page, core, advanced }) =>
<paper-listbox attr-for-selected="data-page" .selected=${this.curPage}>
${this.pages.map(({ page, core, advanced, info }) =>
(core || isComponentLoaded(this.hass, page)) &&
(!advanced || this.showAdvanced)
? html`
<a href=${`/config/${page}`}>
<a
href=${`/config/${page}`}
aria-role="option"
data-page="${page}"
tabindex="-1"
>
<paper-item>
<paper-item-body two-line="">
<paper-item-body two-line>
${this.hass.localize(`ui.panel.config.${page}.caption`)}
<div secondary>
${this.hass.localize(
`ui.panel.config.${page}.description`
)}
</div>
${page === "cloud" && (info as CloudStatus)
? info.logged_in
? html`
<div secondary>
${this.hass.localize(
"ui.panel.config.cloud.description_login",
"email",
(info as CloudStatusLoggedIn).email
)}
</div>
`
: html`
<div secondary>
${this.hass.localize(
"ui.panel.config.cloud.description_features"
)}
</div>
`
: html`
<div secondary>
${this.hass.localize(
`ui.panel.config.${page}.description`
)}
</div>
`}
</paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
</a>
`
: ""
)}
</ha-card>
</paper-listbox>
`;
}

Expand All @@ -62,6 +89,24 @@ class HaConfigNavigation extends LitElement {
text-decoration: none;
color: var(--primary-text-color);
}
.iron-selected paper-item:before {
border-radius: 4px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
content: "";
background-color: var(--sidebar-selected-icon-color);
opacity: 0.12;
transition: opacity 15ms linear;
will-change: opacity;
}

.iron-selected paper-item[pressed]:before {
opacity: 0.37;
}
`;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/panels/config/devices/device-detail/ha-device-entities-card.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ import "@polymer/paper-item/paper-item-body";
import "../../../../components/ha-card";
import "../../../../components/ha-icon";
import "../../../../components/ha-switch";
import { showEntityRegistryDetailDialog } from "../../entity_registry/show-dialog-entity-registry-detail";
import { showEntityRegistryDetailDialog } from "../../entities/show-dialog-entity-registry-detail";
import { fireEvent } from "../../../../common/dom/fire_event";
import { computeDomain } from "../../../../common/entity/compute_domain";
import { domainIcon } from "../../../../common/entity/domain_icon";
Expand Down
4 changes: 3 additions & 1 deletion src/panels/config/devices/ha-config-devices-dashboard.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ import { AreaRegistryEntry } from "../../../data/area_registry";
export class HaConfigDeviceDashboard extends LitElement {
@property() public hass!: HomeAssistant;
@property() public narrow = false;
@property() public isWide = false;
@property() public devices!: DeviceRegistryEntry[];
@property() public entries!: ConfigEntry[];
@property() public entities!: EntityRegistryEntry[];
Expand All @@ -29,7 +30,8 @@ export class HaConfigDeviceDashboard extends LitElement {
protected render(): TemplateResult {
return html`
<hass-subpage
header=${this.hass.localize("ui.panel.config.devices.caption")}
.showBackButton=${!this.isWide}
.header=${this.hass.localize("ui.panel.config.devices.caption")}
>
<div class="content">
<ha-devices-data-table
Expand Down
Loading