From 1dad7c81dab7e29d494ec9e61c0727e3db3f698c Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Tue, 4 Feb 2020 07:32:22 +0100 Subject: [PATCH] Fix passive color radius and fix switch label clicks (#4703) --- src/components/ha-switch.ts | 35 ++++++++++++++++++-- src/components/map/ha-location-editor.ts | 14 +++++++- src/components/map/ha-locations-editor.ts | 3 +- src/data/zone.ts | 4 +++ src/panels/config/zone/dialog-zone-detail.ts | 9 ++++- src/panels/config/zone/ha-config-zone.ts | 11 +++--- src/panels/map/ha-panel-map.js | 3 +- 7 files changed, 69 insertions(+), 10 deletions(-) diff --git a/src/components/ha-switch.ts b/src/components/ha-switch.ts index 9426082439..a33f513bbb 100644 --- a/src/components/ha-switch.ts +++ b/src/components/ha-switch.ts @@ -1,9 +1,10 @@ -import { customElement, CSSResult, css, query } from "lit-element"; +import { customElement, CSSResult, css, query, html } 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 { ripple } from "@material/mwc-ripple/ripple-directive"; // tslint:disable-next-line const MwcSwitch = customElements.get("mwc-switch") as Constructor; @@ -21,7 +22,31 @@ export class HaSwitch extends MwcSwitch { "slotted", Boolean(this._slot.assignedNodes().length) ); - this._slot.addEventListener("click", () => (this.checked = !this.checked)); + } + + protected render() { + return html` +
+
+
+
+ +
+
+
+ + `; } protected static get styles(): CSSResult[] { @@ -55,6 +80,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 { diff --git a/src/components/map/ha-location-editor.ts b/src/components/map/ha-location-editor.ts index a24ceba338..f5ad735329 100644 --- a/src/components/map/ha-location-editor.ts +++ b/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 { diff --git a/src/components/map/ha-locations-editor.ts b/src/components/map/ha-locations-editor.ts index 11de3b91c3..3cb70c0f93 100644 --- a/src/components/map/ha-locations-editor.ts +++ b/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, } ); diff --git a/src/data/zone.ts b/src/data/zone.ts index 1bd97a4351..85464a975b 100644 --- a/src/data/zone.ts +++ b/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; diff --git a/src/panels/config/zone/dialog-zone-detail.ts b/src/panels/config/zone/dialog-zone-detail.ts index 869c1c24ec..850b78133b 100644 --- a/src/panels/config/zone/dialog-zone-detail.ts +++ b/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} > diff --git a/src/panels/config/zone/ha-config-zone.ts b/src/panels/config/zone/ha-config-zone.ts index d35928dced..52a734ab04 100644 --- a/src/panels/config/zone/ha-config-zone.ts +++ b/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" - : "#FF9800", + ? passiveRadiusColor + : 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, }; }); diff --git a/src/panels/map/ha-panel-map.js b/src/panels/map/ha-panel-map.js index 110dffd636..3fbf540354 100644 --- a/src/panels/map/ha-panel-map.js +++ b/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)