Add icons when adding integration (#5500)

* Add icons when adding integration

* Remove margin from search input and put in parent
This commit is contained in:
Paulus Schoutsen 2020-04-09 05:44:08 -07:00 committed by GitHub
parent f9d78a95ad
commit cb255ef137
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 58 additions and 38 deletions

View File

@ -34,29 +34,27 @@ class SearchInput extends LitElement {
}
}
</style>
<div class="search-container">
<paper-input
class=${classMap({ "no-underline": this.noUnderline })}
autofocus
label="Search"
.value=${this.filter}
@value-changed=${this._filterInputChanged}
.noLabelFloat=${this.noLabelFloat}
>
<ha-icon icon="hass:magnify" slot="prefix" class="prefix"></ha-icon>
${this.filter &&
html`
<paper-icon-button
slot="suffix"
class="suffix"
@click=${this._clearSearch}
icon="hass:close"
alt="Clear"
title="Clear"
></paper-icon-button>
`}
</paper-input>
</div>
<paper-input
class=${classMap({ "no-underline": this.noUnderline })}
autofocus
label="Search"
.value=${this.filter}
@value-changed=${this._filterInputChanged}
.noLabelFloat=${this.noLabelFloat}
>
<ha-icon icon="hass:magnify" slot="prefix" class="prefix"></ha-icon>
${this.filter &&
html`
<paper-icon-button
slot="suffix"
class="suffix"
@click=${this._clearSearch}
icon="hass:close"
alt="Clear"
title="Clear"
></paper-icon-button>
`}
</paper-input>
`;
}
@ -74,16 +72,7 @@ class SearchInput extends LitElement {
static get styles(): CSSResult {
return css`
paper-input {
flex: 1 1 auto;
margin: 0 16px;
}
.search-container {
display: inline-flex;
width: 100%;
align-items: center;
}
.prefix {
ha-icon {
margin: 8px;
}
`;

View File

@ -727,6 +727,7 @@ export class HaDataTable extends LitElement {
}
.table-header {
border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
padding: 0 16px;
}
search-input {
position: relative;

View File

@ -32,6 +32,9 @@ class StepFlowLoading extends LitElement {
padding: 50px 100px;
text-align: center;
}
paper-spinner-lite {
margin-top: 16px;
}
`;
}
}

View File

@ -8,7 +8,7 @@ import {
TemplateResult,
} from "lit-element";
import "@polymer/paper-spinner/paper-spinner-lite";
import "@polymer/paper-item/paper-item";
import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body";
import { HomeAssistant } from "../../types";
import { fireEvent } from "../../common/dom/fire_event";
@ -77,12 +77,25 @@ class StepFlowPickHandler extends LitElement {
${handlers.map(
(handler: HandlerObj) =>
html`
<paper-item @click=${this._handlerPicked} .handler=${handler}>
<paper-icon-item
@click=${this._handlerPicked}
.handler=${handler}
>
<img
slot="item-icon"
loading="lazy"
src="https://brands.home-assistant.io/_/${handler.slug}/icon.png"
srcset="
https://brands.home-assistant.io/_/${handler.slug}/icon@2x.png 2x
"
referrerpolicy="no-referrer"
/>
<paper-item-body>
${handler.name}
</paper-item-body>
<ha-icon-next></ha-icon-next>
</paper-item>
</paper-icon-item>
`
)}
</div>
@ -144,6 +157,17 @@ class StepFlowPickHandler extends LitElement {
return [
configFlowContentStyles,
css`
img {
max-width: 40px;
max-height: 40px;
}
search-input {
display: block;
margin: -12px 16px 0;
}
ha-icon-next {
margin-right: 8px;
}
div {
overflow: auto;
max-height: 600px;
@ -156,8 +180,9 @@ class StepFlowPickHandler extends LitElement {
max-height: calc(100vh - 300px);
}
}
paper-item {
paper-icon-item {
cursor: pointer;
margin-bottom: 4px;
}
p {
text-align: center;

View File

@ -160,9 +160,11 @@ export class HaTabsSubpageDataTable extends LitElement {
}
.table-header {
border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
padding: 0 16px;
}
.search-toolbar {
color: var(--secondary-text-color);
padding: 0 16px;
}
search-input {
position: relative;

View File

@ -624,6 +624,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
}
search-input {
margin-left: 16px;
flex-grow: 1;
position: relative;
top: 2px;

View File

@ -14,7 +14,6 @@ import {
css,
} from "lit-element";
import memoize from "memoize-one";
import "../../../../common/search/search-input";
import {
DataTableColumnContainer,
RowClickedEvent,