jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 11:46:42 +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;
}
// 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
mapItems.push(
Leaflet.marker([latitude, longitude], {
icon: Leaflet.divIcon({
html: icon ? `<ha-icon icon="${icon}"></ha-icon>` : title,
html: iconHTML,
iconSize: [24, 24],
className: "",
className: this._config!.dark_mode === true ? "dark" : "light",
}),
interactive: false,
title,
@ -455,6 +467,14 @@ class HuiMapCard extends LitElement implements LovelaceCard {
:host([ispanel]) #root {
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%;
z-index: 0;
}
.light {
color: #000000;
}
</style>
<app-toolbar>
@ -120,16 +124,18 @@ class HaPanelMap extends LocalizeMixin(PolymerElement) {
el.setAttribute("icon", entity.attributes.icon);
iconHTML = el.outerHTML;
} else {
iconHTML = title;
const el = document.createElement("span");
el.innerHTML = title;
iconHTML = el.outerHTML;
}
icon = this.Leaflet.divIcon({
html: iconHTML,
iconSize: [24, 24],
className: "",
className: "light",
});
// create market with the icon
// create marker with the icon
mapItems.push(
this.Leaflet.marker(
[entity.attributes.latitude, entity.attributes.longitude],