jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-03 06:27:47 +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 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,15 +119,26 @@ 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`
<div class="mdc-chip-set items">
${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];
@ -163,11 +174,13 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
); );
}) })
: ""} : ""}
</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,7 +334,8 @@ 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`
<ha-area-picker
.hass=${this.hass} .hass=${this.hass}
id="input" id="input"
.type=${"area_id"} .type=${"area_id"}
@ -332,11 +347,12 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
.entityFilter=${this.entityRegFilter} .entityFilter=${this.entityRegFilter}
.includeDeviceClasses=${this.includeDeviceClasses} .includeDeviceClasses=${this.includeDeviceClasses}
.includeDomains=${this.includeDomains} .includeDomains=${this.includeDomains}
class=${this.horizontal ? "hidden-picker" : ""}
@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`
<ha-device-picker
.hass=${this.hass} .hass=${this.hass}
id="input" id="input"
.type=${"device_id"} .type=${"device_id"}
@ -347,11 +363,12 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
.entityFilter=${this.entityRegFilter} .entityFilter=${this.entityRegFilter}
.includeDeviceClasses=${this.includeDeviceClasses} .includeDeviceClasses=${this.includeDeviceClasses}
.includeDomains=${this.includeDomains} .includeDomains=${this.includeDomains}
class=${this.horizontal ? "hidden-picker" : ""}
@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`
<ha-entity-picker
.hass=${this.hass} .hass=${this.hass}
id="input" id="input"
.type=${"entity_id"} .type=${"entity_id"}
@ -361,10 +378,10 @@ export class HaTargetPicker extends SubscribeMixin(LitElement) {
.entityFilter=${this.entityFilter} .entityFilter=${this.entityFilter}
.includeDeviceClasses=${this.includeDeviceClasses} .includeDeviceClasses=${this.includeDeviceClasses}
.includeDomains=${this.includeDomains} .includeDomains=${this.includeDomains}
class=${this.horizontal ? "hidden-picker" : ""}
@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;