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

Add close button to fullscreen conversation dialog (on mobile) (#15058)

Browse Source 
* Add close button to fullscreen conversation dialog (on mobile)

* Remove hardcoded heading
This commit is contained in:
Paul Bottein 2023-01-11 14:18:55 +01:00 committed by GitHub
parent c63b64cff5
commit c7f3293c1d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts
View File

@ -1,6 +1,6 @@
/* eslint-disable lit/prefer-static-styles */
import "@material/mwc-button/mwc-button";
import { mdiMicrophone } from "@mdi/js";
import { mdiClose, mdiMicrophone } from "@mdi/js";
import {
css,
CSSResultGroup,
@ -15,6 +15,7 @@ import { fireEvent } from "../../common/dom/fire_event";
import { SpeechRecognition } from "../../common/dom/speech-recognition";
import "../../components/ha-dialog";
import type { HaDialog } from "../../components/ha-dialog";
import "../../components/ha-header-bar";
import "../../components/ha-icon-button";
import "../../components/ha-textfield";
import type { HaTextField } from "../../components/ha-textfield";
@ -83,6 +84,16 @@ export class HaVoiceCommandDialog extends LitElement {
}
return html`
<ha-dialog open @closed=${this.closeDialog}>
<div slot="heading" class="heading">
<ha-header-bar>
<ha-icon-button
slot="navigationIcon"
dialogAction="cancel"
.label=${this.hass.localize("ui.common.close")}
.path=${mdiClose}
></ha-icon-button>
</ha-header-bar>
</div>
<div>
${this._agentInfo && this._agentInfo.onboarding
? html`
@ -357,6 +368,18 @@ export class HaVoiceCommandDialog extends LitElement {
--secondary-action-button-flex: 0;
--mdc-dialog-max-width: 450px;
}
ha-header-bar {
display: none;
}
@media all and (max-width: 450px), all and (max-height: 500px) {
ha-header-bar {
--mdc-theme-on-primary: var(--primary-text-color);
--mdc-theme-primary: var(--mdc-theme-surface);
flex-shrink: 0;
display: block;
}
}
ha-textfield {
display: block;
}