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>

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 {
               >
               </ha-language-picker>
             </div>
-            ${this.narrow
+
-              ? html`
+            <ha-settings-row>
-                  <ha-selector-location
+              <div slot="heading">
-                    .hass=${this.hass}
+                ${this.hass.localize(
-                    .selector=${LOCATION_SELECTOR}
+                  "ui.panel.config.core.section.core.core_config.edit_location"
-                    .value=${this._selectorLocation(
+                )}
-                      this.hass.config.latitude,
+              </div>
-                      this.hass.config.longitude,
+              <div slot="description" class="secondary">
-                      this._location
+                ${this.hass.localize(
-                    )}
+                  "ui.panel.config.core.section.core.core_config.edit_location_description"
-                    @value-changed=${this._locationChanged}
+                )}
-                  ></ha-selector-location>
+              </div>
-                `
+              <mwc-button @click=${this._editLocation}
-              : html`
+                >${this.hass.localize("ui.common.edit")}</mwc-button
-                  <ha-settings-row>
+              >
-                    <div slot="heading">
+            </ha-settings-row>
-                      ${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");
   }

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`
                   <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">
+                    ${this.narrow &&
-                      <ha-icon-button
+                    stateObject.entity_id === "zone.home" &&
-                        .entityId=${stateObject.entity_id}
+                    !this._canEditCore
-                        .noEdit=${stateObject.entity_id !== "zone.home" ||
+                      ? nothing
-                        !this._canEditCore}
+                      : html`<div slot="meta">
-                        .path=${stateObject.entity_id === "zone.home" &&
+                          <ha-icon-button
-                        this._canEditCore
+                            .id=${!this.narrow ? stateObject.entity_id : ""}
-                          ? mdiPencil
+                            .entityId=${stateObject.entity_id}
-                          : mdiPencilOff}
+                            .noEdit=${stateObject.entity_id !== "zone.home" ||
-                        .label=${stateObject.entity_id === "zone.home"
+                            !this._canEditCore}
-                          ? hass.localize("ui.panel.config.zone.edit_home")
+                            .path=${stateObject.entity_id === "zone.home" &&
-                          : hass.localize("ui.panel.config.zone.edit_zone")}
+                            this._canEditCore
-                        @click=${this._editHomeZone}
+                              ? mdiPencil
-                      ></ha-icon-button>
+                              : mdiPencilOff}
-                      ${stateObject.entity_id !== "zone.home"
+                            .label=${stateObject.entity_id === "zone.home"
-                        ? html`
+                              ? hass.localize("ui.panel.config.zone.edit_home")
-                            <simple-tooltip animation-delay="0" position="left">
+                              : hass.localize("ui.panel.config.zone.edit_zone")}
-                              ${hass.localize(
+                            @click=${this._editHomeZone}
-                                "ui.panel.config.zone.configured_in_yaml"
+                          ></ha-icon-button>
-                              )}
+                          ${stateObject.entity_id !== "zone.home"
-                            </simple-tooltip>
+                            ? html`
-                          `
+                                <simple-tooltip
-                        : ""}
+                                  animation-delay="0"
-                    </div>
+                                  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);