diff --git a/src/components/data-table/dialog-data-table-settings.ts b/src/components/data-table/dialog-data-table-settings.ts index 69845eaba4..bb40df58f0 100644 --- a/src/components/data-table/dialog-data-table-settings.ts +++ b/src/components/data-table/dialog-data-table-settings.ts @@ -9,12 +9,13 @@ import { fireEvent } from "../../common/dom/fire_event"; import { haStyleDialog } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; import "../ha-button"; -import { createCloseHeading } from "../ha-dialog"; +import "../ha-dialog-footer"; import "../ha-icon-button"; import "../ha-list"; import "../ha-list-item"; import "../ha-sortable"; import "../ha-svg-icon"; +import "../ha-wa-dialog"; import type { DataTableColumnContainer, DataTableColumnData, @@ -31,13 +32,20 @@ export class DialogDataTableSettings extends LitElement { @state() private _hiddenColumns?: string[]; + @state() private _open = false; + public showDialog(params: DataTableSettingsDialogParams) { this._params = params; this._columnOrder = params.columnOrder; this._hiddenColumns = params.hiddenColumns; + this._open = true; } public closeDialog() { + this._open = false; + } + + private _dialogClosed() { this._params = undefined; fireEvent(this, "dialog-closed", { dialog: this.localName }); } @@ -93,13 +101,11 @@ export class DialogDataTableSettings extends LitElement { ); return html` - - ${localize("ui.components.data-table.settings.restore")} - - ${localize("ui.components.data-table.settings.done")} - - + + ${localize("ui.components.data-table.settings.restore")} + + ${localize("ui.components.data-table.settings.done")} + + + `; } @@ -283,22 +291,10 @@ export class DialogDataTableSettings extends LitElement { return [ haStyleDialog, css` - ha-dialog { - --mdc-dialog-max-width: 500px; + ha-wa-dialog { --dialog-z-index: 10; --dialog-content-padding: 0 8px; } - @media all and (max-width: 451px) { - ha-dialog { - --vertical-align-dialog: flex-start; - --dialog-surface-margin-top: 250px; - --ha-dialog-border-radius: var(--ha-border-radius-4xl) - var(--ha-border-radius-4xl) var(--ha-border-radius-square) - var(--ha-border-radius-square); - --mdc-dialog-min-height: calc(100% - 250px); - --mdc-dialog-max-height: calc(100% - 250px); - } - } ha-list-item { --mdc-list-side-padding: 12px; overflow: visible; diff --git a/src/components/ha-assist-chat.ts b/src/components/ha-assist-chat.ts index ba05e7ed99..5cdc2599f1 100644 --- a/src/components/ha-assist-chat.ts +++ b/src/components/ha-assist-chat.ts @@ -1,8 +1,9 @@ import { mdiAlertCircle, mdiMicrophone, mdiSend } from "@mdi/js"; -import type { PropertyValues, TemplateResult } from "lit"; +import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { classMap } from "lit/directives/class-map"; +import { haStyleScrollbar } from "../resources/styles"; import { supportsFeature } from "../common/entity/supports-feature"; import { runAssistPipeline, @@ -114,7 +115,7 @@ export class HaAssistChat extends LitElement { const supportsSTT = this.pipeline?.stt_engine && !this.disableSpeech; return html` -
+
${controlHA ? nothing : html` @@ -585,154 +586,167 @@ export class HaAssistChat extends LitElement { return progress; } - static styles = css` - :host { - flex: 1; - display: flex; - flex-direction: column; - } - ha-alert { - margin-bottom: 8px; - } - ha-textfield { - display: block; - } - .messages { - flex: 1; - display: block; - box-sizing: border-box; - overflow-y: auto; - max-height: 100%; - display: flex; - flex-direction: column; - padding: 0 12px 16px; - } - .spacer { - flex: 1; - } - .message { - font-size: var(--ha-font-size-l); - clear: both; - max-width: -webkit-fill-available; - overflow-wrap: break-word; - scroll-margin-top: 24px; - margin: 8px 0; - padding: 8px; - border-radius: var(--ha-border-radius-xl); - } - @media all and (max-width: 450px), all and (max-height: 500px) { - .message { - font-size: var(--ha-font-size-l); - } - } - .message.user { - margin-left: 24px; - margin-inline-start: 24px; - margin-inline-end: initial; - align-self: flex-end; - border-bottom-right-radius: 0px; - --markdown-link-color: var(--text-primary-color); - background-color: var(--chat-background-color-user, var(--primary-color)); - color: var(--text-primary-color); - direction: var(--direction); - } - .message.hass { - margin-right: 24px; - margin-inline-end: 24px; - margin-inline-start: initial; - align-self: flex-start; - border-bottom-left-radius: 0px; - background-color: var( - --chat-background-color-hass, - var(--secondary-background-color) - ); + static get styles(): CSSResultGroup { + return [ + haStyleScrollbar, + css` + :host { + flex: 1; + display: flex; + flex-direction: column; + min-height: 0; + } + ha-alert { + margin-bottom: var(--ha-space-2); + } + ha-textfield { + display: block; + } + .messages { + flex: 1 1 400px; + display: block; + box-sizing: border-box; + overflow-y: auto; + min-height: 0; + max-height: 100%; + display: flex; + flex-direction: column; + padding: 0 var(--ha-space-3) var(--ha-space-4); + } + .input { + padding: var(--ha-space-1) var(--ha-space-4) var(--ha-space-6); + } + .spacer { + flex: 1; + } + .message { + font-size: var(--ha-font-size-l); + clear: both; + max-width: -webkit-fill-available; + overflow-wrap: break-word; + scroll-margin-top: var(--ha-space-6); + margin: var(--ha-space-2) 0; + padding: var(--ha-space-2); + border-radius: var(--ha-border-radius-xl); + } + @media all and (max-width: 450px), all and (max-height: 500px) { + .message { + font-size: var(--ha-font-size-l); + } + } + .message.user { + margin-left: var(--ha-space-6); + margin-inline-start: var(--ha-space-6); + margin-inline-end: initial; + align-self: flex-end; + border-bottom-right-radius: 0px; + --markdown-link-color: var(--text-primary-color); + background-color: var( + --chat-background-color-user, + var(--primary-color) + ); + color: var(--text-primary-color); + direction: var(--direction); + } + .message.hass { + margin-right: var(--ha-space-6); + margin-inline-end: var(--ha-space-6); + margin-inline-start: initial; + align-self: flex-start; + border-bottom-left-radius: 0px; + background-color: var( + --chat-background-color-hass, + var(--secondary-background-color) + ); - color: var(--primary-text-color); - direction: var(--direction); - } - .message.error { - background-color: var(--error-color); - color: var(--text-primary-color); - } - ha-markdown { - --markdown-image-border-radius: calc(var(--ha-border-radius-xl) / 2); - --markdown-table-border-color: var(--divider-color); - --markdown-code-background-color: var(--primary-background-color); - --markdown-code-text-color: var(--primary-text-color); - --markdown-list-indent: 1.15em; - &:not(:has(ha-markdown-element)) { - min-height: 1lh; - min-width: 1lh; - flex-shrink: 0; - } - } - .bouncer { - width: 48px; - height: 48px; - position: absolute; - } - .double-bounce1, - .double-bounce2 { - width: 48px; - height: 48px; - border-radius: var(--ha-border-radius-circle); - background-color: var(--primary-color); - opacity: 0.2; - position: absolute; - top: 0; - left: 0; - -webkit-animation: sk-bounce 2s infinite ease-in-out; - animation: sk-bounce 2s infinite ease-in-out; - } - .double-bounce2 { - -webkit-animation-delay: -1s; - animation-delay: -1s; - } - @-webkit-keyframes sk-bounce { - 0%, - 100% { - -webkit-transform: scale(0); - } - 50% { - -webkit-transform: scale(1); - } - } - @keyframes sk-bounce { - 0%, - 100% { - transform: scale(0); - -webkit-transform: scale(0); - } - 50% { - transform: scale(1); - -webkit-transform: scale(1); - } - } + color: var(--primary-text-color); + direction: var(--direction); + } + .message.error { + background-color: var(--error-color); + color: var(--text-primary-color); + } + ha-markdown { + --markdown-image-border-radius: calc(var(--ha-border-radius-xl) / 2); + --markdown-table-border-color: var(--divider-color); + --markdown-code-background-color: var(--primary-background-color); + --markdown-code-text-color: var(--primary-text-color); + --markdown-list-indent: 1.15em; + &:not(:has(ha-markdown-element)) { + min-height: 1lh; + min-width: 1lh; + flex-shrink: 0; + } + } + .bouncer { + width: 48px; + height: 48px; + position: absolute; + } + .double-bounce1, + .double-bounce2 { + width: 48px; + height: 48px; + border-radius: var(--ha-border-radius-circle); + background-color: var(--primary-color); + opacity: 0.2; + position: absolute; + top: 0; + left: 0; + -webkit-animation: sk-bounce 2s infinite ease-in-out; + animation: sk-bounce 2s infinite ease-in-out; + } + .double-bounce2 { + -webkit-animation-delay: -1s; + animation-delay: -1s; + } + @-webkit-keyframes sk-bounce { + 0%, + 100% { + -webkit-transform: scale(0); + } + 50% { + -webkit-transform: scale(1); + } + } + @keyframes sk-bounce { + 0%, + 100% { + transform: scale(0); + -webkit-transform: scale(0); + } + 50% { + transform: scale(1); + -webkit-transform: scale(1); + } + } - .listening-icon { - position: relative; - color: var(--secondary-text-color); - margin-right: -24px; - margin-inline-end: -24px; - margin-inline-start: initial; - direction: var(--direction); - transform: scaleX(var(--scale-direction)); - } + .listening-icon { + position: relative; + color: var(--secondary-text-color); + margin-right: -24px; + margin-inline-end: -24px; + margin-inline-start: initial; + direction: var(--direction); + transform: scaleX(var(--scale-direction)); + } - .listening-icon[active] { - color: var(--primary-color); - } + .listening-icon[active] { + color: var(--primary-color); + } - .unsupported { - color: var(--error-color); - position: absolute; - --mdc-icon-size: 16px; - right: 5px; - inset-inline-end: 5px; - inset-inline-start: initial; - top: 0px; - } - `; + .unsupported { + color: var(--error-color); + position: absolute; + --mdc-icon-size: 16px; + right: 5px; + inset-inline-end: 5px; + inset-inline-start: initial; + top: 0px; + } + `, + ]; + } } declare global { diff --git a/src/dialogs/dialog-list-items/dialog-list-items.ts b/src/dialogs/dialog-list-items/dialog-list-items.ts index f854211237..16baf6beb5 100644 --- a/src/dialogs/dialog-list-items/dialog-list-items.ts +++ b/src/dialogs/dialog-list-items/dialog-list-items.ts @@ -2,11 +2,11 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-bottom-sheet"; -import { createCloseHeading } from "../../components/ha-dialog"; import "../../components/ha-icon"; import "../../components/ha-md-list"; import "../../components/ha-md-list-item"; import "../../components/ha-svg-icon"; +import "../../components/ha-wa-dialog"; import type { HomeAssistant } from "../../types"; import type { HassDialog } from "../make-dialog-manager"; import type { ListItemsDialogParams } from "./show-list-items-dialog"; @@ -20,8 +20,16 @@ export class ListItemsDialog @state() private _params?: ListItemsDialogParams; + @state() private _open = false; + public async showDialog(params: ListItemsDialogParams): Promise { this._params = params; + this._open = true; + } + + public closeDialog(_historyState?: any): boolean { + this._open = false; + return true; } private _dialogClosed(): void { @@ -33,7 +41,7 @@ export class ListItemsDialog const item = (ev.currentTarget as any).item; if (!item) return; item.action(); - this._dialogClosed(); + this.closeDialog(); } protected render() { @@ -83,26 +91,30 @@ export class ListItemsDialog if (this._params.mode === "bottom-sheet") { return html` - + ${content} `; } return html` - ${content} - + `; } static styles = css` - ha-dialog { + ha-wa-dialog { /* Place above other dialogs */ --dialog-z-index: 104; --dialog-content-padding: 0; diff --git a/src/dialogs/form/dialog-form.ts b/src/dialogs/form/dialog-form.ts index 5369304bd2..6a4d0b55ac 100644 --- a/src/dialogs/form/dialog-form.ts +++ b/src/dialogs/form/dialog-form.ts @@ -2,8 +2,9 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-button"; -import { createCloseHeading } from "../../components/ha-dialog"; import "../../components/ha-form/ha-form"; +import "../../components/ha-dialog-footer"; +import "../../components/ha-wa-dialog"; import { haStyleDialog } from "../../resources/styles"; import type { HomeAssistant } from "../../types"; import type { HassDialog } from "../make-dialog-manager"; @@ -20,24 +21,40 @@ export class DialogForm @state() private _data: FormDialogData = {}; + @state() private _open = false; + + @state() private _closeState?: "canceled" | "submitted"; + public async showDialog(params: FormDialogParams): Promise { this._params = params; this._data = params.data || {}; + this._open = true; } - public closeDialog() { - this._params = undefined; - this._data = {}; - fireEvent(this, "dialog-closed", { dialog: this.localName }); + public closeDialog(): boolean { + this._open = false; return true; } + private _dialogClosed(): void { + if (!this._closeState) { + this._params?.cancel?.(); + } + this._closeState = undefined; + this._params = undefined; + this._data = {}; + this._open = false; + fireEvent(this, "dialog-closed", { dialog: this.localName }); + } + private _submit(): void { + this._closeState = "submitted"; this._params?.submit?.(this._data); this.closeDialog(); } private _cancel(): void { + this._closeState = "canceled"; this._params?.cancel?.(); this.closeDialog(); } @@ -52,15 +69,15 @@ export class DialogForm } return html` - - - ${this._params.cancelText || this.hass.localize("ui.common.cancel")} - - - ${this._params.submitText || this.hass.localize("ui.common.save")} - - + + + ${this._params.cancelText || this.hass.localize("ui.common.cancel")} + + + ${this._params.submitText || this.hass.localize("ui.common.save")} + + + `; } diff --git a/src/dialogs/tts-try/dialog-tts-try.ts b/src/dialogs/tts-try/dialog-tts-try.ts index 9192f9c086..393b7ef2dc 100644 --- a/src/dialogs/tts-try/dialog-tts-try.ts +++ b/src/dialogs/tts-try/dialog-tts-try.ts @@ -4,8 +4,9 @@ import { customElement, property, query, state } from "lit/decorators"; import { storage } from "../../common/decorators/storage"; import { fireEvent } from "../../common/dom/fire_event"; import "../../components/buttons/ha-progress-button"; -import { createCloseHeading } from "../../components/ha-dialog"; +import "../../components/ha-dialog-footer"; import "../../components/ha-textarea"; +import "../../components/ha-wa-dialog"; import type { HaTextArea } from "../../components/ha-textarea"; import { convertTextToSpeech } from "../../data/tts"; import { haStyleDialog } from "../../resources/styles"; @@ -19,6 +20,8 @@ export class TTSTryDialog extends LitElement { @state() private _loadingExample = false; + @state() private _open = false; + @state() private _params?: TTSTryDialogParams; @state() private _valid = false; @@ -35,9 +38,14 @@ export class TTSTryDialog extends LitElement { public showDialog(params: TTSTryDialogParams) { this._params = params; this._valid = Boolean(this._defaultMessage); + this._open = true; } public closeDialog() { + this._open = false; + } + + private _dialogClosed() { this._params = undefined; fireEvent(this, "dialog-closed", { dialog: this.localName }); } @@ -61,13 +69,11 @@ export class TTSTryDialog extends LitElement { return nothing; } return html` - - - ${this.hass.localize("ui.dialogs.tts-try.play")} - - + + + ${this.hass.localize("ui.dialogs.tts-try.play")} + + + `; } @@ -153,9 +161,6 @@ export class TTSTryDialog extends LitElement { static styles = [ haStyleDialog, css` - ha-dialog { - --mdc-dialog-max-width: 500px; - } ha-textarea, ha-select { width: 100%; diff --git a/src/dialogs/update_backup/dialog-update-backup.ts b/src/dialogs/update_backup/dialog-update-backup.ts index 6ca708dcc5..056c2e209a 100644 --- a/src/dialogs/update_backup/dialog-update-backup.ts +++ b/src/dialogs/update_backup/dialog-update-backup.ts @@ -2,7 +2,8 @@ import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; import { fireEvent } from "../../common/dom/fire_event"; import "../../components/ha-button"; -import { createCloseHeading } from "../../components/ha-dialog"; +import "../../components/ha-dialog-footer"; +import "../../components/ha-wa-dialog"; import type { HomeAssistant } from "../../types"; import type { UpdateBackupDialogParams } from "./show-update-backup-dialog"; @@ -12,8 +13,13 @@ class DialogBox extends LitElement { @state() private _params?: UpdateBackupDialogParams; + @state() private _open = false; + + @state() private _closeState?: "canceled" | "submitted"; + public async showDialog(params: UpdateBackupDialogParams): Promise { this._params = params; + this._open = true; } protected render() { @@ -22,27 +28,32 @@ class DialogBox extends LitElement { } return html` -

${this.hass.localize("ui.dialogs.update_backup.text")}

- - ${this.hass!.localize("ui.common.no")} - - - ${this.hass.localize("ui.dialogs.update_backup.create")} - - + + + ${this.hass!.localize("ui.common.no")} + + + ${this.hass.localize("ui.dialogs.update_backup.create")} + + + `; } private _no(): void { + this._closeState = "submitted"; if (this._params!.submit) { this._params!.submit(false); } @@ -50,19 +61,24 @@ class DialogBox extends LitElement { } private _yes(): void { + this._closeState = "submitted"; if (this._params!.submit) { this._params!.submit(true); } this.closeDialog(); } - private _cancel(): void { - this._params?.cancel?.(); - this.closeDialog(); + public closeDialog(): void { + this._open = false; } - public closeDialog(): void { + private _dialogClosed(): void { + if (!this._closeState) { + this._params?.cancel?.(); + } + this._closeState = undefined; this._params = undefined; + this._open = false; fireEvent(this, "dialog-closed", { dialog: this.localName }); } @@ -71,15 +87,10 @@ class DialogBox extends LitElement { margin: 0; color: var(--primary-text-color); } - ha-dialog { + ha-wa-dialog { /* Place above other dialogs */ --dialog-z-index: 104; } - @media all and (min-width: 600px) { - ha-dialog { - --mdc-dialog-min-width: 400px; - } - } `; } diff --git a/src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts b/src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts index 047e44c85b..f3654ce13a 100644 --- a/src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts +++ b/src/dialogs/voice-assistant-setup/voice-assistant-setup-dialog.ts @@ -1,4 +1,4 @@ -import { mdiChevronLeft, mdiClose, mdiMenuDown } from "@mdi/js"; +import { mdiChevronLeft, mdiMenuDown } from "@mdi/js"; import type { CSSResultGroup } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property, state } from "lit/decorators"; @@ -7,7 +7,7 @@ import { fireEvent } from "../../common/dom/fire_event"; import { computeDomain } from "../../common/entity/compute_domain"; import { formatLanguageCode } from "../../common/language/format_language"; import "../../components/chips/ha-assist-chip"; -import "../../components/ha-dialog"; +import "../../components/ha-wa-dialog"; import "../../components/ha-dropdown"; import type { HaDropdownSelectEvent } from "../../components/ha-dropdown"; import "../../components/ha-dropdown-item"; @@ -49,6 +49,8 @@ export class HaVoiceAssistantSetupDialog extends LitElement { @state() private _params?: VoiceAssistantSetupDialogParams; + @state() private _open = false; + @state() private _step: STEP = STEP.INIT; @state() private _assistConfiguration?: AssistSatelliteConfiguration; @@ -69,14 +71,15 @@ export class HaVoiceAssistantSetupDialog extends LitElement { params: VoiceAssistantSetupDialogParams ): Promise { this._params = params; + this._open = true; await this._fetchAssistConfiguration(); this._step = STEP.UPDATE; } - public async closeDialog(): Promise { - this.renderRoot.querySelector("ha-dialog")?.close(); + public closeDialog(): void { + this._open = false; } protected willUpdate(changedProps) { @@ -86,6 +89,7 @@ export class HaVoiceAssistantSetupDialog extends LitElement { } private _dialogClosed() { + this._open = false; this._params = undefined; this._assistConfiguration = undefined; this._previousSteps = []; @@ -133,78 +137,72 @@ export class HaVoiceAssistantSetupDialog extends LitElement { ? this.hass.states[assistSatelliteEntityId] : undefined; + const hideNavigationIcon = + this._step === STEP.LOCAL || + (this._step === STEP.UPDATE && !this._previousSteps.length); + return html` - - - ${this._step === STEP.LOCAL - ? nothing - : this._previousSteps.length - ? html`` - : this._step !== STEP.UPDATE - ? html`` - : nothing} - ${this._step === STEP.WAKEWORD || this._step === STEP.AREA - ? html`${this.hass.localize( - "ui.panel.config.voice_assistants.satellite_wizard.skip" - )}` - : this._step === STEP.PIPELINE - ? this._language - ? html` - - - ${getLanguageOptions( - this._languages, - false, - false, + ${hideNavigationIcon + ? html`` + : this._previousSteps.length + ? html`` + : nothing} + ${this._step === STEP.WAKEWORD || this._step === STEP.AREA + ? html`${this.hass.localize( + "ui.panel.config.voice_assistants.satellite_wizard.skip" + )}` + : this._step === STEP.PIPELINE + ? this._language + ? html` + - html` - ${lang.primary} - ` )} - ` - : nothing - : nothing} - + slot="trigger" + > + + ${getLanguageOptions( + this._languages, + false, + false, + this.hass.locale + ).map( + (lang) => + html` + ${lang.primary} + ` + )} + ` + : nothing + : nothing}
` : nothing}
- + `; } @@ -373,20 +371,9 @@ export class HaVoiceAssistantSetupDialog extends LitElement { return [ haStyleDialog, css` - ha-dialog { + ha-wa-dialog { --dialog-content-padding: 0; } - @media all and (min-width: 450px) and (min-height: 500px) { - ha-dialog { - --mdc-dialog-min-width: 560px; - --mdc-dialog-max-width: 560px; - --mdc-dialog-min-width: min(560px, 95vw); - --mdc-dialog-max-width: min(560px, 95vw); - } - } - ha-dialog-header { - height: 56px; - } @media all and (max-width: 450px), all and (max-height: 500px) { .content { height: calc(100vh - 56px); diff --git a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts index 2b639a14e1..f5ed638b8d 100644 --- a/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts +++ b/src/dialogs/voice-command-dialog/ha-voice-command-dialog.ts @@ -14,7 +14,6 @@ import { stopPropagation } from "../../common/dom/stop_propagation"; import "../../components/ha-alert"; import "../../components/ha-assist-chat"; import "../../components/ha-button"; -import "../../components/ha-dialog"; import "../../components/ha-dialog-header"; import "../../components/ha-dropdown"; import type { HaDropdownSelectEvent } from "../../components/ha-dropdown"; @@ -22,6 +21,7 @@ import "../../components/ha-dropdown-item"; import "../../components/ha-icon-button"; import "../../components/ha-icon-next"; import "../../components/ha-spinner"; +import "../../components/ha-wa-dialog"; import type { AssistPipeline } from "../../data/assist_pipeline"; import { getAssistPipeline, @@ -36,7 +36,9 @@ import type { VoiceCommandDialogParams } from "./show-ha-voice-command-dialog"; export class HaVoiceCommandDialog extends LitElement { @property({ attribute: false }) public hass!: HomeAssistant; - @state() private _opened = false; + @state() private _open = false; + + @state() private _dialogOpen = false; @state() @storage({ @@ -76,32 +78,36 @@ export class HaVoiceCommandDialog extends LitElement { } this._startListening = params.start_listening; - this._opened = true; + this._dialogOpen = true; + this._open = true; } - public async closeDialog(): Promise { - this._opened = false; + public closeDialog(): void { + this._open = false; + } + + private _dialogClosed(): void { + this._dialogOpen = false; this._pipelines = undefined; fireEvent(this, "dialog-closed", { dialog: this.localName }); } protected render() { - if (!this._opened) { + if (!this._dialogOpen) { return nothing; } return html` - - + @@ -189,15 +195,15 @@ export class HaVoiceCommandDialog extends LitElement { : html`
`} - + `; } protected willUpdate(changedProperties: PropertyValues): void { if ( changedProperties.has("_pipelineId") || - (changedProperties.has("_opened") && - this._opened === true && + (changedProperties.has("_open") && + this._open === true && this._pipelineId) ) { this._getPipeline(); @@ -252,9 +258,7 @@ export class HaVoiceCommandDialog extends LitElement { return [ haStyleDialog, css` - ha-dialog { - --mdc-dialog-max-width: 500px; - --mdc-dialog-max-height: 500px; + ha-wa-dialog { --dialog-content-padding: 0; } ha-dialog-header a { @@ -277,7 +281,7 @@ export class HaVoiceCommandDialog extends LitElement { margin-inline-start: -9px; } ha-dropdown ha-button { - --ha-button-height: 20px; + --ha-button-height: var(--ha-space-5); } ha-dropdown ha-button::part(base) { margin-left: 5px; @@ -289,15 +293,15 @@ export class HaVoiceCommandDialog extends LitElement { } } ha-dropdown ha-button ha-svg-icon { - height: 28px; - margin-left: 4px; - margin-inline-start: 4px; + height: var(--ha-space-7); + margin-left: var(--ha-space-1); + margin-inline-start: var(--ha-space-1); margin-inline-end: initial; direction: var(--direction); } ha-dropdown-item ha-svg-icon { - margin-left: 4px; - margin-inline-start: 4px; + margin-left: var(--ha-space-1); + margin-inline-start: var(--ha-space-1); margin-inline-end: initial; direction: var(--direction); display: block; @@ -310,10 +314,6 @@ export class HaVoiceCommandDialog extends LitElement { display: flex; justify-content: center; } - ha-assist-chat { - margin: 0 24px 16px; - min-height: 399px; - } `, ]; } diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index 49ec5e1590..0ed446675f 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -28,8 +28,8 @@ import type { } from "../components/data-table/ha-data-table"; import { showDataTableSettingsDialog } from "../components/data-table/show-dialog-data-table-settings"; import "../components/ha-button"; -import "../components/ha-dialog"; -import "../components/ha-dialog-header"; +import "../components/ha-dialog-footer"; +import "../components/ha-wa-dialog"; import "../components/ha-dropdown"; import "../components/ha-icon-button"; import "../components/ha-svg-icon"; @@ -538,44 +538,42 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) {
${this.showFilters && !showPane - ? html` - - - ${localize("ui.components.subpage-data-table.filters")} - ${this.filters - ? html`` - : nothing} - + + ${this.filters + ? html`` + : nothing}
-
- + + ${localize("ui.components.subpage-data-table.show_results", { number: this.data.length, })} -
- ` + + ` : nothing} `; } @@ -588,6 +586,10 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) { this.showFilters = !this.showFilters; } + private _closeFilters = () => { + this.showFilters = false; + }; + private _sortingChanged(ev) { this._sortDirection = ev.detail.direction; this._sortColumn = this._sortDirection ? ev.detail.column : undefined; @@ -896,13 +898,7 @@ export class HaTabsSubpageDataTable extends KeyboardShortcutMixin(LitElement) { --md-assist-chip-trailing-space: 8px; } - ha-dialog { - --mdc-dialog-min-width: 100vw; - --mdc-dialog-max-width: 100vw; - --mdc-dialog-min-height: 100%; - --mdc-dialog-max-height: 100%; - --vertical-align-dialog: flex-end; - --ha-dialog-border-radius: var(--ha-border-radius-square); + ha-wa-dialog { --dialog-content-padding: 0; }