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

61
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 "./ha-area-picker";
import "./ha-icon-button";
import "./ha-svg-icon";
import "./ha-input-helper-text";
import "./ha-svg-icon";
@customElement("ha-target-picker")
export class HaTargetPicker extends SubscribeMixin(LitElement) {
@ -119,15 +119,26 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
if (!this._areas || !this._devices || !this._entities) {
return html``;
}
return html`<div class=${this.horizontal ? "horizontal-container" : ""}>
${this.horizontal ? this._renderChips() : this._renderItems()}
${this._renderPicker()}
${this.horizontal ? this._renderItems() : this._renderChips()}
</div>`;
return html`
${this.horizontal
? html`
<div class="horizontal-container">
${this._renderChips()} ${this._renderPicker()}
</div>
${this._renderItems()}
`
: html`
<div>
${this._renderItems()} ${this._renderPicker()}
${this._renderChips()}
</div>
`}
`;
}
private _renderItems() {
return html`<div class="mdc-chip-set items">
return html`
<div class="mdc-chip-set items">
${this.value?.area_id
? ensureArray(this.value.area_id).map((area_id) => {
const area = this._areas![area_id];
@ -163,11 +174,13 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
);
})
: ""}
</div>`;
</div>
`;
}
private _renderChips() {
return html`<div class="mdc-chip-set">
return html`
<div class="mdc-chip-set">
<div
class="mdc-chip area_id add"
.type=${"area_id"}
@ -231,7 +244,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
</div>
${this.helper
? html`<ha-input-helper-text>${this.helper}</ha-input-helper-text>`
: ""} `;
: ""}
`;
}
private async _showPicker(ev) {
@ -320,7 +334,8 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
private _renderPicker() {
switch (this._addMode) {
case "area_id":
return html`<ha-area-picker
return html`
<ha-area-picker
.hass=${this.hass}
id="input"
.type=${"area_id"}
@ -332,11 +347,12 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
.entityFilter=${this.entityRegFilter}
.includeDeviceClasses=${this.includeDeviceClasses}
.includeDomains=${this.includeDomains}
class=${this.horizontal ? "hidden-picker" : ""}
@value-changed=${this._targetPicked}
></ha-area-picker>`;
></ha-area-picker>
`;
case "device_id":
return html`<ha-device-picker
return html`
<ha-device-picker
.hass=${this.hass}
id="input"
.type=${"device_id"}
@ -347,11 +363,12 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
.entityFilter=${this.entityRegFilter}
.includeDeviceClasses=${this.includeDeviceClasses}
.includeDomains=${this.includeDomains}
class=${this.horizontal ? "hidden-picker" : ""}
@value-changed=${this._targetPicked}
></ha-device-picker>`;
></ha-device-picker>
`;
case "entity_id":
return html`<ha-entity-picker
return html`
<ha-entity-picker
.hass=${this.hass}
id="input"
.type=${"entity_id"}
@ -361,10 +378,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
.entityFilter=${this.entityFilter}
.includeDeviceClasses=${this.includeDeviceClasses}
.includeDomains=${this.includeDomains}
class=${this.horizontal ? "hidden-picker" : ""}
@value-changed=${this._targetPicked}
allow-custom-entity
></ha-entity-picker>`;
></ha-entity-picker>
`;
}
return html``;
}
@ -553,12 +570,6 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
static get styles(): CSSResultGroup {
return css`
${unsafeCSS(chipStyles)}
.hidden-picker {
height: 0px;
display: inline-block;
overflow: hidden;
position: absolute;
}
.horizontal-container {
display: flex;
flex-wrap: wrap;