jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-29 04:06:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix for Zone icon visibility on Map panel and Lovelace Map card (#4085)

Browse Source 
* Set icon color to black in ha-panel-map.js

* Changed icon color depending on dark mode in lovelace map card

* Fixed build error by swapping var for let and const

* Replaced hardcoded style with the light and dark classes
This commit is contained in:
springstan 2019-10-21 17:45:40 +02:00 committed by Bram Kragten
parent 5e3cb812ec
commit 540f1d9bce
2 changed files with 31 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/panels/lovelace/cards/hui-map-card.ts
View File

@ -325,13 +325,25 @@ class HuiMapCard extends LitElement implements LovelaceCard {
continue; continue;
} }
// create icon
let iconHTML = "";
if (icon) {
const el = document.createElement("ha-icon");
el.setAttribute("icon", icon);
iconHTML = el.outerHTML;
} else {
const el = document.createElement("span");
el.innerHTML = title;
iconHTML = el.outerHTML;
}
// create marker with the icon // create marker with the icon
mapItems.push( mapItems.push(
Leaflet.marker([latitude, longitude], { Leaflet.marker([latitude, longitude], {
icon: Leaflet.divIcon({ icon: Leaflet.divIcon({
html: icon ? `<ha-icon icon="${icon}"></ha-icon>` : title, html: iconHTML,
iconSize: [24, 24], iconSize: [24, 24],
className: "", className: this._config!.dark_mode === true ? "dark" : "light",
}), }),
interactive: false, interactive: false,
title, title,
@ -455,6 +467,14 @@ class HuiMapCard extends LitElement implements LovelaceCard {
:host([ispanel]) #root { :host([ispanel]) #root {
height: 100%; height: 100%;
} }
.dark {
color: #ffffff;
}
.light {
color: #000000;
}
`; `;
} }
} }

12
src/panels/map/ha-panel-map.js
View File

@ -24,6 +24,10 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
width: 100%; width: 100%;
z-index: 0; z-index: 0;
} }
.light {
color: #000000;
}
</style> </style>
<app-toolbar> <app-toolbar>
@ -120,16 +124,18 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
el.setAttribute("icon", entity.attributes.icon); el.setAttribute("icon", entity.attributes.icon);
iconHTML = el.outerHTML; iconHTML = el.outerHTML;
} else { } else {
iconHTML = title; const el = document.createElement("span");
el.innerHTML = title;
iconHTML = el.outerHTML;
} }
icon = this.Leaflet.divIcon({ icon = this.Leaflet.divIcon({
html: iconHTML, html: iconHTML,
iconSize: [24, 24], iconSize: [24, 24],
className: "", className: "light",
}); });
// create market with the icon // create marker with the icon
mapItems.push( mapItems.push(
this.Leaflet.marker( this.Leaflet.marker(
[entity.attributes.latitude, entity.attributes.longitude], [entity.attributes.latitude, entity.attributes.longitude],