Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-26 07:46:30 +01:00
Code Issues Packages Projects Releases Activity

feat(views/geo): invert marker label on dark themes

Browse Source
This commit is contained in:
Elian Doran
2025-07-24 15:46:11 +03:00
parent 737f41d92b
commit 45457c6f76
2 changed files with 35 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/client/src/widgets/view_widgets/geo_view/index.ts
View File

@@ -1,6 +1,6 @@
import ViewMode, { ViewModeArgs } from "../view_mode.js";
import L from "leaflet";
import type { GPX, LatLng, LeafletMouseEvent, Map, Marker } from "leaflet";
import type { GPX, LatLng, Layer, LeafletMouseEvent, Map, Marker } from "leaflet";
import "leaflet/dist/leaflet.css";
import SpacedUpdate from "../../../services/spaced_update.js";
import { t } from "../../../services/i18n.js";
@@ -85,6 +85,11 @@ const TPL = /*html*/`
white-space: no-wrap;
overflow: hidden;
}
.geo-map-container.dark .leaflet-div-icon .title-label {
color: white;
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
</style>
<div class="geo-map-container"></div>
@@ -142,7 +147,25 @@ export default class GeoView extends ViewMode<MapData> {
});
const layerName = this.parentNote.getLabelValue("mapStyle") ?? "openstreetmap";
const layer = (await getMapLayer(layerName));
let layer: Layer;
const layerData = MAP_LAYERS[layerName] ?? MAP_LAYERS["openstreetmap"];
if (layerData.type === "vector") {
const style = (typeof layerData.style === "string" ? layerData.style : await layerData.style());
await import("@maplibre/maplibre-gl-leaflet");
layer = L.maplibreGL({
style: style as any
});
} else {
layer = L.tileLayer(layerData.url, {
attribution: layerData.attribution,
detectRetina: true
});
}
this.$container.toggleClass("dark", !!layerData.isDarkTheme);
layer.addTo(map);
this.map = map;
@@ -338,20 +361,3 @@ export default class GeoView extends ViewMode<MapData> {
}
async function getMapLayer(layerName: string) {
const layer = MAP_LAYERS[layerName] ?? MAP_LAYERS["openstreetmap"];
if (layer.type === "vector") {
const style = (typeof layer.style === "string" ? layer.style : await layer.style());
await import("@maplibre/maplibre-gl-leaflet");
return L.maplibreGL({
style: style as any
});
}
return L.tileLayer(layer.url, {
attribution: layer.attribution,
detectRetina: true
});
}

17
apps/client/src/widgets/view_widgets/geo_view/map_layer.ts
View File

@@ -1,5 +1,6 @@
interface Layer {
name: string;
isDarkTheme?: boolean;
}
interface VectorLayer extends Layer {
@@ -21,29 +22,31 @@ export const MAP_LAYERS: Record<string, VectorLayer | RasterLayer> = {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
},
"versatiles-colorful": {
name: "Versatiles Colorful (vector)",
name: "VersaTiles Colorful (vector)",
type: "vector",
style: async () => (await import("./styles/colorful/en.json")).default
},
"versatiles-eclipse": {
name: "Versatiles Eclipse (vector)",
name: "VersaTiles Eclipse (vector)",
type: "vector",
style: async () => (await import("./styles/eclipse/en.json")).default
style: async () => (await import("./styles/eclipse/en.json")).default,
isDarkTheme: true
},
"versatiles-graybeard": {
name: "Versatiles Graybeard (vector)",
name: "VersaTiles Graybeard (vector)",
type: "vector",
style: async () => (await import("./styles/graybeard/en.json")).default
},
"versatiles-neutrino": {
name: "Versatiles Neutrino (vector)",
name: "VersaTiles Neutrino (vector)",
type: "vector",
style: async () => (await import("./styles/neutrino/en.json")).default
},
"versatiles-shadow": {
name: "Versatiles Shadow (vector)",
name: "VersaTiles Shadow (vector)",
type: "vector",
style: async () => (await import("./styles/shadow/en.json")).default
style: async () => (await import("./styles/shadow/en.json")).default,
isDarkTheme: true
}
};