mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-25 10:16:46 +00:00
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:
parent
f9d78a95ad
commit
cb255ef137
@ -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;
|
||||
}
|
||||
`;
|
||||
|
@ -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;
|
||||
|
@ -32,6 +32,9 @@ class StepFlowLoading extends LitElement {
|
||||
padding: 50px 100px;
|
||||
text-align: center;
|
||||
}
|
||||
paper-spinner-lite {
|
||||
margin-top: 16px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
@ -14,7 +14,6 @@ import {
|
||||
css,
|
||||
} from "lit-element";
|
||||
import memoize from "memoize-one";
|
||||
import "../../../../common/search/search-input";
|
||||
import {
|
||||
DataTableColumnContainer,
|
||||
RowClickedEvent,
|
||||
|
Loading…
x
Reference in New Issue
Block a user