Update entity picker (#7343)

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

View File

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