Config menu updates to get it ready for nightly (#12368)

This commit is contained in:
Zack Barett 2022-04-20 17:38:35 -05:00 committed by GitHub
parent cabe10ffdb
commit d290c11219
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 126 additions and 117 deletions

View File

@ -55,7 +55,6 @@ export class HaClickableListItem extends ListItemBase {
align-items: center; align-items: center;
padding-left: var(--mdc-list-side-padding, 20px); padding-left: var(--mdc-list-side-padding, 20px);
padding-right: var(--mdc-list-side-padding, 20px); padding-right: var(--mdc-list-side-padding, 20px);
font-weight: 500;
} }
`, `,
]; ];

View File

@ -254,7 +254,7 @@ export const configSections: { [name: string]: PageNavigation[] } = {
}, },
{ {
component: "zone", component: "zone",
path: "/config/location", path: "/config/zone",
translationKey: "ui.panel.config.zone.caption", translationKey: "ui.panel.config.zone.caption",
iconPath: mdiMapMarkerRadius, iconPath: mdiMapMarkerRadius,
iconColor: "#E48629", iconColor: "#E48629",
@ -436,6 +436,10 @@ class HaPanelConfig extends HassRouterPage {
tag: "ha-config-helpers", tag: "ha-config-helpers",
load: () => import("./helpers/ha-config-helpers"), load: () => import("./helpers/ha-config-helpers"),
}, },
server_control: {
tag: "ha-config-server-control",
load: () => import("./server_control/ha-config-server-control"),
},
storage: { storage: {
tag: "ha-config-section-storage", tag: "ha-config-section-storage",
load: () => import("./core/ha-config-section-storage"), load: () => import("./core/ha-config-section-storage"),
@ -444,7 +448,7 @@ class HaPanelConfig extends HassRouterPage {
tag: "ha-config-users", tag: "ha-config-users",
load: () => import("./users/ha-config-users"), load: () => import("./users/ha-config-users"),
}, },
location: { zone: {
tag: "ha-config-zone", tag: "ha-config-zone",
load: () => import("./zone/ha-config-zone"), load: () => import("./zone/ha-config-zone"),
}, },

View File

@ -1,11 +1,10 @@
import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit";
import { property } from "lit/decorators"; import { property } from "lit/decorators";
import "../../../components/ha-logo-svg"; import "../../../components/ha-logo-svg";
import "../../../layouts/hass-tabs-subpage"; import "../../../layouts/hass-subpage";
import { haStyle } from "../../../resources/styles"; import { haStyle } from "../../../resources/styles";
import { HomeAssistant, Route } from "../../../types"; import { HomeAssistant, Route } from "../../../types";
import { documentationUrl } from "../../../util/documentation-url"; import { documentationUrl } from "../../../util/documentation-url";
import { configSections } from "../ha-panel-config";
import "./integrations-card"; import "./integrations-card";
import "./system-health-card"; import "./system-health-card";
@ -29,12 +28,11 @@ class HaConfigInfo extends LitElement {
(window as any).CUSTOM_UI_LIST || []; (window as any).CUSTOM_UI_LIST || [];
return html` return html`
<hass-tabs-subpage <hass-subpage
.hass=${this.hass} .hass=${this.hass}
.narrow=${this.narrow} .narrow=${this.narrow}
back-path="/config" back-path="/config"
.route=${this.route} .header=${this.hass.localize("ui.panel.config.info.caption")}
.tabs=${configSections.about}
> >
<div class="about"> <div class="about">
<a <a
@ -113,21 +111,23 @@ class HaConfigInfo extends LitElement {
"type", "type",
JS_TYPE JS_TYPE
)} )}
${customUiList.length > 0 ${
? html` customUiList.length > 0
<div> ? html`
${this.hass.localize("ui.panel.config.info.custom_uis")} <div>
${customUiList.map( ${this.hass.localize("ui.panel.config.info.custom_uis")}
(item) => html` ${customUiList.map(
<div> (item) => html`
<a href=${item.url} target="_blank"> ${item.name}</a>: <div>
${item.version} <a href=${item.url} target="_blank"> ${item.name}</a
</div> >: ${item.version}
` </div>
)} `
</div> )}
` </div>
: ""} `
: ""
}
</p> </p>
</div> </div>
<div> <div>

View File

@ -18,13 +18,13 @@ import "../ha-config-section";
export class HaConfigServerControl extends LitElement { export class HaConfigServerControl extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@property() public isWide!: boolean; @property({ type: Boolean }) public isWide!: boolean;
@property() public narrow!: boolean; @property({ type: Boolean }) public narrow!: boolean;
@property() public route!: Route; @property({ attribute: false }) public route!: Route;
@property() public showAdvanced!: boolean; @property({ type: Boolean }) public showAdvanced!: boolean;
@state() private _validating = false; @state() private _validating = false;
@ -54,81 +54,73 @@ export class HaConfigServerControl extends LitElement {
.narrow=${this.narrow} .narrow=${this.narrow}
back-path="/config/system" back-path="/config/system"
.showAdvanced=${this.showAdvanced} .showAdvanced=${this.showAdvanced}
.header=${this.hass.localize("ui.panel.config.server_control.caption")}
> >
<ha-config-section .isWide=${this.isWide}> <div class="content">
<span slot="header"
>${this.hass.localize(
"ui.panel.config.server_control.caption"
)}</span
>
<span slot="introduction"
>${this.hass.localize(
"ui.panel.config.server_control.description"
)}</span
>
${this.showAdvanced ${this.showAdvanced
? html` <ha-card ? html`
header=${this.hass.localize( <ha-card
"ui.panel.config.server_control.section.validation.heading" header=${this.hass.localize(
)} "ui.panel.config.server_control.section.validation.heading"
>
<div class="card-content">
${this.hass.localize(
"ui.panel.config.server_control.section.validation.introduction"
)} )}
${!this._validateLog >
? html` <div class="card-content">
<div ${this.hass.localize(
class="validate-container layout vertical center-center" "ui.panel.config.server_control.section.validation.introduction"
> )}
${!this._validating ${!this._validateLog
? html` ? html`
${this._isValid <div
? html` <div class="validate-container layout vertical center-center"
class="validate-result" >
id="result" ${!this._validating
> ? html`
${this.hass.localize( ${this._isValid
"ui.panel.config.server_control.section.validation.valid" ? html` <div
)} class="validate-result"
</div>` id="result"
: ""} >
<mwc-button ${this.hass.localize(
raised "ui.panel.config.server_control.section.validation.valid"
@click=${this._validateConfig} )}
> </div>`
${this.hass.localize( : ""}
"ui.panel.config.server_control.section.validation.check_config" <mwc-button
)} raised
</mwc-button> @click=${this._validateConfig}
` >
: html` ${this.hass.localize(
<ha-circular-progress "ui.panel.config.server_control.section.validation.check_config"
active )}
></ha-circular-progress> </mwc-button>
`} `
</div> : html`
` <ha-circular-progress
: html` active
<div class="config-invalid"> ></ha-circular-progress>
<span class="text"> `}
${this.hass.localize( </div>
"ui.panel.config.server_control.section.validation.invalid" `
)} : html`
</span> <div class="config-invalid">
<mwc-button raised @click=${this._validateConfig}> <span class="text">
${this.hass.localize( ${this.hass.localize(
"ui.panel.config.server_control.section.validation.check_config" "ui.panel.config.server_control.section.validation.invalid"
)} )}
</mwc-button> </span>
</div> <mwc-button raised @click=${this._validateConfig}>
<div id="configLog" class="validate-log"> ${this.hass.localize(
${this._validateLog} "ui.panel.config.server_control.section.validation.check_config"
</div> )}
`} </mwc-button>
</div> </div>
</ha-card>` <div id="configLog" class="validate-log">
${this._validateLog}
</div>
`}
</div>
</ha-card>
`
: ""} : ""}
<ha-card <ha-card
@ -181,26 +173,28 @@ export class HaConfigServerControl extends LitElement {
</div> </div>
${this._reloadableDomains.map( ${this._reloadableDomains.map(
(domain) => (domain) =>
html`<div class="card-actions"> html`
<ha-call-service-button <div class="card-actions">
.hass=${this.hass} <ha-call-service-button
.domain=${domain} .hass=${this.hass}
service="reload" .domain=${domain}
>${this.hass.localize( service="reload"
`ui.panel.config.server_control.section.reloading.${domain}` >${this.hass.localize(
) || `ui.panel.config.server_control.section.reloading.${domain}`
this.hass.localize( ) ||
"ui.panel.config.server_control.section.reloading.reload", this.hass.localize(
"domain", "ui.panel.config.server_control.section.reloading.reload",
domainToName(this.hass.localize, domain) "domain",
)} domainToName(this.hass.localize, domain)
</ha-call-service-button> )}
</div>` </ha-call-service-button>
</div>
`
)} )}
</ha-card> </ha-card>
` `
: ""} : ""}
</ha-config-section> </div>
</hass-subpage> </hass-subpage>
`; `;
} }
@ -251,10 +245,22 @@ export class HaConfigServerControl extends LitElement {
direction: ltr; direction: ltr;
} }
ha-config-section { .content {
padding-bottom: 24px; padding: 28px 20px 0;
max-width: 1040px;
margin: 0 auto;
}
ha-card {
margin-top: 24px;
} }
`, `,
]; ];
} }
} }
declare global {
interface HTMLElementTagNameMap {
"ha-config-server-control": HaConfigServerControl;
}
}