mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 17:26:42 +00:00
Fix Quickbar for Safari - Change to MWC Textfield (#11414)
This commit is contained in:
parent
6c12a5a4b1
commit
614bd2f451
25
src/components/ha-textfield.ts
Normal file
25
src/components/ha-textfield.ts
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
@ -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);
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user