Fix Quickbar for Safari - Change to MWC Textfield (#11414)

This commit is contained in:
Zack Barett 2022-01-24 11:14:29 -06:00 committed by GitHub
parent 6c12a5a4b1
commit 614bd2f451
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 42 additions and 13 deletions

View File

@ -0,0 +1,25 @@
import { TextField } from "@material/mwc-textfield";
import { TemplateResult, html } from "lit";
import { customElement } from "lit/decorators";
@customElement("ha-textfield")
export class HaTextField extends TextField {
override renderIcon(_icon: string, isTrailingIcon = false): TemplateResult {
const type = isTrailingIcon ? "trailing" : "leading";
return html`
<span
class="mdc-text-field__icon mdc-text-field__icon--${type}"
tabindex=${isTrailingIcon ? 1 : -1}
>
<slot name="${type}Icon"></slot>
</span>
`;
}
}
declare global {
interface HTMLElementTagNameMap {
"ha-textfield": HaTextField;
}
}

View File

@ -1,3 +1,4 @@
import "../../components/ha-textfield";
import { Layout1d, scroll } from "@lit-labs/virtualizer"; import { Layout1d, scroll } from "@lit-labs/virtualizer";
import "@material/mwc-list/mwc-list"; import "@material/mwc-list/mwc-list";
import type { List } from "@material/mwc-list/mwc-list"; import type { List } from "@material/mwc-list/mwc-list";
@ -98,7 +99,7 @@ export class QuickBar extends LitElement {
@state() private _hint?: string; @state() private _hint?: string;
@query("paper-input", false) private _filterInputField?: HTMLElement; @query("ha-textfield", false) private _filterInputField?: HTMLElement;
private _focusSet = false; private _focusSet = false;
@ -143,28 +144,32 @@ export class QuickBar extends LitElement {
hideActions hideActions
> >
<div slot="heading" class="heading"> <div slot="heading" class="heading">
<paper-input <ha-textfield
dialogInitialFocus dialogInitialFocus
no-label-float .placeholder=${this.hass.localize(
@value-changed=${this._handleSearchChange} "ui.dialogs.quick-bar.filter_placeholder"
.label=${this.hass.localize( )}
aria-label=${this.hass.localize(
"ui.dialogs.quick-bar.filter_placeholder" "ui.dialogs.quick-bar.filter_placeholder"
)} )}
.value=${this._commandMode ? `>${this._search}` : this._search} .value=${this._commandMode ? `>${this._search}` : this._search}
.icon=${true}
.iconTrailing=${this._search !== undefined}
@input=${this._handleSearchChange}
@keydown=${this._handleInputKeyDown} @keydown=${this._handleInputKeyDown}
@focus=${this._setFocusFirstListItem} @focus=${this._setFocusFirstListItem}
> >
${this._commandMode ${this._commandMode
? html` ? html`
<ha-svg-icon <ha-svg-icon
slot="prefix" slot="leadingIcon"
class="prefix" class="prefix"
.path=${mdiConsoleLine} .path=${mdiConsoleLine}
></ha-svg-icon> ></ha-svg-icon>
` `
: html` : html`
<ha-svg-icon <ha-svg-icon
slot="prefix" slot="leadingIcon"
class="prefix" class="prefix"
.path=${mdiMagnify} .path=${mdiMagnify}
></ha-svg-icon> ></ha-svg-icon>
@ -172,13 +177,13 @@ export class QuickBar extends LitElement {
${this._search && ${this._search &&
html` html`
<ha-icon-button <ha-icon-button
slot="suffix" slot="trailingIcon"
@click=${this._clearSearch} @click=${this._clearSearch}
.label=${this.hass!.localize("ui.common.clear")} .label=${this.hass!.localize("ui.common.clear")}
.path=${mdiClose} .path=${mdiClose}
></ha-icon-button> ></ha-icon-button>
`} `}
</paper-input> </ha-textfield>
${this._narrow ${this._narrow
? html` ? html`
<mwc-button <mwc-button
@ -357,7 +362,7 @@ export class QuickBar extends LitElement {
} }
private _handleSearchChange(ev: CustomEvent): void { private _handleSearchChange(ev: CustomEvent): void {
const newFilter = ev.detail.value; const newFilter = (ev.currentTarget as any).value;
const oldCommandMode = this._commandMode; const oldCommandMode = this._commandMode;
const oldSearch = this._search; const oldSearch = this._search;
let newCommandMode: boolean; let newCommandMode: boolean;
@ -674,7 +679,7 @@ export class QuickBar extends LitElement {
--mdc-theme-primary: var(--primary-text-color); --mdc-theme-primary: var(--primary-text-color);
} }
.heading paper-input { .heading ha-textfield {
flex-grow: 1; flex-grow: 1;
} }
@ -699,11 +704,10 @@ export class QuickBar extends LitElement {
} }
ha-svg-icon.prefix { ha-svg-icon.prefix {
margin: 8px;
color: var(--primary-text-color); color: var(--primary-text-color);
} }
paper-input ha-icon-button { ha-textfield ha-icon-button {
--mdc-icon-button-size: 24px; --mdc-icon-button-size: 24px;
color: var(--primary-text-color); color: var(--primary-text-color);
} }