Add aliases description in voice dialog (#16233)

* Add aliases description in voice dialog

* Update style

* Remove duplicate margin
This commit is contained in:
Paul Bottein 2023-04-19 15:52:55 +02:00 committed by GitHub
parent f507a7b8b3
commit 3cb3f8d352
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 94 additions and 58 deletions

View File

@ -1,4 +1,11 @@
import { css, CSSResultGroup, html, LitElement, PropertyValues } from "lit"; import {
css,
CSSResultGroup,
html,
LitElement,
nothing,
PropertyValues,
} from "lit";
import { customElement, property, state } from "lit/decorators"; import { customElement, property, state } from "lit/decorators";
import memoizeOne from "memoize-one"; import memoizeOne from "memoize-one";
import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { isComponentLoaded } from "../../../common/config/is_component_loaded";
@ -148,12 +155,11 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
const anyExposed = uiExposed || manExposedAlexa || manExposedGoogle; const anyExposed = uiExposed || manExposedAlexa || manExposedGoogle;
return html`<ha-settings-row> return html`
<span slot="heading" <ha-settings-row>
>${this.hass.localize( <h3 slot="heading">
"ui.dialogs.voice-settings.expose_header" ${this.hass.localize("ui.dialogs.voice-settings.expose_header")}
)}</span </h3>
>
<ha-switch <ha-switch
@change=${this._toggleAll} @change=${this._toggleAll}
.checked=${anyExposed} .checked=${anyExposed}
@ -161,7 +167,8 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
</ha-settings-row> </ha-settings-row>
${anyExposed ${anyExposed
? showAssistants.map( ? showAssistants.map(
(key) => html`<ha-settings-row> (key) => html`
<ha-settings-row>
<img <img
alt="" alt=""
src=${brandsUrl({ src=${brandsUrl({
@ -176,7 +183,8 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
${key === "cloud.google_assistant" && ${key === "cloud.google_assistant" &&
!googleManual && !googleManual &&
this._googleEntity?.might_2fa this._googleEntity?.might_2fa
? html`<ha-formfield ? html`
<ha-formfield
slot="description" slot="description"
.label=${this.hass.localize( .label=${this.hass.localize(
"ui.dialogs.voice-settings.ask_pin" "ui.dialogs.voice-settings.ask_pin"
@ -186,15 +194,18 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
.checked=${!this.entry.options?.[key]?.disable_2fa} .checked=${!this.entry.options?.[key]?.disable_2fa}
@change=${this._2faChanged} @change=${this._2faChanged}
></ha-checkbox> ></ha-checkbox>
</ha-formfield>` </ha-formfield>
`
: (alexaManual && key === "cloud.alexa") || : (alexaManual && key === "cloud.alexa") ||
(googleManual && key === "cloud.google_assistant") (googleManual && key === "cloud.google_assistant")
? html`<span slot="description" ? html`
>${this.hass.localize( <span slot="description">
${this.hass.localize(
"ui.dialogs.voice-settings.manual_config" "ui.dialogs.voice-settings.manual_config"
)}</span )}
>` </span>
: ""} `
: nothing}
<ha-switch <ha-switch
.assistant=${key} .assistant=${key}
@change=${this._toggleAssistant} @change=${this._toggleAssistant}
@ -206,20 +217,26 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
? manExposedGoogle ? manExposedGoogle
: this.entry.options?.[key]?.should_expose} : this.entry.options?.[key]?.should_expose}
></ha-switch> ></ha-switch>
</ha-settings-row>` </ha-settings-row>
`
) )
: ""} : nothing}
<h3> <h3 class="header">
${this.hass.localize("ui.dialogs.voice-settings.aliasses_header")} ${this.hass.localize("ui.dialogs.voice-settings.aliases_header")}
</h3> </h3>
<p class="description">
${this.hass.localize("ui.dialogs.voice-settings.aliases_description")}
</p>
<ha-aliases-editor <ha-aliases-editor
.hass=${this.hass} .hass=${this.hass}
.aliases=${this._aliases ?? this.entry.aliases} .aliases=${this._aliases ?? this.entry.aliases}
@value-changed=${this._aliasesChanged} @value-changed=${this._aliasesChanged}
@blur=${this._saveAliases} @blur=${this._saveAliases}
></ha-aliases-editor>`; ></ha-aliases-editor>
`;
} }
private _aliasesChanged(ev) { private _aliasesChanged(ev) {
@ -297,6 +314,7 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
} }
img { img {
height: 32px; height: 32px;
width: 32px;
margin-right: 16px; margin-right: 16px;
} }
ha-aliases-editor { ha-aliases-editor {
@ -312,6 +330,17 @@ export class EntityVoiceSettings extends SubscribeMixin(LitElement) {
ha-checkbox { ha-checkbox {
--mdc-checkbox-state-layer-size: 40px; --mdc-checkbox-state-layer-size: 40px;
} }
.header {
margin-top: 8px;
margin-bottom: 4px;
}
.description {
color: var(--secondary-text-color);
font-size: 14px;
line-height: 20px;
margin-top: 0;
margin-bottom: 16px;
}
`, `,
]; ];
} }
@ -325,3 +354,9 @@ declare global {
"entity-entry-updated": ExtEntityRegistryEntry; "entity-entry-updated": ExtEntityRegistryEntry;
} }
} }
declare global {
interface HTMLElementTagNameMap {
"entity-voice-settings": EntityVoiceSettings;
}
}

View File

@ -1071,7 +1071,8 @@
}, },
"voice-settings": { "voice-settings": {
"expose_header": "Expose", "expose_header": "Expose",
"aliasses_header": "Aliasses", "aliases_header": "Aliases",
"aliases_description": "Aliases are supported by Assist and Google Assistant.",
"ask_pin": "Ask for PIN", "ask_pin": "Ask for PIN",
"manual_config": "Managed with filters in configuration.yaml" "manual_config": "Managed with filters in configuration.yaml"
}, },