mirror of
https://github.com/home-assistant/frontend.git
synced 2025-08-01 13:37:47 +00:00
HaTargetPicker
This commit is contained in:
parent
69a0bc214c
commit
3d540709aa
@ -106,17 +106,19 @@ export class HaChip extends LitElement {
|
|||||||
.mdc-chip:not(.outlined) .mdc-chip__icon.mdc-chip__icon--leading {
|
.mdc-chip:not(.outlined) .mdc-chip__icon.mdc-chip__icon--leading {
|
||||||
margin-left: -12px !important;
|
margin-left: -12px !important;
|
||||||
margin-right: -2px;
|
margin-right: -2px;
|
||||||
|
color: var(--ha-chip-icon-color, var(--text-primary-color));
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdc-chip.outlined ha-svg-icon,
|
.mdc-chip.outlined ha-svg-icon,
|
||||||
slot[name="trailing-icon"]::slotted(ha-svg-icon) {
|
slot[name="trailing-icon"]::slotted(ha-svg-icon) {
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
background: var(--ha-chip-background-color, var(--primary-color));
|
background-color: var(--ha-chip-background-color, var(--primary-color));
|
||||||
color: var(--card-background-color);
|
color: var(--ha-chip-icon-color, var(--text-primary-color));
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdc-chip.outlined .mdc-chip__icon.mdc-chip__icon--leading {
|
.mdc-chip.outlined .mdc-chip__icon.mdc-chip__icon--leading {
|
||||||
margin-left: -13px !important;
|
margin-left: -13px !important;
|
||||||
|
color: var(--ha-chip-icon-color, var(--text-primary-color));
|
||||||
}
|
}
|
||||||
|
|
||||||
.mdc-chip__icon.mdc-chip__icon--trailing,
|
.mdc-chip__icon.mdc-chip__icon--trailing,
|
||||||
@ -125,7 +127,7 @@ export class HaChip extends LitElement {
|
|||||||
height: 18px;
|
height: 18px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
color: var(--ha-chip-text-color, var(--text-primary-color));
|
color: var(--ha-chip-icon-color);
|
||||||
margin-right: -8px;
|
margin-right: -8px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -1,5 +1,3 @@
|
|||||||
// @ts-ignore
|
|
||||||
import chipStyles from "@material/chips/dist/mdc.chips.min.css";
|
|
||||||
import "@material/mwc-button/mwc-button";
|
import "@material/mwc-button/mwc-button";
|
||||||
import {
|
import {
|
||||||
mdiClose,
|
mdiClose,
|
||||||
@ -14,13 +12,13 @@ import {
|
|||||||
HassServiceTarget,
|
HassServiceTarget,
|
||||||
UnsubscribeFunc,
|
UnsubscribeFunc,
|
||||||
} from "home-assistant-js-websocket";
|
} from "home-assistant-js-websocket";
|
||||||
import { css, CSSResultGroup, html, LitElement, unsafeCSS } from "lit";
|
import { css, CSSResultGroup, html, LitElement } from "lit";
|
||||||
import { customElement, property, query, state } from "lit/decorators";
|
import { customElement, property, query, state } from "lit/decorators";
|
||||||
import { classMap } from "lit/directives/class-map";
|
|
||||||
import { fireEvent } from "../common/dom/fire_event";
|
import { fireEvent } from "../common/dom/fire_event";
|
||||||
import { ensureArray } from "../common/ensure-array";
|
import { ensureArray } from "../common/ensure-array";
|
||||||
import { computeDomain } from "../common/entity/compute_domain";
|
import { computeDomain } from "../common/entity/compute_domain";
|
||||||
import { computeStateName } from "../common/entity/compute_state_name";
|
import { computeStateName } from "../common/entity/compute_state_name";
|
||||||
|
import { stateIconPath } from "../common/entity/state_icon_path";
|
||||||
import {
|
import {
|
||||||
AreaRegistryEntry,
|
AreaRegistryEntry,
|
||||||
subscribeAreaRegistry,
|
subscribeAreaRegistry,
|
||||||
@ -41,6 +39,7 @@ import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker";
|
|||||||
import "./entity/ha-entity-picker";
|
import "./entity/ha-entity-picker";
|
||||||
import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
|
import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker";
|
||||||
import "./ha-area-picker";
|
import "./ha-area-picker";
|
||||||
|
import "./ha-chip-set";
|
||||||
import "./ha-icon-button";
|
import "./ha-icon-button";
|
||||||
import "./ha-svg-icon";
|
import "./ha-svg-icon";
|
||||||
|
|
||||||
@ -114,7 +113,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
|||||||
if (!this._areas || !this._devices || !this._entities) {
|
if (!this._areas || !this._devices || !this._entities) {
|
||||||
return html``;
|
return html``;
|
||||||
}
|
}
|
||||||
return html`<div class="mdc-chip-set items">
|
return html`<ha-chip-set>
|
||||||
${this.value?.area_id
|
${this.value?.area_id
|
||||||
? ensureArray(this.value.area_id).map((area_id) => {
|
? ensureArray(this.value.area_id).map((area_id) => {
|
||||||
const area = this._areas![area_id];
|
const area = this._areas![area_id];
|
||||||
@ -150,70 +149,39 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
|||||||
);
|
);
|
||||||
})
|
})
|
||||||
: ""}
|
: ""}
|
||||||
</div>
|
</ha-chip-set>
|
||||||
${this._renderPicker()}
|
${this._renderPicker()}
|
||||||
<div class="mdc-chip-set">
|
<ha-chip-set>
|
||||||
<div
|
<ha-chip
|
||||||
class="mdc-chip area_id add"
|
class="area_id add"
|
||||||
.type=${"area_id"}
|
.type=${"area_id"}
|
||||||
@click=${this._showPicker}
|
@click=${this._showPicker}
|
||||||
|
.leadingIcon=${mdiPlus}
|
||||||
|
.label=${this.hass.localize(
|
||||||
|
"ui.components.target-picker.add_area_id"
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<div class="mdc-chip__ripple"></div>
|
</ha-chip>
|
||||||
<ha-svg-icon
|
<ha-chip
|
||||||
class="mdc-chip__icon mdc-chip__icon--leading"
|
class="device_id add"
|
||||||
.path=${mdiPlus}
|
|
||||||
></ha-svg-icon>
|
|
||||||
<span role="gridcell">
|
|
||||||
<span role="button" tabindex="0" class="mdc-chip__primary-action">
|
|
||||||
<span class="mdc-chip__text"
|
|
||||||
>${this.hass.localize(
|
|
||||||
"ui.components.target-picker.add_area_id"
|
|
||||||
)}</span
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="mdc-chip device_id add"
|
|
||||||
.type=${"device_id"}
|
.type=${"device_id"}
|
||||||
@click=${this._showPicker}
|
@click=${this._showPicker}
|
||||||
|
.leadingIcon=${mdiPlus}
|
||||||
|
.label=${this.hass.localize(
|
||||||
|
"ui.components.target-picker.add_device_id"
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<div class="mdc-chip__ripple"></div>
|
</ha-chip>
|
||||||
<ha-svg-icon
|
<ha-chip
|
||||||
class="mdc-chip__icon mdc-chip__icon--leading"
|
class="entity_id add"
|
||||||
.path=${mdiPlus}
|
|
||||||
></ha-svg-icon>
|
|
||||||
<span role="gridcell">
|
|
||||||
<span role="button" tabindex="0" class="mdc-chip__primary-action">
|
|
||||||
<span class="mdc-chip__text"
|
|
||||||
>${this.hass.localize(
|
|
||||||
"ui.components.target-picker.add_device_id"
|
|
||||||
)}</span
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
class="mdc-chip entity_id add"
|
|
||||||
.type=${"entity_id"}
|
.type=${"entity_id"}
|
||||||
@click=${this._showPicker}
|
@click=${this._showPicker}
|
||||||
>
|
.leadingIcon=${mdiPlus}
|
||||||
<div class="mdc-chip__ripple"></div>
|
.label=${this.hass.localize(
|
||||||
<ha-svg-icon
|
"ui.components.target-picker.add_entity_id"
|
||||||
class="mdc-chip__icon mdc-chip__icon--leading"
|
)}
|
||||||
.path=${mdiPlus}
|
></ha-chip>
|
||||||
></ha-svg-icon>
|
</ha-chip-set>`;
|
||||||
<span role="gridcell">
|
|
||||||
<span role="button" tabindex="0" class="mdc-chip__primary-action">
|
|
||||||
<span class="mdc-chip__text"
|
|
||||||
>${this.hass.localize(
|
|
||||||
"ui.components.target-picker.add_entity_id"
|
|
||||||
)}</span
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private async _showPicker(ev) {
|
private async _showPicker(ev) {
|
||||||
@ -233,69 +201,59 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
|||||||
iconPath?: string
|
iconPath?: string
|
||||||
) {
|
) {
|
||||||
return html`
|
return html`
|
||||||
<div
|
<ha-chip
|
||||||
class="mdc-chip ${classMap({
|
class=${type}
|
||||||
[type]: true,
|
.id=${id}
|
||||||
})}"
|
.leadingIcon=${iconPath ||
|
||||||
|
entityState?.attributes.icon ||
|
||||||
|
stateIconPath(entityState)}
|
||||||
|
.label=${name}
|
||||||
|
outlined
|
||||||
>
|
>
|
||||||
${iconPath
|
<div slot="trailing-icon">
|
||||||
? html`<ha-svg-icon
|
${type === "entity_id"
|
||||||
class="mdc-chip__icon mdc-chip__icon--leading"
|
? ""
|
||||||
.path=${iconPath}
|
: html`
|
||||||
></ha-svg-icon>`
|
<span>
|
||||||
: ""}
|
<ha-icon-button
|
||||||
${entityState
|
class="expand-btn"
|
||||||
? html`<ha-state-icon
|
tabindex="-1"
|
||||||
class="mdc-chip__icon mdc-chip__icon--leading"
|
role="button"
|
||||||
.state=${entityState}
|
.label=${this.hass.localize(
|
||||||
></ha-state-icon>`
|
"ui.components.target-picker.expand"
|
||||||
: ""}
|
)}
|
||||||
<span role="gridcell">
|
.path=${mdiUnfoldMoreVertical}
|
||||||
<span role="button" tabindex="0" class="mdc-chip__primary-action">
|
hideTitle
|
||||||
<span class="mdc-chip__text">${name}</span>
|
.id=${id}
|
||||||
|
.type=${type}
|
||||||
|
@click=${this._handleExpand}
|
||||||
|
></ha-icon-button>
|
||||||
|
<paper-tooltip class="expand" animation-delay="0"
|
||||||
|
>${this.hass.localize(
|
||||||
|
`ui.components.target-picker.expand_${type}`
|
||||||
|
)}</paper-tooltip
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
`}
|
||||||
|
<span>
|
||||||
|
<ha-icon-button
|
||||||
|
tabindex="-1"
|
||||||
|
role="button"
|
||||||
|
.label=${this.hass.localize("ui.components.target-picker.expand")}
|
||||||
|
.path=${mdiClose}
|
||||||
|
hideTitle
|
||||||
|
.id=${id}
|
||||||
|
.type=${type}
|
||||||
|
@click=${this._handleRemove}
|
||||||
|
></ha-icon-button>
|
||||||
|
<paper-tooltip animation-delay="0"
|
||||||
|
>${this.hass.localize(
|
||||||
|
`ui.components.target-picker.remove_${type}`
|
||||||
|
)}</paper-tooltip
|
||||||
|
>
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</div>
|
||||||
${type === "entity_id"
|
</ha-chip>
|
||||||
? ""
|
|
||||||
: html` <span role="gridcell">
|
|
||||||
<ha-icon-button
|
|
||||||
class="expand-btn mdc-chip__icon mdc-chip__icon--trailing"
|
|
||||||
tabindex="-1"
|
|
||||||
role="button"
|
|
||||||
.label=${this.hass.localize(
|
|
||||||
"ui.components.target-picker.expand"
|
|
||||||
)}
|
|
||||||
.path=${mdiUnfoldMoreVertical}
|
|
||||||
hideTooltip
|
|
||||||
.id=${id}
|
|
||||||
.type=${type}
|
|
||||||
@click=${this._handleExpand}
|
|
||||||
></ha-icon-button>
|
|
||||||
<paper-tooltip class="expand" animation-delay="0"
|
|
||||||
>${this.hass.localize(
|
|
||||||
`ui.components.target-picker.expand_${type}`
|
|
||||||
)}</paper-tooltip
|
|
||||||
>
|
|
||||||
</span>`}
|
|
||||||
<span role="gridcell">
|
|
||||||
<ha-icon-button
|
|
||||||
class="mdc-chip__icon mdc-chip__icon--trailing"
|
|
||||||
tabindex="-1"
|
|
||||||
role="button"
|
|
||||||
.label=${this.hass.localize("ui.components.target-picker.expand")}
|
|
||||||
.path=${mdiClose}
|
|
||||||
hideTooltip
|
|
||||||
.id=${id}
|
|
||||||
.type=${type}
|
|
||||||
@click=${this._handleRemove}
|
|
||||||
></ha-icon-button>
|
|
||||||
<paper-tooltip animation-delay="0"
|
|
||||||
>${this.hass.localize(
|
|
||||||
`ui.components.target-picker.remove_${type}`
|
|
||||||
)}</paper-tooltip
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -528,84 +486,39 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
|
|||||||
|
|
||||||
static get styles(): CSSResultGroup {
|
static get styles(): CSSResultGroup {
|
||||||
return css`
|
return css`
|
||||||
${unsafeCSS(chipStyles)}
|
|
||||||
.mdc-chip {
|
|
||||||
color: var(--primary-text-color);
|
|
||||||
}
|
|
||||||
.items {
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
.mdc-chip-set {
|
|
||||||
padding: 4px 0;
|
|
||||||
}
|
|
||||||
.mdc-chip.add {
|
|
||||||
color: rgba(0, 0, 0, 0.87);
|
|
||||||
}
|
|
||||||
.mdc-chip:not(.add) {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
.mdc-chip ha-icon-button {
|
|
||||||
--mdc-icon-button-size: 24px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
.mdc-chip ha-icon-button ha-svg-icon {
|
|
||||||
border-radius: 50%;
|
|
||||||
background: var(--secondary-text-color);
|
|
||||||
}
|
|
||||||
.mdc-chip__icon.mdc-chip__icon--trailing {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
--mdc-icon-size: 14px;
|
|
||||||
color: var(--secondary-text-color);
|
|
||||||
}
|
|
||||||
.mdc-chip__icon--leading {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
--mdc-icon-size: 20px;
|
|
||||||
border-radius: 50%;
|
|
||||||
padding: 6px;
|
|
||||||
margin-left: -14px !important;
|
|
||||||
}
|
|
||||||
.expand-btn {
|
.expand-btn {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
.mdc-chip.area_id:not(.add) {
|
ha-chip {
|
||||||
border: 2px solid #fed6a4;
|
--ha-chip-icon-color: var(--secondary-text-color);
|
||||||
background: var(--card-background-color);
|
--ha-chip-text-color: var(--primary-text-color);
|
||||||
}
|
}
|
||||||
.mdc-chip.area_id:not(.add) .mdc-chip__icon--leading,
|
ha-chip:hover {
|
||||||
.mdc-chip.area_id.add {
|
|
||||||
background: #fed6a4;
|
|
||||||
}
|
|
||||||
.mdc-chip.device_id:not(.add) {
|
|
||||||
border: 2px solid #a8e1fb;
|
|
||||||
background: var(--card-background-color);
|
|
||||||
}
|
|
||||||
.mdc-chip.device_id:not(.add) .mdc-chip__icon--leading,
|
|
||||||
.mdc-chip.device_id.add {
|
|
||||||
background: #a8e1fb;
|
|
||||||
}
|
|
||||||
.mdc-chip.entity_id:not(.add) {
|
|
||||||
border: 2px solid #d2e7b9;
|
|
||||||
background: var(--card-background-color);
|
|
||||||
}
|
|
||||||
.mdc-chip.entity_id:not(.add) .mdc-chip__icon--leading,
|
|
||||||
.mdc-chip.entity_id.add {
|
|
||||||
background: #d2e7b9;
|
|
||||||
}
|
|
||||||
.mdc-chip:hover {
|
|
||||||
z-index: 5;
|
z-index: 5;
|
||||||
}
|
}
|
||||||
|
ha-icon-button {
|
||||||
|
--mdc-icon-size: 18px;
|
||||||
|
--mdc-icon-button-size: 24px;
|
||||||
|
color: var(--secondary-text-color);
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
ha-chip > div {
|
||||||
|
margin-right: -8px;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
ha-chip.area_id {
|
||||||
|
--ha-chip-background-color: #fed6a4;
|
||||||
|
}
|
||||||
|
ha-chip.device_id {
|
||||||
|
--ha-chip-background-color: #a8e1fb;
|
||||||
|
}
|
||||||
|
ha-chip.entity_id {
|
||||||
|
--ha-chip-background-color: #d2e7b9;
|
||||||
|
}
|
||||||
paper-tooltip.expand {
|
paper-tooltip.expand {
|
||||||
min-width: 200px;
|
min-width: 200px;
|
||||||
}
|
}
|
||||||
:host([disabled]) .mdc-chip {
|
|
||||||
opacity: var(--light-disabled-opacity);
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user