jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-02 14:07:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean up horizontal rendering for target picker

Browse Source
This commit is contained in:
Christopher Altona 2022-06-30 02:23:14 +00:00
parent e2f20ecd48
commit 8b007610f9
1 changed files with 105 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
src/components/ha-target-picker.ts
View File

@ -42,8 +42,8 @@ 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-icon-button"; import "./ha-icon-button";
import "./ha-svg-icon";
import "./ha-input-helper-text"; import "./ha-input-helper-text";
import "./ha-svg-icon";
@customElement("ha-target-picker") @customElement("ha-target-picker")
export class HaTargetPicker extends SubscribeMixin(LitElement) { export class HaTargetPicker extends SubscribeMixin(LitElement) {
@ -119,55 +119,68 @@ 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=${this.horizontal ? "horizontal-container" : ""}> return html`
${this.horizontal ? this._renderChips() : this._renderItems()} ${this.horizontal
${this._renderPicker()} ? html`
${this.horizontal ? this._renderItems() : this._renderChips()} <div class="horizontal-container">
</div>`; ${this._renderChips()} ${this._renderPicker()}
</div>
${this._renderItems()}
`
: html`
<div>
${this._renderItems()} ${this._renderPicker()}
${this._renderChips()}
</div>
`}
`;
} }
private _renderItems() { private _renderItems() {
return html`<div class="mdc-chip-set items"> return html`
${this.value?.area_id <div class="mdc-chip-set items">
? ensureArray(this.value.area_id).map((area_id) => { ${this.value?.area_id
const area = this._areas![area_id]; ? ensureArray(this.value.area_id).map((area_id) => {
return this._renderChip( const area = this._areas![area_id];
"area_id", return this._renderChip(
area_id, "area_id",
area?.name || area_id, area_id,
undefined, area?.name || area_id,
mdiSofa undefined,
); mdiSofa
}) );
: ""} })
${this.value?.device_id : ""}
? ensureArray(this.value.device_id).map((device_id) => { ${this.value?.device_id
const device = this._devices![device_id]; ? ensureArray(this.value.device_id).map((device_id) => {
return this._renderChip( const device = this._devices![device_id];
"device_id", return this._renderChip(
device_id, "device_id",
device ? computeDeviceName(device, this.hass) : device_id, device_id,
undefined, device ? computeDeviceName(device, this.hass) : device_id,
mdiDevices undefined,
); mdiDevices
}) );
: ""} })
${this.value?.entity_id : ""}
? ensureArray(this.value.entity_id).map((entity_id) => { ${this.value?.entity_id
const entity = this.hass.states[entity_id]; ? ensureArray(this.value.entity_id).map((entity_id) => {
return this._renderChip( const entity = this.hass.states[entity_id];
"entity_id", return this._renderChip(
entity_id, "entity_id",
entity ? computeStateName(entity) : entity_id, entity_id,
entity entity ? computeStateName(entity) : entity_id,
); entity
}) );
: ""} })
</div>`; : ""}
</div>
`;
} }
private _renderChips() { private _renderChips() {
return html`<div class="mdc-chip-set"> return html`
<div class="mdc-chip-set">
<div <div
class="mdc-chip area_id add" class="mdc-chip area_id add"
.type=${"area_id"} .type=${"area_id"}
@ -231,7 +244,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
</div> </div>
${this.helper ${this.helper
? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>` ? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
: ""} `; : ""}
`;
} }
private async _showPicker(ev) { private async _showPicker(ev) {
@ -320,51 +334,54 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
private _renderPicker() { private _renderPicker() {
switch (this._addMode) { switch (this._addMode) {
case "area_id": case "area_id":
return html`<ha-area-picker return html`
.hass=${this.hass} <ha-area-picker
id="input" .hass=${this.hass}
.type=${"area_id"} id="input"
.label=${this.hass.localize( .type=${"area_id"}
"ui.components.target-picker.add_area_id" .label=${this.hass.localize(
)} "ui.components.target-picker.add_area_id"
no-add )}
.deviceFilter=${this.deviceFilter} no-add
.entityFilter=${this.entityRegFilter} .deviceFilter=${this.deviceFilter}
.includeDeviceClasses=${this.includeDeviceClasses} .entityFilter=${this.entityRegFilter}
.includeDomains=${this.includeDomains} .includeDeviceClasses=${this.includeDeviceClasses}
class=${this.horizontal ? "hidden-picker" : ""} .includeDomains=${this.includeDomains}
@value-changed=${this._targetPicked} @value-changed=${this._targetPicked}
></ha-area-picker>`; ></ha-area-picker>
`;
case "device_id": case "device_id":
return html`<ha-device-picker return html`
.hass=${this.hass} <ha-device-picker
id="input" .hass=${this.hass}
.type=${"device_id"} id="input"
.label=${this.hass.localize( .type=${"device_id"}
"ui.components.target-picker.add_device_id" .label=${this.hass.localize(
)} "ui.components.target-picker.add_device_id"
.deviceFilter=${this.deviceFilter} )}
.entityFilter=${this.entityRegFilter} .deviceFilter=${this.deviceFilter}
.includeDeviceClasses=${this.includeDeviceClasses} .entityFilter=${this.entityRegFilter}
.includeDomains=${this.includeDomains} .includeDeviceClasses=${this.includeDeviceClasses}
class=${this.horizontal ? "hidden-picker" : ""} .includeDomains=${this.includeDomains}
@value-changed=${this._targetPicked} @value-changed=${this._targetPicked}
></ha-device-picker>`; ></ha-device-picker>
`;
case "entity_id": case "entity_id":
return html`<ha-entity-picker return html`
.hass=${this.hass} <ha-entity-picker
id="input" .hass=${this.hass}
.type=${"entity_id"} id="input"
.label=${this.hass.localize( .type=${"entity_id"}
"ui.components.target-picker.add_entity_id" .label=${this.hass.localize(
)} "ui.components.target-picker.add_entity_id"
.entityFilter=${this.entityFilter} )}
.includeDeviceClasses=${this.includeDeviceClasses} .entityFilter=${this.entityFilter}
.includeDomains=${this.includeDomains} .includeDeviceClasses=${this.includeDeviceClasses}
class=${this.horizontal ? "hidden-picker" : ""} .includeDomains=${this.includeDomains}
@value-changed=${this._targetPicked} @value-changed=${this._targetPicked}
allow-custom-entity allow-custom-entity
></ha-entity-picker>`; ></ha-entity-picker>
`;
} }
return html``; return html``;
} }
@ -553,12 +570,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
static get styles(): CSSResultGroup { static get styles(): CSSResultGroup {
return css` return css`
${unsafeCSS(chipStyles)} ${unsafeCSS(chipStyles)}
.hidden-picker {
height: 0px;
display: inline-block;
overflow: hidden;
position: absolute;
}
.horizontal-container { .horizontal-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;