Fix passive color radius and fix switch label clicks (#4703)

* Fix passive color radius and fix switch label clicks

* Colors vars

src/components/ha-switch.ts

@@ -1,10 +1,18 @@
-import { customElement, CSSResult, css, query, property } from "lit-element";
+import {
+  customElement,
+  CSSResult,
+  css,
+  query,
+  html,
+  property,
+} from "lit-element";
 import "@material/mwc-switch";
 import { style } from "@material/mwc-switch/mwc-switch-css";
 // tslint:disable-next-line
 import { Switch } from "@material/mwc-switch";
 import { Constructor } from "../types";
 import { forwardHaptic } from "../data/haptics";
+import { ripple } from "@material/mwc-ripple/ripple-directive";
 // tslint:disable-next-line
 const MwcSwitch = customElements.get("mwc-switch") as Constructor<Switch>;
 
@@ -26,7 +34,6 @@ export class HaSwitch extends MwcSwitch {
       "slotted",
       Boolean(this._slot.assignedNodes().length)
     );
-    this._slot.addEventListener("click", () => (this.checked = !this.checked));
     this.addEventListener("change", () => {
       if (this.haptic) {
         forwardHaptic("light");
@@ -34,6 +41,31 @@ export class HaSwitch extends MwcSwitch {
     });
   }
 
+  protected render() {
+    return html`
+      <div class="mdc-switch">
+        <div class="mdc-switch__track"></div>
+        <div
+          class="mdc-switch__thumb-underlay"
+          .ripple="${ripple({
+            interactionNode: this,
+          })}"
+        >
+          <div class="mdc-switch__thumb">
+            <input
+              type="checkbox"
+              id="basic-switch"
+              class="mdc-switch__native-control"
+              role="switch"
+              @change="${this._haChangeHandler}"
+            />
+          </div>
+        </div>
+      </div>
+      <label for="basic-switch"><slot></slot></label>
+    `;
+  }
+
   protected static get styles(): CSSResult[] {
     return [
       style,
@@ -65,6 +97,12 @@ export class HaSwitch extends MwcSwitch {
       `,
     ];
   }
+
+  private _haChangeHandler(e: Event) {
+    this.mdcFoundation.handleChange(e);
+    // catch "click" event and sync properties
+    this.checked = this.formElement.checked;
+  }
 }
 
 declare global {

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

@@ -23,11 +23,13 @@ import {
 } from "../../common/dom/setup-leaflet-map";
 import { fireEvent } from "../../common/dom/fire_event";
 import { nextRender } from "../../common/util/render-status";
+import { defaultRadiusColor } from "../../data/zone";
 
 @customElement("ha-location-editor")
 class LocationEditor extends LitElement {
   @property() public location?: [number, number];
   @property() public radius?: number;
+  @property() public radiusColor?: string;
   @property() public icon?: string;
   public fitZoom = 16;
   private _iconEl?: DivIcon;
@@ -83,6 +85,9 @@ class LocationEditor extends LitElement {
     if (changedProps.has("radius")) {
       this._updateRadius();
     }
+    if (changedProps.has("radiusColor")) {
+      this._updateRadiusColor();
+    }
     if (changedProps.has("icon")) {
       this._updateIcon();
     }
@@ -213,7 +218,7 @@ class LocationEditor extends LitElement {
       this._leafletMap!.addLayer(this._locationMarker);
     } else {
       this._locationMarker = this.Leaflet!.circle(this.location, {
-        color: "#FF9800",
+        color: this.radiusColor || defaultRadiusColor,
         radius: this.radius,
       });
       this._leafletMap!.addLayer(this._locationMarker);
@@ -228,6 +233,13 @@ class LocationEditor extends LitElement {
     (this._locationMarker as Circle).setRadius(this.radius);
   }
 
+  private _updateRadiusColor(): void {
+    if (!this._locationMarker || !this.radius) {
+      return;
+    }
+    (this._locationMarker as Circle).setStyle({ color: this.radiusColor });
+  }
+
   static get styles(): CSSResult {
     return css`
       :host {

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

@@ -22,6 +22,7 @@ import {
   LeafletModuleType,
 } from "../../common/dom/setup-leaflet-map";
 import { fireEvent } from "../../common/dom/fire_event";
+import { defaultRadiusColor } from "../../data/zone";
 
 declare global {
   // for fire event
@@ -202,7 +203,7 @@ export class HaLocationsEditor extends LitElement {
         const circle = this.Leaflet!.circle(
           [location.latitude, location.longitude],
           {
-            color: location.radius_color ? location.radius_color : "#FF9800",
+            color: location.radius_color || defaultRadiusColor,
             radius: location.radius,
           }
         );

src/data/zone.ts

@@ -1,5 +1,9 @@
 import { HomeAssistant } from "../types";
 
+export const defaultRadiusColor = "#FF9800";
+export const homeRadiusColor: string = "#03a9f4";
+export const passiveRadiusColor: string = "#9b9b9b";
+
 export interface Zone {
   id: string;
   name: string;

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

@@ -16,7 +16,11 @@ import "../../../components/ha-dialog";
 
 import { ZoneDetailDialogParams } from "./show-dialog-zone-detail";
 import { HomeAssistant } from "../../../types";
-import { ZoneMutableParams } from "../../../data/zone";
+import {
+  ZoneMutableParams,
+  passiveRadiusColor,
+  defaultRadiusColor,
+} from "../../../data/zone";
 import { addDistanceToCoord } from "../../../common/location/add_distance_to_coord";
 
 class DialogZoneDetail extends LitElement {
@@ -127,6 +131,9 @@ class DialogZoneDetail extends LitElement {
               class="flex"
               .location=${this._locationValue}
               .radius=${this._radius}
+              .radiusColor=${this._passive
+                ? passiveRadiusColor
+                : defaultRadiusColor}
               .icon=${this._icon}
               @change=${this._locationChanged}
             ></ha-location-editor>

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

@@ -31,6 +31,9 @@ import {
   updateZone,
   deleteZone,
   ZoneMutableParams,
+  homeRadiusColor,
+  passiveRadiusColor,
+  defaultRadiusColor,
 } from "../../../data/zone";
 // tslint:disable-next-line
 import {
@@ -68,17 +71,17 @@ export class HaConfigZone extends SubscribeMixin(LitElement) {
           radius: state.attributes.radius,
           radius_color:
             state.entity_id === "zone.home"
-              ? "#03a9f4"
+              ? homeRadiusColor
               : state.attributes.passive
-              ? "#9b9b9b"
+              ? passiveRadiusColor
-              : "#FF9800",
+              : defaultRadiusColor,
           editable: false,
         };
       });
       const storageLocations: MarkerLocation[] = storageItems.map((zone) => {
         return {
           ...zone,
-          radius_color: zone.passive ? "#9b9b9b" : "#FF9800",
+          radius_color: zone.passive ? passiveRadiusColor : defaultRadiusColor,
           editable: true,
         };
       });

src/panels/map/ha-panel-map.js

@@ -12,6 +12,7 @@ import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import LocalizeMixin from "../../mixins/localize-mixin";
 import { setupLeafletMap } from "../../common/dom/setup-leaflet-map";
+import { defaultRadiusColor } from "../../data/zone";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -175,7 +176,7 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
             [entity.attributes.latitude, entity.attributes.longitude],
             {
               interactive: false,
-              color: "#FF9800",
+              color: defaultRadiusColor,
               radius: entity.attributes.radius,
             }
           ).addTo(map)