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

Dark Mode for Map Card (#3250)

Browse Source 
* Ability to change tile set from light_all to dark_all through card config.

* Use correct boolean.

* Fix possible undefined.

* Use correct value.
This commit is contained in:
Justin Bassett 2019-06-14 23:37:34 -04:00 committed by Paulus Schoutsen
parent 25bdf50737
commit c30aca8484
4 changed files with 23 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/common/dom/setup-leaflet-map.ts
View File

@ -4,7 +4,8 @@ import { Map } from "leaflet";
export type LeafletModuleType = typeof import("leaflet"); export type LeafletModuleType = typeof import("leaflet");
export const setupLeafletMap = async ( export const setupLeafletMap = async (
mapElement: HTMLElement mapElement: HTMLElement,
darkMode = false
): Promise<[Map, LeafletModuleType]> => { ): Promise<[Map, LeafletModuleType]> => {
if (!mapElement.parentNode) { if (!mapElement.parentNode) {
throw new Error("Cannot setup Leaflet map on disconnected element"); throw new Error("Cannot setup Leaflet map on disconnected element");
@ -20,9 +21,9 @@ export const setupLeafletMap = async (
mapElement.parentNode.appendChild(style); mapElement.parentNode.appendChild(style);
map.setView([52.3731339, 4.8903147], 13); map.setView([52.3731339, 4.8903147], 13);
Leaflet.tileLayer( Leaflet.tileLayer(
`https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}${ `https://{s}.basemaps.cartocdn.com/${
Leaflet.Browser.retina ? "@2x.png" : ".png" darkMode ? "dark_all" : "light_all"
}`, }/{z}/{x}/{y}${Leaflet.Browser.retina ? "@2x.png" : ".png"}`,
{ {
attribution: attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>', '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>',

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

@ -180,7 +180,10 @@ class HuiMapCard extends LitElement implements LovelaceCard {
} }
private async loadMap(): Promise<void> { private async loadMap(): Promise<void> {
[this._leafletMap, this.Leaflet] = await setupLeafletMap(this._mapEl); [this._leafletMap, this.Leaflet] = await setupLeafletMap(
this._mapEl,
this._config !== undefined ? this._config.dark_mode !== false : false
);
this._drawEntities(); this._drawEntities();
this._leafletMap.invalidateSize(); this._leafletMap.invalidateSize();
this._fitMap(); this._fitMap();

1
src/panels/lovelace/cards/types.ts
View File

@ -109,6 +109,7 @@ export interface MapCardConfig extends LovelaceCardConfig {
default_zoom?: number; default_zoom?: number;
entities?: Array<EntityConfig | string>; entities?: Array<EntityConfig | string>;
geo_location_sources?: string[]; geo_location_sources?: string[];
dark_mode?: boolean;
} }
export interface MarkdownCardConfig extends LovelaceCardConfig { export interface MarkdownCardConfig extends LovelaceCardConfig {

14
src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts
View File

@ -37,6 +37,7 @@ const cardConfigStruct = struct({
title: "string?", title: "string?",
aspect_ratio: "string?", aspect_ratio: "string?",
default_zoom: "number?", default_zoom: "number?",
dark_mode: "boolean?",
entities: [entitiesConfigStruct], entities: [entitiesConfigStruct],
geo_location_sources: "array?", geo_location_sources: "array?",
}); });
@ -71,6 +72,10 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
return this._config!.geo_location_sources || []; return this._config!.geo_location_sources || [];
} }
get _dark_mode(): boolean {
return this._config!.dark_mode || false;
}
protected render(): TemplateResult | void { protected render(): TemplateResult | void {
if (!this.hass) { if (!this.hass) {
return html``; return html``;
@ -100,6 +105,12 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
@value-changed="${this._valueChanged}" @value-changed="${this._valueChanged}"
></paper-input> ></paper-input>
</div> </div>
<paper-toggle-button
?checked="${this._dark_mode !== false}"
.configValue="${"dark_mode"}"
@change="${this._valueChanged}"
>Dark Mode?</paper-toggle-button
>
<hui-entity-editor <hui-entity-editor
.hass="${this.hass}" .hass="${this.hass}"
.entities="${this._configEntities}" .entities="${this._configEntities}"
@ -155,7 +166,8 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
} }
this._config = { this._config = {
...this._config, ...this._config,
[target.configValue!]: value, [target.configValue]:
target.checked !== undefined ? target.checked : value,
}; };
} }
} }