Add alt to img, fix styling issue voice (#23024)

This commit is contained in:
Bram Kragten 2024-11-27 15:04:09 +01:00 committed by GitHub
parent 164944ceff
commit f9118a4b87
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 46 additions and 12 deletions

View File

@ -7,7 +7,7 @@ export const AssistantSetupStyles = [
:host { :host {
align-items: center; align-items: center;
text-align: center; text-align: center;
min-height: 300px; min-height: 400px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
@ -22,6 +22,10 @@ export const AssistantSetupStyles = [
width: 120px; width: 120px;
} }
@media all and (max-width: 450px), all and (max-height: 500px) { @media all and (max-width: 450px), all and (max-height: 500px) {
:host {
min-height: 100%;
height: auto;
}
.content img { .content img {
margin-top: 68px; margin-top: 68px;
margin-bottom: 68px; margin-bottom: 68px;

View File

@ -17,7 +17,10 @@ export class HaVoiceAssistantSetupStepArea extends LitElement {
const device = this.hass.devices[this.deviceId]; const device = this.hass.devices[this.deviceId];
return html`<div class="content"> return html`<div class="content">
<img src="/static/images/voice-assistant/area.png" /> <img
src="/static/images/voice-assistant/area.png"
alt="Casita Home Assistant logo"
/>
<h1>Select area</h1> <h1>Select area</h1>
<p class="secondary"> <p class="secondary">
When you voice assistant knows where it is, it can better control the When you voice assistant knows where it is, it can better control the

View File

@ -21,7 +21,10 @@ export class HaVoiceAssistantSetupStepChangeWakeWord extends LitElement {
protected override render() { protected override render() {
return html`<div class="padding content"> return html`<div class="padding content">
<img src="/static/images/voice-assistant/change-wake-word.png" /> <img
src="/static/images/voice-assistant/change-wake-word.png"
alt="Casita Home Assistant logo"
/>
<h1>Change wake word</h1> <h1>Change wake word</h1>
<p class="secondary"> <p class="secondary">
Some wake words are better for Some wake words are better for

View File

@ -36,7 +36,10 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
protected override render() { protected override render() {
return html`<div class="content"> return html`<div class="content">
${this._status === "timeout" ${this._status === "timeout"
? html`<img src="/static/images/voice-assistant/error.png" /> ? html`<img
src="/static/images/voice-assistant/error.png"
alt="Casita Home Assistant error logo"
/>
<h1>The voice assistant is unable to connect to Home Assistant</h1> <h1>The voice assistant is unable to connect to Home Assistant</h1>
<p class="secondary"> <p class="secondary">
To play audio, the voice assistant device has to connect to Home To play audio, the voice assistant device has to connect to Home
@ -53,7 +56,10 @@ export class HaVoiceAssistantSetupStepCheck extends LitElement {
> >
<ha-button @click=${this._testConnection}>Retry</ha-button> <ha-button @click=${this._testConnection}>Retry</ha-button>
</div>` </div>`
: html`<img src="/static/images/voice-assistant/hi.png" /> : html`<img
src="/static/images/voice-assistant/hi.png"
alt="Casita Home Assistant hi logo"
/>
<h1>Hi</h1> <h1>Hi</h1>
<p class="secondary"> <p class="secondary">
Over the next couple steps we're going to personalize your voice Over the next couple steps we're going to personalize your voice

View File

@ -44,7 +44,10 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
protected override render() { protected override render() {
return html`<div class="content"> return html`<div class="content">
${this._state === "INSTALLING" ${this._state === "INSTALLING"
? html`<img src="/static/images/voice-assistant/update.png" /> ? html`<img
src="/static/images/voice-assistant/update.png"
alt="Casita Home Assistant loading logo"
/>
<h1>Installing add-ons</h1> <h1>Installing add-ons</h1>
<p> <p>
The Whisper and Piper add-ons are being installed and configured. The Whisper and Piper add-ons are being installed and configured.
@ -54,7 +57,10 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
${this._detailState || "Installation can take several minutes"} ${this._detailState || "Installation can take several minutes"}
</p>` </p>`
: this._state === "ERROR" : this._state === "ERROR"
? html` <img src="/static/images/voice-assistant/error.png" /> ? html` <img
src="/static/images/voice-assistant/error.png"
alt="Casita Home Assistant error logo"
/>
<h1>Failed to install add-ons</h1> <h1>Failed to install add-ons</h1>
<p> <p>
We could not automatically install a local TTS and STT provider We could not automatically install a local TTS and STT provider
@ -75,7 +81,10 @@ export class HaVoiceAssistantSetupStepLocal extends LitElement {
> >
</a>` </a>`
: this._state === "NOT_SUPPORTED" : this._state === "NOT_SUPPORTED"
? html`<img src="/static/images/voice-assistant/error.png" /> ? html`<img
src="/static/images/voice-assistant/error.png"
alt="Casita Home Assistant error logo"
/>
<h1>Installation of add-ons is not supported on your system</h1> <h1>Installation of add-ons is not supported on your system</h1>
<p> <p>
Your system is not supported to automatically install a local Your system is not supported to automatically install a local

View File

@ -68,7 +68,10 @@ export class HaVoiceAssistantSetupStepSuccess extends LitElement {
: undefined; : undefined;
return html`<div class="content"> return html`<div class="content">
<img src="/static/images/voice-assistant/heart.png" /> <img
src="/static/images/voice-assistant/heart.png"
alt="Casita Home Assistant logo"
/>
<h1>Ready to Assist!</h1> <h1>Ready to Assist!</h1>
<p class="secondary"> <p class="secondary">
Make any final customizations here. You can always change these in the Make any final customizations here. You can always change these in the

View File

@ -65,7 +65,10 @@ export class HaVoiceAssistantSetupStepUpdate extends LitElement {
const progressIsNumeric = stateObj && updateUsesProgress(stateObj); const progressIsNumeric = stateObj && updateUsesProgress(stateObj);
return html`<div class="content"> return html`<div class="content">
<img src="/static/images/voice-assistant/update.png" /> <img
src="/static/images/voice-assistant/update.png"
alt="Casita Home Assistant loading logo"
/>
<h1> <h1>
${stateObj && ${stateObj &&
(stateObj.state === "unavailable" || updateIsInstalling(stateObj)) (stateObj.state === "unavailable" || updateIsInstalling(stateObj))

View File

@ -90,14 +90,17 @@ export class HaVoiceAssistantSetupStepWakeWord extends LitElement {
return html`<div class="content"> return html`<div class="content">
${!this._detected ${!this._detected
? html` ? html`
<img src="/static/images/voice-assistant/sleep.png" /> <img src="/static/images/voice-assistant/sleep.png" alt="Casita Home Assistant logo"/>
<h1> <h1>
Say ${this._activeWakeWord(this.assistConfiguration)} to wake the Say ${this._activeWakeWord(this.assistConfiguration)} to wake the
device up device up
</h1> </h1>
<p class="secondary">Setup will continue once the device is awake.</p> <p class="secondary">Setup will continue once the device is awake.</p>
</div>` </div>`
: html`<img src="/static/images/voice-assistant/ok-nabu.png" /> : html`<img
src="/static/images/voice-assistant/ok-nabu.png"
alt="Casita Home Assistant logo"
/>
<h1> <h1>
Say ${this._activeWakeWord(this.assistConfiguration)} again Say ${this._activeWakeWord(this.assistConfiguration)} again
</h1> </h1>