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