gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-07 15:09:01 +01:00
Code Issues Actions 7 Packages Projects Releases Wiki 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
No known key found for this signature in database
2 changed files with 35 additions and 26 deletions
Show Stats 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 ViewMode, { ViewModeArgs } from "../view_mode.js";
import L from "leaflet"; 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 "leaflet/dist/leaflet.css";
import SpacedUpdate from "../../../services/spaced_update.js"; import SpacedUpdate from "../../../services/spaced_update.js";
import { t } from "../../../services/i18n.js"; import { t } from "../../../services/i18n.js";
@ -85,6 +85,11 @@ const TPL = /*html*/`
white-space: no-wrap; white-space: no-wrap;
overflow: hidden; 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> </style>
<div class="geo-map-container"></div> <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 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); layer.addTo(map);
this.map = 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 { interface Layer {
name: string; name: string;
isDarkTheme?: boolean;
} }
interface VectorLayer extends Layer { 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' attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}, },
"versatiles-colorful": { "versatiles-colorful": {
name: "Versatiles Colorful (vector)", name: "VersaTiles Colorful (vector)",
type: "vector", type: "vector",
style: async () => (await import("./styles/colorful/en.json")).default style: async () => (await import("./styles/colorful/en.json")).default
}, },
"versatiles-eclipse": { "versatiles-eclipse": {
name: "Versatiles Eclipse (vector)", name: "VersaTiles Eclipse (vector)",
type: "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": { "versatiles-graybeard": {
name: "Versatiles Graybeard (vector)", name: "VersaTiles Graybeard (vector)",
type: "vector", type: "vector",
style: async () => (await import("./styles/graybeard/en.json")).default style: async () => (await import("./styles/graybeard/en.json")).default
}, },
"versatiles-neutrino": { "versatiles-neutrino": {
name: "Versatiles Neutrino (vector)", name: "VersaTiles Neutrino (vector)",
type: "vector", type: "vector",
style: async () => (await import("./styles/neutrino/en.json")).default style: async () => (await import("./styles/neutrino/en.json")).default
}, },
"versatiles-shadow": { "versatiles-shadow": {
name: "Versatiles Shadow (vector)", name: "VersaTiles Shadow (vector)",
type: "vector", type: "vector",
style: async () => (await import("./styles/shadow/en.json")).default style: async () => (await import("./styles/shadow/en.json")).default,
isDarkTheme: true
} }
}; };