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