Update assist config layout a bit (#16170

* Update assist config a bit

* update images

* Update assist-pref.ts
This commit is contained in:
Bram Kragten 2023-04-13 15:27:17 +02:00 committed by GitHub
parent 5e352f6194
commit a741faced1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 27 deletions

View File

@ -1,7 +1,7 @@
import { HomeAssistant } from "../types"; import { HomeAssistant } from "../types";
export const voiceAssistants = { export const voiceAssistants = {
conversation: { domain: "conversation", name: "Assist" }, conversation: { domain: "voice_assistant", name: "Assist" },
"cloud.alexa": { "cloud.alexa": {
domain: "alexa", domain: "alexa",
name: "Amazon Alexa", name: "Amazon Alexa",

View File

@ -18,6 +18,7 @@ import {
import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box"; import { showConfirmationDialog } from "../../../dialogs/generic/show-dialog-box";
import type { HomeAssistant } from "../../../types"; import type { HomeAssistant } from "../../../types";
import { showVoiceAssistantPipelineDetailDialog } from "./show-dialog-voice-assistant-pipeline-detail"; import { showVoiceAssistantPipelineDetailDialog } from "./show-dialog-voice-assistant-pipeline-detail";
import { brandsUrl } from "../../../util/brands-url";
export class AssistPref extends LitElement { export class AssistPref extends LitElement {
@property({ attribute: false }) public hass!: HomeAssistant; @property({ attribute: false }) public hass!: HomeAssistant;
@ -35,7 +36,17 @@ export class AssistPref extends LitElement {
protected render() { protected render() {
return html` return html`
<ha-card outlined> <ha-card outlined>
<h1 class="card-header">Assist</h1> <h1 class="card-header">
<img
alt=""
src=${brandsUrl({
domain: "voice_assistant",
type: "icon",
darkOptimized: this.hass.themes?.darkMode,
})}
referrerpolicy="no-referrer"
/>Assist
</h1>
<div class="header-actions"> <div class="header-actions">
<a <a
href="https://www.home-assistant.io/docs/assist/" href="https://www.home-assistant.io/docs/assist/"
@ -49,31 +60,29 @@ export class AssistPref extends LitElement {
></ha-icon-button> ></ha-icon-button>
</a> </a>
</div> </div>
<div class="card-content"> <mwc-list>
<mwc-list> ${this._pipelines.map(
${this._pipelines.map( (pipeline) => html`
(pipeline) => html` <ha-list-item
<ha-list-item twoline
twoline hasMeta
hasMeta role="button"
role="button" @click=${this._editPipeline}
@click=${this._editPipeline} .id=${pipeline.id}
.id=${pipeline.id} >
> ${pipeline.name}
${pipeline.name} <span slot="secondary">${pipeline.language}</span>
<span slot="secondary">${pipeline.language}</span> <ha-icon-next slot="meta"></ha-icon-next>
<ha-icon-next slot="meta"></ha-icon-next> </ha-list-item>
</ha-list-item> `
` )}
)} </mwc-list>
</mwc-list> <ha-button @click=${this._addPipeline} class="add" outlined>
<ha-button @click=${this._addPipeline}> ${this.hass.localize(
${this.hass.localize( "ui.panel.config.voice_assistants.assistants.pipeline.add_assistant"
"ui.panel.config.voice_assistants.assistants.pipeline.add_assistant" )}
)} <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
<ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon> </ha-button>
</ha-button>
</div>
<div class="card-actions"> <div class="card-actions">
<a <a
href="/config/voice-assistants/expose?assistants=conversation&historyBack" href="/config/voice-assistants/expose?assistants=conversation&historyBack"
@ -165,6 +174,9 @@ export class AssistPref extends LitElement {
direction: var(--direction); direction: var(--direction);
color: var(--secondary-text-color); color: var(--secondary-text-color);
} }
.add {
margin: 0 16px 16px;
}
.card-actions { .card-actions {
display: flex; display: flex;
} }
@ -175,6 +187,10 @@ export class AssistPref extends LitElement {
display: flex; display: flex;
align-items: center; align-items: center;
} }
img {
height: 28px;
margin-right: 16px;
}
`; `;
} }
} }