diff --git a/src/common/search/search-input.ts b/src/common/search/search-input.ts index 08084af98a..f9806d60e0 100644 --- a/src/common/search/search-input.ts +++ b/src/common/search/search-input.ts @@ -1,17 +1,10 @@ import { mdiClose, mdiMagnify } from "@mdi/js"; -import "@polymer/paper-input/paper-input"; -import type { PaperInputElement } from "@polymer/paper-input/paper-input"; -import { - css, - CSSResultGroup, - html, - LitElement, - PropertyValues, - TemplateResult, -} from "lit"; +import { css, CSSResultGroup, html, LitElement, TemplateResult } from "lit"; import { customElement, property, query } from "lit/decorators"; import "../../components/ha-icon-button"; import "../../components/ha-svg-icon"; +import "../../components/ha-textfield"; +import type { HaTextField } from "../../components/ha-textfield"; import { HomeAssistant } from "../../types"; import { fireEvent } from "../dom/fire_event"; @@ -21,12 +14,6 @@ class SearchInput extends LitElement { @property() public filter?: string; - @property({ type: Boolean, attribute: "no-label-float" }) - public noLabelFloat? = false; - - @property({ type: Boolean, attribute: "no-underline" }) - public noUnderline = false; - @property({ type: Boolean }) public autofocus = false; @@ -34,49 +21,42 @@ class SearchInput extends LitElement { public label?: string; public focus() { - this.shadowRoot!.querySelector("paper-input")!.focus(); + this._input?.focus(); } - @query("paper-input", true) private _input!: PaperInputElement; + @query("ha-textfield", true) private _input!: HaTextField; protected render(): TemplateResult { return html` - - - + + ${this.filter && html` `} - + `; } - protected updated(changedProps: PropertyValues) { - if ( - changedProps.has("noUnderline") && - (this.noUnderline || changedProps.get("noUnderline") !== undefined) - ) { - ( - this._input.inputElement!.parentElement!.shadowRoot!.querySelector( - "div.unfocused-line" - ) as HTMLElement - ).style.display = this.noUnderline ? "none" : "block"; - } - } - private async _filterChanged(value: string) { fireEvent(this, "value-changed", { value: String(value) }); } @@ -91,15 +71,24 @@ class SearchInput extends LitElement { static get styles(): CSSResultGroup { return css` + :host { + display: inline-flex; + } ha-svg-icon, ha-icon-button { color: var(--primary-text-color); } + ha-svg-icon { + outline: none; + } ha-icon-button { --mdc-icon-button-size: 24px; } - ha-svg-icon.prefix { - margin: 8px; + .clear-button { + --mdc-icon-size: 20px; + } + ha-textfield { + display: inherit; } `; } diff --git a/src/components/data-table/ha-data-table.ts b/src/components/data-table/ha-data-table.ts index 372bfa4460..babc785d50 100644 --- a/src/components/data-table/ha-data-table.ts +++ b/src/components/data-table/ha-data-table.ts @@ -928,11 +928,10 @@ export class HaDataTable extends LitElement { } .table-header { border-bottom: 1px solid var(--divider-color); - padding: 0 16px; } search-input { - position: relative; - top: 2px; + display: block; + flex: 1; } slot[name="header"] { display: block; diff --git a/src/dialogs/quick-bar/ha-quick-bar.ts b/src/dialogs/quick-bar/ha-quick-bar.ts index c166918cc9..56bac512dd 100644 --- a/src/dialogs/quick-bar/ha-quick-bar.ts +++ b/src/dialogs/quick-bar/ha-quick-bar.ts @@ -24,7 +24,6 @@ import { computeDomain } from "../../common/entity/compute_domain"; import { computeStateName } from "../../common/entity/compute_state_name"; import { domainIcon } from "../../common/entity/domain_icon"; import { navigate } from "../../common/navigate"; -import "../../common/search/search-input"; import { caseInsensitiveStringCompare } from "../../common/string/compare"; import { fuzzyFilterSort, diff --git a/src/layouts/hass-tabs-subpage-data-table.ts b/src/layouts/hass-tabs-subpage-data-table.ts index c291eab335..c05530b856 100644 --- a/src/layouts/hass-tabs-subpage-data-table.ts +++ b/src/layouts/hass-tabs-subpage-data-table.ts @@ -159,28 +159,28 @@ export class HaTabsSubpageDataTable extends LitElement { const headerToolbar = html` - ${filterInfo - ? html`
- ${this.narrow - ? html`
- - - ${filterInfo} - -
` - : filterInfo} - - ${this.hass.localize("ui.components.data-table.clear")} - -
` - : ""}`; + +
+ ${filterInfo + ? html`
+ ${this.narrow + ? html`
+ + + ${filterInfo} + +
` + : filterInfo} + + ${this.hass.localize("ui.components.data-table.clear")} + +
` + : ""} +
`; return html`