feat(collections/geomap): react to archived notes

This commit is contained in:
Elian Doran 2025-09-12 18:08:55 +03:00
parent bf92280ed9
commit ff422d112b
No known key found for this signature in database
2 changed files with 8 additions and 3 deletions

View File

@ -68,6 +68,10 @@
overflow: hidden; overflow: hidden;
} }
.geo-map-container .leaflet-div-icon .archived {
opacity: 0.5;
}
.geo-map-container.dark .leaflet-div-icon .title-label { .geo-map-container.dark .leaflet-div-icon .title-label {
color: white; color: white;
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;

View File

@ -154,11 +154,12 @@ function NoteMarker({ note, editable, latLng }: { note: FNote, editable: boolean
// React to changes // React to changes
useNoteLabel(note, "color"); useNoteLabel(note, "color");
useNoteLabel(note, "iconClass"); useNoteLabel(note, "iconClass");
const [ archived ] = useNoteLabelBoolean(note, "archived");
const title = useNoteProperty(note, "title"); const title = useNoteProperty(note, "title");
const colorClass = note.getColorClass(); const colorClass = note.getColorClass();
const iconClass = note.getIcon(); const iconClass = note.getIcon();
const icon = useMemo(() => buildIcon(iconClass, colorClass ?? undefined, title, note.noteId), [ iconClass, colorClass, title, note.noteId]); const icon = useMemo(() => buildIcon(iconClass, colorClass ?? undefined, title, note.noteId, archived), [ iconClass, colorClass, title, note.noteId, archived]);
const onClick = useCallback(() => { const onClick = useCallback(() => {
appContext.triggerCommand("openInPopup", { noteIdOrPath: note.noteId }); appContext.triggerCommand("openInPopup", { noteIdOrPath: note.noteId });
@ -223,7 +224,7 @@ function NoteGpxTrack({ note }: { note: FNote }) {
return xmlString && <GpxTrack gpxXmlString={xmlString} options={options} /> return xmlString && <GpxTrack gpxXmlString={xmlString} options={options} />
} }
function buildIcon(bxIconClass: string, colorClass?: string, title?: string, noteIdLink?: string) { function buildIcon(bxIconClass: string, colorClass?: string, title?: string, noteIdLink?: string, archived?: boolean) {
let html = /*html*/`\ let html = /*html*/`\
<img class="icon" src="${markerIcon}" /> <img class="icon" src="${markerIcon}" />
<img class="icon-shadow" src="${markerIconShadow}" /> <img class="icon-shadow" src="${markerIconShadow}" />
@ -231,7 +232,7 @@ function buildIcon(bxIconClass: string, colorClass?: string, title?: string, not
<span class="title-label">${title ?? ""}</span>`; <span class="title-label">${title ?? ""}</span>`;
if (noteIdLink) { if (noteIdLink) {
html = `<div data-href="#root/${noteIdLink}">${html}</div>`; html = `<div data-href="#root/${noteIdLink}" class="${archived ? "archived" : ""}">${html}</div>`;
} }
return divIcon({ return divIcon({