jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-01 21:47:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate to mwc-item

Browse Source
This commit is contained in:
Bram Kragten 2022-02-11 14:40:31 +01:00
parent a5862b86ca
commit 737f7ba6b9
No known key found for this signature in database
GPG Key ID: FBE2DFDB363EF55B
1 changed files with 18 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/dialogs/config-flow/step-flow-pick-handler.ts
View File

@ -1,5 +1,3 @@
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
import Fuse from "fuse.js";
import {
css,
@ -22,6 +20,8 @@ import { HomeAssistant } from "../../types";
import { brandsUrl } from "../../util/brands-url";
import { documentationUrl } from "../../util/documentation-url";
import { configFlowContentStyles } from "./styles";
import "@material/mwc-list/mwc-list-item";
import { afterNextRender } from "../../common/util/render-status";
interface HandlerObj {
name: string;
@ -97,12 +97,14 @@ class StepFlowPickHandler extends LitElement {
? handlers.map(
(handler: HandlerObj) =>
html`
<paper-icon-item
<mwc-list-item
graphic="medium"
hasMeta
@click=${this._handlerPicked}
.handler=${handler}
>
<img
slot="item-icon"
slot="graphic"
loading="lazy"
src=${brandsUrl({
domain: handler.slug,
@ -113,9 +115,9 @@ class StepFlowPickHandler extends LitElement {
referrerpolicy="no-referrer"
/>
<paper-item-body> ${handler.name} </paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-icon-item>
${handler.name}
<ha-icon-next slot="meta"></ha-icon-next>
</mwc-list-item>
`
)
: html`
@ -162,18 +164,15 @@ class StepFlowPickHandler extends LitElement {
protected updated(changedProps) {
super.updated(changedProps);
// Store the width and height so that when we search, box doesn't jump
const div = this.shadowRoot!.querySelector("div")!;
if (!this._width) {
const width = div.clientWidth;
if (width) {
this._width = width;
}
}
if (!this._height) {
const height = div.clientHeight;
if (height) {
this._height = height;
}
if (!this._width || !this._height) {
this.updateComplete.then(() => {
afterNextRender(() => {
const boundingRect =
this.shadowRoot!.querySelector("div")!.getBoundingClientRect();
this._width = boundingRect.width;
this._height = boundingRect.height;
});
});
}
}
@ -236,10 +235,6 @@ class StepFlowPickHandler extends LitElement {
max-height: calc(100vh - 134px);
}
}
paper-icon-item {
cursor: pointer;
margin-bottom: 4px;
}
p {
text-align: center;
padding: 16px;