jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 03:36:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

Prevent add card dialog to jump on search (#6180)

Browse Source
This commit is contained in:
Bram Kragten 2020-06-16 22:20:10 +02:00 committed by GitHub
parent a55d0f347b
commit c251e4f241
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 50 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
src/panels/lovelace/editor/card-editor/hui-card-picker.ts
View File

@ -32,6 +32,7 @@ import { LovelaceCard } from "../../types";
import { getCardStubConfig } from "../get-card-stub-config";
import { CardPickTarget, Card } from "../types";
import { coreCards } from "../lovelace-cards";
import { styleMap } from "lit-html/directives/style-map";
interface CardElement {
card: Card;
@ -54,6 +55,10 @@ export class HuiCardPicker extends LitElement {
private _usedEntities?: string[];
private _width?: number;
private _height?: number;
private _filterCards = memoizeOne(
(cardElements: CardElement[], filter?: string): CardElement[] => {
if (filter) {
@ -92,26 +97,33 @@ export class HuiCardPicker extends LitElement {
no-label-float
@value-changed=${this._handleSearchChange}
></search-input>
<div class="cards-container">
${this._filterCards(this._cards, this._filter).map(
(cardElement: CardElement) => cardElement.element
)}
</div>
<div class="cards-container">
<div
class="card manual"
@click=${this._cardPicked}
.config=${{ type: "" }}
>
<div class="preview description">
${this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.manual_description`
)}
</div>
<div class="card-header">
${this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.manual`
)}
<div
style=${styleMap({
width: `${this._width}px`,
height: `${this._height}px`,
})}
>
<div class="cards-container">
${this._filterCards(this._cards, this._filter).map(
(cardElement: CardElement) => cardElement.element
)}
</div>
<div class="cards-container">
<div
class="card manual"
@click=${this._cardPicked}
.config=${{ type: "" }}
>
<div class="preview description">
${this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.manual_description`
)}
</div>
<div class="card-header">
${this.hass!.localize(
`ui.panel.lovelace.editor.card.generic.manual`
)}
</div>
</div>
</div>
</div>
@ -153,6 +165,24 @@ export class HuiCardPicker extends LitElement {
this._loadCards();
}
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;
}
}
}
private _loadCards() {
let cards: Card[] = coreCards.map((card: Card) => ({
name: this.hass!.localize(