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

Fix helper UI (#5161)

Browse Source 
Fixes #5146
Fixes #5145
Fixes #5142
This commit is contained in:
Bram Kragten 2020-03-12 20:10:06 +01:00 committed by GitHub
parent 06cd7556f3
commit 1d0389327f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 68 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/panels/config/helpers/dialog-helper-detail.ts
View File

@ -6,6 +6,7 @@ import {
LitElement,
property,
TemplateResult,
query,
} from "lit-element";
import "../../../components/ha-dialog";
import { HomeAssistant } from "../../../types";
@ -44,6 +45,7 @@ export class DialogHelperDetail extends LitElement {
@property() private _platform?: string;
@property() private _error?: string;
@property() private _submitting = false;
@query(".form") private _form?: HTMLDivElement;
public async showDialog(): Promise<void> {
this._platform = undefined;
@ -108,11 +110,13 @@ export class DialogHelperDetail extends LitElement {
${Object.keys(HELPERS).map((platform: string) => {
const isLoaded = isComponentLoaded(this.hass, platform);
return html`
<div>
<div class="form">
<paper-icon-item
.disabled=${!isLoaded}
@click=${this._platformPicked}
@keydown=${this._handleEnter}
.platform=${platform}
dialogInitialFocus
>
<ha-icon
slot="item-icon"
@ -166,12 +170,28 @@ export class DialogHelperDetail extends LitElement {
}
}
private _handleEnter(ev: KeyboardEvent) {
if (ev.keyCode !== 13) {
return;
}
ev.stopPropagation();
ev.preventDefault();
this._platformPicked(ev);
}
private _platformPicked(ev: Event): void {
this._platform = (ev.currentTarget! as any).platform;
this._focusForm();
}
private async _focusForm(): Promise<void> {
await this.updateComplete;
(this._form?.lastElementChild as HTMLElement).focus();
}
private _goBack() {
this._platform = undefined;
this._item = undefined;
}
static get styles(): CSSResult[] {

9
src/panels/config/helpers/forms/ha-input_boolean-form.ts
View File

@ -36,6 +36,14 @@ class HaInputBooleanForm extends LitElement {
}
}
public focus() {
this.updateComplete.then(() =>
(this.shadowRoot?.querySelector(
"[dialogInitialFocus]"
) as HTMLElement)?.focus()
);
}
protected render(): TemplateResult {
if (!this.hass) {
return html``;
@ -55,6 +63,7 @@ class HaInputBooleanForm extends LitElement {
"ui.dialogs.helper_settings.required_error_msg"
)}"
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
<ha-icon-input
.value=${this._icon}

9
src/panels/config/helpers/forms/ha-input_datetime-form.ts
View File

@ -44,6 +44,14 @@ class HaInputDateTimeForm extends LitElement {
}
}
public focus() {
this.updateComplete.then(() =>
(this.shadowRoot?.querySelector(
"[dialogInitialFocus]"
) as HTMLElement)?.focus()
);
}
protected render(): TemplateResult {
if (!this.hass) {
return html``;
@ -63,6 +71,7 @@ class HaInputDateTimeForm extends LitElement {
"ui.dialogs.helper_settings.required_error_msg"
)}"
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
<ha-icon-input
.value=${this._icon}

9
src/panels/config/helpers/forms/ha-input_number-form.ts
View File

@ -55,6 +55,14 @@ class HaInputNumberForm extends LitElement {
}
}
public focus() {
this.updateComplete.then(() =>
(this.shadowRoot?.querySelector(
"[dialogInitialFocus]"
) as HTMLElement)?.focus()
);
}
protected render(): TemplateResult {
if (!this.hass) {
return html``;
@ -74,6 +82,7 @@ class HaInputNumberForm extends LitElement {
"ui.dialogs.helper_settings.required_error_msg"
)}"
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
<ha-icon-input
.value=${this._icon}

9
src/panels/config/helpers/forms/ha-input_select-form.ts
View File

@ -44,6 +44,14 @@ class HaInputSelectForm extends LitElement {
}
}
public focus() {
this.updateComplete.then(() =>
(this.shadowRoot?.querySelector(
"[dialogInitialFocus]"
) as HTMLElement)?.focus()
);
}
protected render(): TemplateResult {
if (!this.hass) {
return html``;
@ -63,6 +71,7 @@ class HaInputSelectForm extends LitElement {
"ui.dialogs.helper_settings.required_error_msg"
)}"
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
<ha-icon-input
.value=${this._icon}

9
src/panels/config/helpers/forms/ha-input_text-form.ts
View File

@ -47,6 +47,14 @@ class HaInputTextForm extends LitElement {
}
}
public focus() {
this.updateComplete.then(() =>
(this.shadowRoot?.querySelector(
"[dialogInitialFocus]"
) as HTMLElement)?.focus()
);
}
protected render(): TemplateResult {
if (!this.hass) {
return html``;
@ -66,6 +74,7 @@ class HaInputTextForm extends LitElement {
"ui.dialogs.helper_settings.required_error_msg"
)}"
.invalid=${nameInvalid}
dialogInitialFocus
></paper-input>
<ha-icon-input
.value=${this._icon}

1
src/panels/config/lovelace/dashboards/dialog-lovelace-dashboard-detail.ts
View File

@ -104,6 +104,7 @@ export class DialogLovelaceDashboardDetail extends LitElement {
.errorMessage=${this.hass.localize(
"ui.panel.config.lovelace.dashboards.detail.title_required"
)}
dialogInitialFocus
></paper-input>
<ha-icon-input
.value=${this._icon}

1
src/panels/config/lovelace/resources/dialog-lovelace-resource-detail.ts
View File

@ -86,6 +86,7 @@ export class DialogLovelaceResourceDetail extends LitElement {
"ui.panel.config.lovelace.resources.detail.url_error_msg"
)}
.invalid=${urlInvalid}
dialogInitialFocus
></paper-input>
<br />
<ha-paper-dropdown-menu