From 6516597c933c02a361d567289ae61136cf6bb4d4 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 15 Apr 2024 20:20:14 +0200 Subject: [PATCH] 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> --- .../config/core/ha-config-section-general.ts | 66 +++---------- src/panels/config/zone/ha-config-zone.ts | 98 ++++++++++++------- 2 files changed, 80 insertions(+), 84 deletions(-) diff --git a/src/panels/config/core/ha-config-section-general.ts b/src/panels/config/core/ha-config-section-general.ts index 438ff479b2..3ccadf595d 100644 --- a/src/panels/config/core/ha-config-section-general.ts +++ b/src/panels/config/core/ha-config-section-general.ts @@ -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 { > - ${this.narrow - ? html` - - ` - : html` - -
- ${this.hass.localize( - "ui.panel.config.core.section.core.core_config.edit_location" - )} -
-
- ${this.hass.localize( - "ui.panel.config.core.section.core.core_config.edit_location_description" - )} -
- ${this.hass.localize("ui.common.edit")} - - `} + + +
+ ${this.hass.localize( + "ui.panel.config.core.section.core.core_config.edit_location" + )} +
+
+ ${this.hass.localize( + "ui.panel.config.core.section.core.core_config.edit_location_description" + )} +
+ ${this.hass.localize("ui.common.edit")} +
${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"); } diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts index 11af8b8474..8e8b4c2414 100644 --- a/src/panels/config/zone/ha-config-zone.ts +++ b/src/panels/config/zone/ha-config-zone.ts @@ -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` html` - - ${stateObject.entity_id !== "zone.home" - ? html` - - ${hass.localize( - "ui.panel.config.zone.configured_in_yaml" - )} - - ` - : ""} -
+ ${this.narrow && + stateObject.entity_id === "zone.home" && + !this._canEditCore + ? nothing + : html`
+ + ${stateObject.entity_id !== "zone.home" + ? html` + + ${hass.localize( + "ui.panel.config.zone.configured_in_yaml" + )} + + ` + : ""} +
`} ` )} @@ -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);