Merge pull request #4668 from home-assistant/zone-fixes

Zone ui fixes

src/components/map/ha-location-editor.ts

@@ -237,6 +237,9 @@ class LocationEditor extends LitElement {
       #map {
         height: 100%;
       }
+      .light {
+        color: #000000;
+      }
       .leaflet-edit-move {
         border-radius: 50%;
         cursor: move !important;

src/components/map/ha-locations-editor.ts

@@ -280,6 +280,9 @@ export class HaLocationsEditor extends LitElement {
       #map {
         height: 100%;
       }
+      .light {
+        color: #000000;
+      }
       .leaflet-marker-draggable {
         cursor: move !important;
       }

src/panels/config/ha-panel-config.ts

@@ -84,7 +84,6 @@ export const configSections: { [name: string]: PageNavigation[] } = {
       path: "/config/zone",
       translationKey: "ui.panel.config.zone.caption",
       icon: "hass:map-marker-radius",
-      core: true,
     },
     {
       component: "users",

src/panels/config/zone/dialog-zone-detail.ts

@@ -49,7 +49,7 @@ class DialogZoneDetail extends LitElement {
         500
       );
       this._name = "";
-      this._icon = "";
+      this._icon = "mdi:map-marker";
       this._latitude = movedHomeLocation[0];
       this._longitude = movedHomeLocation[1];
       this._passive = false;
@@ -75,6 +75,15 @@ class DialogZoneDetail extends LitElement {
         style="position: absolute; right: 16px; top: 12px;"
       ></paper-icon-button>
     `;
+    const nameValid = this._name.trim() === "";
+    const iconValid = !this._icon.trim().includes(":");
+    const latValid = String(this._latitude) === "";
+    const lngValid = String(this._longitude) === "";
+    const radiusValid = String(this._radius) === "";
+
+    const valid =
+      !nameValid && !iconValid && !latValid && !lngValid && !radiusValid;
+
     return html`
       <ha-dialog
         open
@@ -100,7 +109,7 @@ class DialogZoneDetail extends LitElement {
               .errorMessage="${this.hass!.localize(
                 "ui.panel.config.zone.detail.required_error_msg"
               )}"
-              .invalid=${this._name.trim() === ""}
+              .invalid=${nameValid}
             ></paper-input>
             <paper-input
               .value=${this._icon}
@@ -112,7 +121,7 @@ class DialogZoneDetail extends LitElement {
               .errorMessage="${this.hass!.localize(
                 "ui.panel.config.zone.detail.icon_error_msg"
               )}"
-              .invalid=${!this._icon.trim().includes(":")}
+              .invalid=${iconValid}
             ></paper-input>
             <ha-location-editor
               class="flex"
@@ -132,7 +141,7 @@ class DialogZoneDetail extends LitElement {
                 .errorMessage="${this.hass!.localize(
                   "ui.panel.config.zone.detail.required_error_msg"
                 )}"
-                .invalid=${String(this._latitude) === ""}
+                .invalid=${latValid}
               ></paper-input>
               <paper-input
                 .value=${this._longitude}
@@ -144,7 +153,7 @@ class DialogZoneDetail extends LitElement {
                 .errorMessage="${this.hass!.localize(
                   "ui.panel.config.zone.detail.required_error_msg"
                 )}"
-                .invalid=${String(this._longitude) === ""}
+                .invalid=${lngValid}
               ></paper-input>
             </div>
             <paper-input
@@ -157,7 +166,7 @@ class DialogZoneDetail extends LitElement {
               .errorMessage="${this.hass!.localize(
                 "ui.panel.config.zone.detail.required_error_msg"
               )}"
-              .invalid=${String(this._radius) === ""}
+              .invalid=${radiusValid}
             ></paper-input>
             <p>
               ${this.hass!.localize("ui.panel.config.zone.detail.passive_note")}
@@ -184,7 +193,7 @@ class DialogZoneDetail extends LitElement {
         <mwc-button
           slot="primaryAction"
           @click="${this._updateEntry}"
-          .disabled=${this._submitting}
+          .disabled=${!valid || this._submitting}
         >
           ${this._params.entry
             ? this.hass!.localize("ui.panel.config.zone.detail.update")
@@ -277,6 +286,7 @@ class DialogZoneDetail extends LitElement {
         }
         .form {
           padding-bottom: 24px;
+          color: var(--primary-text-color);
         }
         .location {
           display: flex;

src/panels/config/zone/ha-config-zone.ts

@@ -210,8 +210,10 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
                   @radius-updated=${this._radiusUpdated}
                   @marker-clicked=${this._markerClicked}
                 ></ha-locations-editor>
+                <div class="overflow">
                   ${listBox}
                 </div>
+              </div>
             `
           : ""}
       </hass-tabs-subpage>
@@ -422,6 +424,10 @@ ${this.hass!.localize("ui.panel.config.zone.confirm_delete2")}`)
         display: flex;
         height: 100%;
       }
+      .overflow {
+        height: 100%;
+        overflow: auto;
+      }
       ha-locations-editor {
         flex-grow: 1;
         height: 100%;
@@ -435,8 +441,10 @@ ${this.hass!.localize("ui.panel.config.zone.confirm_delete2")}`)
         padding-top: 4px;
         padding-bottom: 4px;
       }
+      .overflow paper-icon-item:last-child {
+        margin-bottom: 80px;
+      }
       paper-icon-item.iron-selected:before {
-        border-radius: 4px;
         position: absolute;
         top: 0;
         right: 0;
@@ -449,6 +457,9 @@ ${this.hass!.localize("ui.panel.config.zone.confirm_delete2")}`)
         transition: opacity 15ms linear;
         will-change: opacity;
       }
+      ha-card {
+        margin-bottom: 100px;
+      }
       ha-card paper-item {
         cursor: pointer;
       }