jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-26 10:46:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Keep add integration dialog same size while searching (#6158)

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

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

@ -42,6 +42,8 @@ class StepFlowPickHandler extends LitElement {
private _width?: number; private _width?: number;
private _height?: number;
private _getHandlers = memoizeOne( private _getHandlers = memoizeOne(
(h: string[], filter?: string, _localize?: LocalizeFunc) => { (h: string[], filter?: string, _localize?: LocalizeFunc) => {
const handlers: HandlerObj[] = h.map((handler) => { const handlers: HandlerObj[] = h.map((handler) => {
@ -82,7 +84,10 @@ class StepFlowPickHandler extends LitElement {
@value-changed=${this._filterChanged} @value-changed=${this._filterChanged}
></search-input> ></search-input>
<div <div
style=${styleMap({ width: `${this._width}px` })} style=${styleMap({
width: `${this._width}px`,
height: `${this._height}px`,
})}
class=${classMap({ advanced: Boolean(this.showAdvanced) })} class=${classMap({ advanced: Boolean(this.showAdvanced) })}
> >
${handlers.map( ${handlers.map(
@ -139,13 +144,20 @@ class StepFlowPickHandler extends LitElement {
protected updated(changedProps) { protected updated(changedProps) {
super.updated(changedProps); super.updated(changedProps);
// Store the width 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) { if (!this._width) {
const width = this.shadowRoot!.querySelector("div")!.clientWidth; const width = div.clientWidth;
if (width) { if (width) {
this._width = width; this._width = width;
} }
} }
if (!this._height) {
const height = div.clientHeight;
if (height) {
this._height = height;
}
}
} }
private async _filterChanged(e) { private async _filterChanged(e) {
@ -166,8 +178,8 @@ class StepFlowPickHandler extends LitElement {
configFlowContentStyles, configFlowContentStyles,
css` css`
img { img {
max-width: 40px; width: 40px;
max-height: 40px; height: 40px;
} }
search-input { search-input {
display: block; display: block;
@ -180,12 +192,12 @@ class StepFlowPickHandler extends LitElement {
overflow: auto; overflow: auto;
max-height: 600px; max-height: 600px;
} }
@media all and (max-height: 1px) { @media all and (max-height: 900px) {
div { div {
max-height: calc(100vh - 205px); max-height: calc(100vh - 134px);
} }
div.advanced { div.advanced {
max-height: calc(100vh - 300px); max-height: calc(100vh - 250px);
} }
} }
paper-icon-item { paper-icon-item {