midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Improvements to notes layer and elements

Browse source
This commit is contained in:
Pieter Vander Vennet 2022-03-13 02:46:42 +01:00
parent 9008e333ac
commit d7df6a7a80
14 changed files with 185 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

18
UI/Popup/NoteCommentElement.ts
View file

@ -9,6 +9,8 @@ import Img from "../Base/Img";
import {SlideShow} from "../Image/SlideShow";
import {UIEventSource} from "../../Logic/UIEventSource";
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
import {UIElement} from "../UIElement";
import {VariableUiElement} from "../Base/VariableUIElement";
export default class NoteCommentElement extends Combine {
@ -39,7 +41,15 @@ export default class NoteCommentElement extends Combine {
user = new Link(comment.user, comment.user_url ?? "", true)
}
let userinfo = UIEventSource.FromPromise( Utils.downloadJsonCached("https://www.openstreetmap.org/api/0.6/user/"+comment.uid, 24*60*60*1000))
let userImg = new VariableUiElement( userinfo.map(userinfo => {
const href = userinfo?.user?.img?.href;
if(href !== undefined){
return new Img(href).SetClass("rounded-full w-8 h-8 mr-4")
}
return undefined
}))
const htmlElement = document.createElement("div")
htmlElement.innerHTML = comment.html
const images = Array.from(htmlElement.getElementsByTagName("a"))
@ -55,7 +65,7 @@ export default class NoteCommentElement extends Combine {
const imageEls = images.map(i => new Img(i)
.SetClass("w-full block")
.SetStyle("min-width: 50px; background: grey;"));
imagesEl = new SlideShow(new UIEventSource<BaseUIElement[]>(imageEls))
imagesEl = new SlideShow(new UIEventSource<BaseUIElement[]>(imageEls)).SetClass("mb-1")
}
super([
@ -64,9 +74,9 @@ export default class NoteCommentElement extends Combine {
new FixedUiElement(comment.html).SetClass("flex flex-col").SetStyle("margin: 0"),
]).SetClass("flex"),
imagesEl,
new Combine([user.SetClass("mr-2"), comment.date]).SetClass("flex justify-end subtle")
new Combine([userImg, user.SetClass("mr-2"), comment.date]).SetClass("flex justify-end items-center subtle")
])
this.SetClass("flex flex-col")
this.SetClass("flex flex-col pb-2 mb-2 border-gray-500 border-b")
}