diff --git a/src/components/data-table/ha-data-table-labels.ts b/src/components/data-table/ha-data-table-labels.ts index fae9c2ad44..b8c300024b 100644 --- a/src/components/data-table/ha-data-table-labels.ts +++ b/src/components/data-table/ha-data-table-labels.ts @@ -2,15 +2,17 @@ import type { TemplateResult } from "lit"; import { css, html, LitElement, nothing } from "lit"; import { customElement, property } from "lit/decorators"; import { repeat } from "lit/directives/repeat"; -import type { LabelRegistryEntry } from "../../data/label_registry"; import { computeCssColor } from "../../common/color/compute-color"; import { fireEvent } from "../../common/dom/fire_event"; -import "../ha-label"; +import { stopPropagation } from "../../common/dom/stop_propagation"; import { stringCompare } from "../../common/string/compare"; +import type { LabelRegistryEntry } from "../../data/label_registry"; import "../chips/ha-chip-set"; -import "../ha-button-menu"; +import "../ha-dropdown"; +import "../ha-dropdown-item"; +import type { HaDropdownItem } from "../ha-dropdown-item"; import "../ha-icon"; -import "../ha-list-item"; +import "../ha-label"; @customElement("ha-data-table-labels") class HaDataTableLabels extends LitElement { @@ -26,12 +28,11 @@ class HaDataTableLabels extends LitElement { (label) => this._renderLabel(label, true) )} ${labels.length > 2 - ? html` +${labels.length - 2} @@ -40,12 +41,12 @@ class HaDataTableLabels extends LitElement { labels.slice(2), (label) => label.label_id, (label) => html` - + ${this._renderLabel(label, false)} - + ` )} - ` + ` : nothing} `; @@ -81,21 +82,12 @@ class HaDataTableLabels extends LitElement { fireEvent(this, "label-clicked", { label }); } - protected _handleIconOverflowMenuOpened(e) { - e.stopPropagation(); - // If this component is used inside a data table, the z-index of the row - // needs to be increased. Otherwise the ha-button-menu would be displayed - // underneath the next row in the table. - const row = this.closest(".mdc-data-table__row") as HTMLDivElement | null; - if (row) { - row.style.zIndex = "1"; - } - } - - protected _handleIconOverflowMenuClosed() { - const row = this.closest(".mdc-data-table__row") as HTMLDivElement | null; - if (row) { - row.style.zIndex = ""; + private _handleDropdownSelect( + ev: CustomEvent<{ item: HaDropdownItem & { item?: LabelRegistryEntry } }> + ) { + const label = ev.detail?.item?.item; + if (label) { + fireEvent(this, "label-clicked", { label }); } } @@ -114,9 +106,6 @@ class HaDataTableLabels extends LitElement { --ha-label-background-color: var(--color, var(--grey-color)); --ha-label-background-opacity: 0.5; } - ha-button-menu { - border-radius: 10px; - } .plus { --ha-label-background-color: transparent; border: 1px solid var(--divider-color); diff --git a/src/components/ha-qr-scanner.ts b/src/components/ha-qr-scanner.ts index a31195f9fd..eb24be334e 100644 --- a/src/components/ha-qr-scanner.ts +++ b/src/components/ha-qr-scanner.ts @@ -9,13 +9,13 @@ import { customElement, property, query, state } from "lit/decorators"; import { prepareZXingModule } from "barcode-detector"; import type QrScanner from "qr-scanner"; import { fireEvent } from "../common/dom/fire_event"; -import { stopPropagation } from "../common/dom/stop_propagation"; import { addExternalBarCodeListener } from "../external_app/external_app_entrypoint"; import type { HomeAssistant } from "../types"; import "./ha-alert"; import "./ha-button"; -import "./ha-button-menu"; -import "./ha-list-item"; +import "./ha-dropdown"; +import "./ha-dropdown-item"; +import type { HaDropdownItem } from "./ha-dropdown-item"; import "./ha-spinner"; import "./ha-textfield"; import type { HaTextField } from "./ha-textfield"; @@ -52,6 +52,8 @@ class HaQrScanner extends LitElement { @state() private _warning?: string; + @state() private _selectedCamera?: string; + private _qrScanner?: QrScanner; private _qrNotFoundCount = 0; @@ -121,7 +123,7 @@ class HaQrScanner extends LitElement { !this._error && this._cameras && this._cameras.length > 1 - ? html` + ? html` ${this._cameras!.map( (camera) => html` - ${camera.label} - + ` )} - ` + ` : nothing} ` : html` @@ -205,6 +209,9 @@ class HaQrScanner extends LitElement { private async _listCameras(qrScanner: typeof QrScanner): Promise { this._cameras = await qrScanner.listCameras(true); + if (this._cameras.length > 0) { + this._selectedCamera = this._cameras[0].id; + } } private _qrCodeError = (err: any) => { @@ -252,8 +259,12 @@ class HaQrScanner extends LitElement { this._qrCodeScanned(this._manualInput!.value); } - private _cameraChanged(ev: CustomEvent): void { - this._qrScanner?.setCamera((ev.target as any).value); + private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) { + const cameraId = ev.detail?.item?.value; + if (cameraId) { + this._selectedCamera = cameraId; + this._qrScanner?.setCamera(cameraId); + } } private _openExternalScanner() { @@ -359,7 +370,7 @@ class HaQrScanner extends LitElement { #canvas-container { position: relative; } - ha-button-menu { + ha-icon-button { position: absolute; bottom: 8px; right: 8px; @@ -369,6 +380,9 @@ class HaQrScanner extends LitElement { color: white; border-radius: var(--ha-border-radius-circle); } + ha-dropdown-item.selected { + font-weight: var(--ha-font-weight-bold); + } .row { display: flex; align-items: center; diff --git a/src/panels/config/logs/ha-config-logs.ts b/src/panels/config/logs/ha-config-logs.ts index 0ff956a028..e06394327e 100644 --- a/src/panels/config/logs/ha-config-logs.ts +++ b/src/panels/config/logs/ha-config-logs.ts @@ -4,10 +4,12 @@ import { css, html, LitElement } from "lit"; import { customElement, property, query, state } from "lit/decorators"; import { isComponentLoaded } from "../../../common/config/is_component_loaded"; import { navigate } from "../../../common/navigate"; +import { stringCompare } from "../../../common/string/compare"; import { extractSearchParam } from "../../../common/url/search-params"; import "../../../components/ha-button"; -import "../../../components/ha-button-menu"; -import "../../../components/ha-list-item"; +import "../../../components/ha-dropdown"; +import "../../../components/ha-dropdown-item"; +import type { HaDropdownItem } from "../../../components/ha-dropdown-item"; import "../../../components/search-input"; import type { LogProvider } from "../../../data/error_log"; import { fetchHassioAddonsInfo } from "../../../data/hassio/addon"; @@ -18,7 +20,6 @@ import type { HomeAssistant, Route } from "../../../types"; import "./error-log-card"; import "./system-log-card"; import type { SystemLogCard } from "./system-log-card"; -import { stringCompare } from "../../../common/string/compare"; const logProviders: LogProvider[] = [ { @@ -117,7 +118,10 @@ export class HaConfigLogs extends LitElement { > ${isComponentLoaded(this.hass, "hassio") ? html` - + ${this._logProviders.find( @@ -126,16 +130,17 @@ export class HaConfigLogs extends LitElement { ${this._logProviders.map( (provider) => html` - ${provider.name} - + ` )} - + ` : ""} ${search} @@ -170,8 +175,12 @@ export class HaConfigLogs extends LitElement { this._detail = !this._detail; } - private _selectProvider(ev) { - this._selectedLogProvider = (ev.currentTarget as any).provider; + private _handleDropdownSelect(ev: CustomEvent<{ item: HaDropdownItem }>) { + const provider = ev.detail?.item?.value; + if (!provider) { + return; + } + this._selectedLogProvider = provider; this._filter = ""; navigate(`/config/logs?provider=${this._selectedLogProvider}`); } @@ -254,7 +263,7 @@ export class HaConfigLogs extends LitElement { direction: ltr; } @media all and (max-width: 870px) { - ha-button-menu { + ha-dropdown { max-width: 50%; } ha-button { @@ -265,8 +274,8 @@ export class HaConfigLogs extends LitElement { white-space: nowrap; } } - ha-list-item[selected] { - color: var(--primary-color); + ha-dropdown-item.selected { + font-weight: var(--ha-font-weight-bold); } `, ];