Fix zones on mobile, align mobile and non mobile view (#20525)
* Fix zones on mobile, align mobile and non mobile view * Fix CI --------- Co-authored-by: Simon Lamon <32477463+silamon@users.noreply.github.com>
This commit is contained in:
Bram Kragten
GitHub
parent
1df9c38a8c
commit
6516597c93
|
|
@ -1,7 +1,6 @@
|
|||
import "@material/mwc-list/mwc-list-item";
|
||||
import { css, html, LitElement, TemplateResult } from "lit";
|
||||
import { customElement, property, state } from "lit/decorators";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { UNIT_C } from "../../../common/const";
|
||||
import { stopPropagation } from "../../../common/dom/stop_propagation";
|
||||
import { navigate } from "../../../common/navigate";
|
||||
|
|
@ -18,8 +17,6 @@ import "../../../components/ha-language-picker";
|
|||
import "../../../components/ha-radio";
|
||||
import type { HaRadio } from "../../../components/ha-radio";
|
||||
import "../../../components/ha-select";
|
||||
import "../../../components/ha-selector/ha-selector-location";
|
||||
import type { LocationSelectorValue } from "../../../data/selector";
|
||||
import "../../../components/ha-settings-row";
|
||||
import "../../../components/ha-textfield";
|
||||
import type { HaTextField } from "../../../components/ha-textfield";
|
||||
|
|
@ -30,8 +27,6 @@ import "../../../layouts/hass-subpage";
|
|||
import { haStyle } from "../../../resources/styles";
|
||||
import type { HomeAssistant, ValueChangedEvent } from "../../../types";
|
||||
|
||||
const LOCATION_SELECTOR = { location: {} };
|
||||
|
||||
@customElement("ha-config-section-general")
|
||||
class HaConfigSectionGeneral extends LitElement {
|
||||
@property({ attribute: false }) public hass!: HomeAssistant;
|
||||
|
|
@ -244,36 +239,22 @@ class HaConfigSectionGeneral extends LitElement {
|
|||
>
|
||||
</ha-language-picker>
|
||||
</div>
|
||||
${this.narrow
|
||||
? html`
|
||||
<ha-selector-location
|
||||
.hass=${this.hass}
|
||||
.selector=${LOCATION_SELECTOR}
|
||||
.value=${this._selectorLocation(
|
||||
this.hass.config.latitude,
|
||||
this.hass.config.longitude,
|
||||
this._location
|
||||
)}
|
||||
@value-changed=${this._locationChanged}
|
||||
></ha-selector-location>
|
||||
`
|
||||
: html`
|
||||
<ha-settings-row>
|
||||
<div slot="heading">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.core.section.core.core_config.edit_location"
|
||||
)}
|
||||
</div>
|
||||
<div slot="description" class="secondary">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.core.section.core.core_config.edit_location_description"
|
||||
)}
|
||||
</div>
|
||||
<mwc-button @click=${this._editLocation}
|
||||
>${this.hass.localize("ui.common.edit")}</mwc-button
|
||||
>
|
||||
</ha-settings-row>
|
||||
`}
|
||||
|
||||
<ha-settings-row>
|
||||
<div slot="heading">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.core.section.core.core_config.edit_location"
|
||||
)}
|
||||
</div>
|
||||
<div slot="description" class="secondary">
|
||||
${this.hass.localize(
|
||||
"ui.panel.config.core.section.core.core_config.edit_location_description"
|
||||
)}
|
||||
</div>
|
||||
<mwc-button @click=${this._editLocation}
|
||||
>${this.hass.localize("ui.common.edit")}</mwc-button
|
||||
>
|
||||
</ha-settings-row>
|
||||
<div class="card-actions">
|
||||
<ha-progress-button @click=${this._updateEntry}>
|
||||
${this.hass!.localize("ui.panel.config.zone.detail.update")}
|
||||
|
|
@ -322,10 +303,6 @@ class HaConfigSectionGeneral extends LitElement {
|
|||
this._updateUnits = (ev.target as HaCheckbox).checked;
|
||||
}
|
||||
|
||||
private _locationChanged(ev: CustomEvent) {
|
||||
this._location = [ev.detail.value.latitude, ev.detail.value.longitude];
|
||||
}
|
||||
|
||||
private async _updateEntry(ev: CustomEvent) {
|
||||
const button = ev.target as HaProgressButton;
|
||||
if (button.progress) {
|
||||
|
|
@ -384,17 +361,6 @@ class HaConfigSectionGeneral extends LitElement {
|
|||
}
|
||||
}
|
||||
|
||||
private _selectorLocation = memoizeOne(
|
||||
(
|
||||
latDefault: number,
|
||||
lngDefault: number,
|
||||
location?: [number, number]
|
||||
): LocationSelectorValue => ({
|
||||
latitude: location != null ? location[0] : latDefault,
|
||||
longitude: location != null ? location[1] : lngDefault,
|
||||
})
|
||||
);
|
||||
|
||||
private _editLocation() {
|
||||
navigate("/config/zone/edit/zone.home");
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,23 +1,26 @@
|
|||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
||||
import "@material/mwc-list/mwc-list";
|
||||
import { mdiPencil, mdiPencilOff, mdiPlus } from "@mdi/js";
|
||||
import "@lrnwebcomponents/simple-tooltip/simple-tooltip";
|
||||
import { HassEntity, UnsubscribeFunc } from "home-assistant-js-websocket";
|
||||
import {
|
||||
css,
|
||||
CSSResultGroup,
|
||||
html,
|
||||
LitElement,
|
||||
PropertyValues,
|
||||
TemplateResult,
|
||||
css,
|
||||
html,
|
||||
nothing,
|
||||
} from "lit";
|
||||
import { customElement, property, query, state } from "lit/decorators";
|
||||
import memoizeOne from "memoize-one";
|
||||
import { computeStateDomain } from "../../../common/entity/compute_state_domain";
|
||||
import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
|
||||
import { navigate } from "../../../common/navigate";
|
||||
import { stringCompare } from "../../../common/string/compare";
|
||||
import "../../../components/ha-card";
|
||||
import "../../../components/ha-fab";
|
||||
import "../../../components/ha-icon-button";
|
||||
import "../../../components/ha-list-item";
|
||||
import "../../../components/ha-svg-icon";
|
||||
import "../../../components/map/ha-locations-editor";
|
||||
import type {
|
||||
|
|
@ -27,13 +30,13 @@ import type {
|
|||
import { saveCoreConfig } from "../../../data/core";
|
||||
import { subscribeEntityRegistry } from "../../../data/entity_registry";
|
||||
import {
|
||||
HomeZoneMutableParams,
|
||||
Zone,
|
||||
ZoneMutableParams,
|
||||
createZone,
|
||||
deleteZone,
|
||||
fetchZones,
|
||||
updateZone,
|
||||
Zone,
|
||||
ZoneMutableParams,
|
||||
HomeZoneMutableParams,
|
||||
} from "../../../data/zone";
|
||||
import {
|
||||
showAlertDialog,
|
||||
|
|
@ -45,10 +48,8 @@ import { SubscribeMixin } from "../../../mixins/subscribe-mixin";
|
|||
import type { HomeAssistant, Route } from "../../../types";
|
||||
import "../ha-config-section";
|
||||
import { configSections } from "../ha-panel-config";
|
||||
import { showZoneDetailDialog } from "./show-dialog-zone-detail";
|
||||
import "../../../components/ha-list-item";
|
||||
import { shouldHandleRequestSelectedEvent } from "../../../common/mwc/handle-request-selected-event";
|
||||
import { showHomeZoneDetailDialog } from "./show-dialog-home-zone-detail";
|
||||
import { showZoneDetailDialog } from "./show-dialog-zone-detail";
|
||||
|
||||
@customElement("ha-config-zone")
|
||||
export class HaConfigZone extends SubscribeMixin(LitElement) {
|
||||
|
|
@ -150,6 +151,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
|||
(entry) => html`
|
||||
<ha-list-item
|
||||
.entry=${entry}
|
||||
.id=${this.narrow ? entry.id : ""}
|
||||
graphic="icon"
|
||||
.hasMeta=${!this.narrow}
|
||||
@request-selected=${this._itemClicked}
|
||||
|
|
@ -162,6 +164,7 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
|||
? html`
|
||||
<div slot="meta">
|
||||
<ha-icon-button
|
||||
.id=${entry.id}
|
||||
.entry=${entry}
|
||||
@click=${this._openEditEntry}
|
||||
.path=${mdiPencil}
|
||||
|
|
@ -179,10 +182,14 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
|||
(stateObject) => html`
|
||||
<ha-list-item
|
||||
graphic="icon"
|
||||
hasMeta
|
||||
.id=${this.narrow ? stateObject.entity_id : ""}
|
||||
.hasMeta=${!this.narrow ||
|
||||
stateObject.entity_id !== "zone.home"}
|
||||
.value=${stateObject.entity_id}
|
||||
@request-selected=${this._stateItemClicked}
|
||||
?selected=${this._activeEntry === stateObject.entity_id}
|
||||
.noEdit=${stateObject.entity_id !== "zone.home" ||
|
||||
!this._canEditCore}
|
||||
>
|
||||
<ha-icon
|
||||
.icon=${stateObject.attributes.icon}
|
||||
|
|
@ -192,30 +199,38 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
|||
|
||||
${stateObject.attributes.friendly_name ||
|
||||
stateObject.entity_id}
|
||||
<div slot="meta">
|
||||
<ha-icon-button
|
||||
.entityId=${stateObject.entity_id}
|
||||
.noEdit=${stateObject.entity_id !== "zone.home" ||
|
||||
!this._canEditCore}
|
||||
.path=${stateObject.entity_id === "zone.home" &&
|
||||
this._canEditCore
|
||||
? mdiPencil
|
||||
: mdiPencilOff}
|
||||
.label=${stateObject.entity_id === "zone.home"
|
||||
? hass.localize("ui.panel.config.zone.edit_home")
|
||||
: hass.localize("ui.panel.config.zone.edit_zone")}
|
||||
@click=${this._editHomeZone}
|
||||
></ha-icon-button>
|
||||
${stateObject.entity_id !== "zone.home"
|
||||
? html`
|
||||
<simple-tooltip animation-delay="0" position="left">
|
||||
${hass.localize(
|
||||
"ui.panel.config.zone.configured_in_yaml"
|
||||
)}
|
||||
</simple-tooltip>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
${this.narrow &&
|
||||
stateObject.entity_id === "zone.home" &&
|
||||
!this._canEditCore
|
||||
? nothing
|
||||
: html`<div slot="meta">
|
||||
<ha-icon-button
|
||||
.id=${!this.narrow ? stateObject.entity_id : ""}
|
||||
.entityId=${stateObject.entity_id}
|
||||
.noEdit=${stateObject.entity_id !== "zone.home" ||
|
||||
!this._canEditCore}
|
||||
.path=${stateObject.entity_id === "zone.home" &&
|
||||
this._canEditCore
|
||||
? mdiPencil
|
||||
: mdiPencilOff}
|
||||
.label=${stateObject.entity_id === "zone.home"
|
||||
? hass.localize("ui.panel.config.zone.edit_home")
|
||||
: hass.localize("ui.panel.config.zone.edit_zone")}
|
||||
@click=${this._editHomeZone}
|
||||
></ha-icon-button>
|
||||
${stateObject.entity_id !== "zone.home"
|
||||
? html`
|
||||
<simple-tooltip
|
||||
animation-delay="0"
|
||||
position="left"
|
||||
>
|
||||
${hass.localize(
|
||||
"ui.panel.config.zone.configured_in_yaml"
|
||||
)}
|
||||
</simple-tooltip>
|
||||
`
|
||||
: ""}
|
||||
</div>`}
|
||||
</ha-list-item>
|
||||
`
|
||||
)}
|
||||
|
|
@ -292,7 +307,11 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
|||
return;
|
||||
}
|
||||
const id = this.route.path.slice(6);
|
||||
this._editZone(id);
|
||||
navigate("/config/zone", { replace: true });
|
||||
if (this.narrow) {
|
||||
return;
|
||||
}
|
||||
this._zoomZone(id);
|
||||
}
|
||||
|
||||
|
|
@ -401,6 +420,12 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
|||
}
|
||||
|
||||
const entryId: string = (ev.currentTarget! as any).value;
|
||||
|
||||
if (this.narrow && entryId === "zone.home") {
|
||||
this._editHomeZone(ev);
|
||||
return;
|
||||
}
|
||||
|
||||
this._zoomZone(entryId);
|
||||
this._activeEntry = entryId;
|
||||
}
|
||||
|
|
@ -409,6 +434,11 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
|
|||
this._map?.fitMarker(id);
|
||||
}
|
||||
|
||||
private async _editZone(id: string) {
|
||||
await this.updateComplete;
|
||||
(this.shadowRoot?.querySelector(`[id="${id}"]`) as HTMLElement)?.click();
|
||||
}
|
||||
|
||||
private _openEditEntry(ev: Event) {
|
||||
const entry: Zone = (ev.currentTarget! as any).entry;
|
||||
this._openDialog(entry);
|
||||
|
|
|
|||
Loading…
Reference in New Issue