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

Update entity picker (#7343)

Browse Source
This commit is contained in:
Bram Kragten 2020-10-14 17:01:23 +02:00 committed by GitHub
parent 5269ff978b
commit 1f361b7b10
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 35 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/entity/ha-entity-picker.ts
View File

@ -1,3 +1,4 @@
import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
import "@polymer/paper-input/paper-input"; import "@polymer/paper-input/paper-input";
import "@polymer/paper-item/paper-icon-item"; import "@polymer/paper-item/paper-icon-item";
import "@polymer/paper-item/paper-item-body"; import "@polymer/paper-item/paper-item-body";
@ -20,8 +21,9 @@ import { computeDomain } from "../../common/entity/compute_domain";
import { computeStateName } from "../../common/entity/compute_state_name"; import { computeStateName } from "../../common/entity/compute_state_name";
import { PolymerChangedEvent } from "../../polymer-types"; import { PolymerChangedEvent } from "../../polymer-types";
import { HomeAssistant } from "../../types"; import { HomeAssistant } from "../../types";
import "../ha-icon-button"; import "../ha-svg-icon";
import "./state-badge"; import "./state-badge";
import "@material/mwc-icon-button/mwc-icon-button";
export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean; export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
@ -206,35 +208,35 @@ export class HaEntityPicker extends LitElement {
autocorrect="off" autocorrect="off"
spellcheck="false" spellcheck="false"
> >
${this.value && !this.hideClearIcon <div class="suffix" slot="suffix">
? html` ${this.value && !this.hideClearIcon
<ha-icon-button ? html`
aria-label=${this.hass.localize( <mwc-icon-button
"ui.components.entity.entity-picker.clear" .label=${this.hass.localize(
)} "ui.components.entity.entity-picker.clear"
slot="suffix" )}
class="clear-button" class="clear-button"
icon="hass:close" tabindex="-1"
tabindex="-1" @click=${this._clearValue}
@click=${this._clearValue} no-ripple
no-ripple >
> <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
Clear </mwc-icon-button>
</ha-icon-button> `
` : ""}
: ""}
<ha-icon-button <mwc-icon-button
aria-label=${this.hass.localize( .label=${this.hass.localize(
"ui.components.entity.entity-picker.show_entities" "ui.components.entity.entity-picker.show_entities"
)} )}
slot="suffix" class="toggle-button"
class="toggle-button" tabindex="-1"
.icon=${this._opened ? "hass:menu-up" : "hass:menu-down"} >
tabindex="-1" <ha-svg-icon
> .path=${this._opened ? mdiMenuUp : mdiMenuDown}
Toggle ></ha-svg-icon>
</ha-icon-button> </mwc-icon-button>
</div>
</paper-input> </paper-input>
</vaadin-combo-box-light> </vaadin-combo-box-light>
`; `;
@ -270,7 +272,10 @@ export class HaEntityPicker extends LitElement {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
paper-input > ha-icon-button { .suffix {
display: flex;
}
mwc-icon-button {
--mdc-icon-button-size: 24px; --mdc-icon-button-size: 24px;
padding: 0px 2px; padding: 0px 2px;
color: var(--secondary-text-color); color: var(--secondary-text-color);