diff --git a/src/components/ha-chip.ts b/src/components/ha-chip.ts index 9c34ff3583..4f35f03578 100644 --- a/src/components/ha-chip.ts +++ b/src/components/ha-chip.ts @@ -106,17 +106,19 @@ export class HaChip extends LitElement { .mdc-chip:not(.outlined) .mdc-chip__icon.mdc-chip__icon--leading { margin-left: -12px !important; margin-right: -2px; + color: var(--ha-chip-icon-color, var(--text-primary-color)); } .mdc-chip.outlined ha-svg-icon, slot[name="trailing-icon"]::slotted(ha-svg-icon) { border-radius: 50%; - background: var(--ha-chip-background-color, var(--primary-color)); - color: var(--card-background-color); + background-color: var(--ha-chip-background-color, var(--primary-color)); + color: var(--ha-chip-icon-color, var(--text-primary-color)); } .mdc-chip.outlined .mdc-chip__icon.mdc-chip__icon--leading { margin-left: -13px !important; + color: var(--ha-chip-icon-color, var(--text-primary-color)); } .mdc-chip__icon.mdc-chip__icon--trailing, @@ -125,7 +127,7 @@ export class HaChip extends LitElement { height: 18px; font-size: 18px; padding: 2px; - color: var(--ha-chip-text-color, var(--text-primary-color)); + color: var(--ha-chip-icon-color); margin-right: -8px; display: inline-flex; align-items: center; diff --git a/src/components/ha-target-picker.ts b/src/components/ha-target-picker.ts index 4edf45230d..21d8a85d8d 100644 --- a/src/components/ha-target-picker.ts +++ b/src/components/ha-target-picker.ts @@ -1,5 +1,3 @@ -// @ts-ignore -import chipStyles from "@material/chips/dist/mdc.chips.min.css"; import "@material/mwc-button/mwc-button"; import { mdiClose, @@ -14,13 +12,13 @@ import { HassServiceTarget, UnsubscribeFunc, } 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 { classMap } from "lit/directives/class-map"; import { fireEvent } from "../common/dom/fire_event"; import { ensureArray } from "../common/ensure-array"; import { computeDomain } from "../common/entity/compute_domain"; import { computeStateName } from "../common/entity/compute_state_name"; +import { stateIconPath } from "../common/entity/state_icon_path"; import { AreaRegistryEntry, subscribeAreaRegistry, @@ -41,6 +39,7 @@ import type { HaDevicePickerDeviceFilterFunc } from "./device/ha-device-picker"; import "./entity/ha-entity-picker"; import type { HaEntityPickerEntityFilterFunc } from "./entity/ha-entity-picker"; import "./ha-area-picker"; +import "./ha-chip-set"; import "./ha-icon-button"; import "./ha-svg-icon"; @@ -114,7 +113,7 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { if (!this._areas || !this._devices || !this._entities) { return html``; } - return html`
+ return html` ${this.value?.area_id ? ensureArray(this.value.area_id).map((area_id) => { const area = this._areas![area_id]; @@ -150,70 +149,39 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { ); }) : ""} -
+ ${this._renderPicker()} -
-
+ -
- - - - ${this.hass.localize( - "ui.components.target-picker.add_area_id" - )} - - -
-
+ -
- - - - ${this.hass.localize( - "ui.components.target-picker.add_device_id" - )} - - -
-
+ -
- - - - ${this.hass.localize( - "ui.components.target-picker.add_entity_id" - )} - - -
-
`; + .leadingIcon=${mdiPlus} + .label=${this.hass.localize( + "ui.components.target-picker.add_entity_id" + )} + > + `; } private async _showPicker(ev) { @@ -233,69 +201,59 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { iconPath?: string ) { return html` -
- ${iconPath - ? html`` - : ""} - ${entityState - ? html`` - : ""} - - - ${name} +
+ ${type === "entity_id" + ? "" + : html` + + + ${this.hass.localize( + `ui.components.target-picker.expand_${type}` + )} + + `} + + + ${this.hass.localize( + `ui.components.target-picker.remove_${type}` + )} - - ${type === "entity_id" - ? "" - : html` - - ${this.hass.localize( - `ui.components.target-picker.expand_${type}` - )} - `} - - - ${this.hass.localize( - `ui.components.target-picker.remove_${type}` - )} - -
+
+ `; } @@ -528,84 +486,39 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) { static get styles(): CSSResultGroup { 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 { margin-right: 0; } - .mdc-chip.area_id:not(.add) { - border: 2px solid #fed6a4; - background: var(--card-background-color); + ha-chip { + --ha-chip-icon-color: var(--secondary-text-color); + --ha-chip-text-color: var(--primary-text-color); } - .mdc-chip.area_id:not(.add) .mdc-chip__icon--leading, - .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 { + ha-chip:hover { 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 { min-width: 200px; } - :host([disabled]) .mdc-chip { - opacity: var(--light-disabled-opacity); - pointer-events: none; - } `; } }