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

2
UI/Image/SlideShow.ts
View file

@ -11,7 +11,7 @@ export class SlideShow extends BaseUIElement {
constructor(embeddedElements: UIEventSource<BaseUIElement[]>) {
super()
this.embeddedElements = embeddedElements;
this.SetStyle("scroll-snap-type: x mandatory; overflow-x: scroll")
this.SetStyle("scroll-snap-type: x mandatory; overflow-x: auto")
}
protected InnerConstructElement(): HTMLElement {

2
UI/Input/TextField.ts
View file

@ -13,7 +13,7 @@ export class TextField extends InputElement<string> {
constructor(options?: {
placeholder?: string | BaseUIElement,
value?: UIEventSource<string>,
htmlType?: string,
htmlType?: "area" | "field",
inputMode?: string,
label?: BaseUIElement,
textAreaRows?: number,

2
UI/Input/ValidatedTextField.ts
View file

@ -98,11 +98,13 @@ export class TextFieldDef {
} else {
options["isValid"] = str => self.isValid(str, options.country);
}
options["cssText"] = "width: 100%;"
options["inputMode"] = this.inputmode;
if (this.inputmode === "text") {
options["htmlType"] = "area"
options["textAreaRows"] = 4
}

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")
}

21
UI/SpecialVisualizations.ts
View file

@ -39,14 +39,13 @@ import * as left_right_style_json from "../assets/layers/left_right_style/left_r
import {OpenIdEditor} from "./BigComponents/CopyrightPanel";
import Toggle from "./Input/Toggle";
import Img from "./Base/Img";
import ValidatedTextField from "./Input/ValidatedTextField";
import NoteCommentElement from "./Popup/NoteCommentElement";
import ImgurUploader from "../Logic/ImageProviders/ImgurUploader";
import FileSelectorButton from "./Input/FileSelectorButton";
import {LoginToggle} from "./Popup/LoginButton";
import {start} from "repl";
import {SubstitutedTranslation} from "./SubstitutedTranslation";
import {Feature} from "@turf/turf";
import {TextField} from "./Input/TextField";
export interface SpecialVisualization {
funcName: string,
@ -752,7 +751,14 @@ export default class SpecialVisualizations {
constr: (state, tags, args) => {
const t = Translations.t.notes;
const textField = ValidatedTextField.ForType("text").ConstructInputElement({placeholder: t.addCommentPlaceholder})
const textField = new TextField(
{
placeholder: t.addCommentPlaceholder,
inputStyle: "width: 100%; height: 6rem;",
textAreaRows: 3,
htmlType: "area"
}
)
textField.SetClass("rounded-l border border-grey")
const txt = textField.GetValue()
@ -810,8 +816,11 @@ export default class SpecialVisualizations {
new Title("Add a comment"),
textField,
new Combine([
new Toggle(addCommentButton, undefined, textField.GetValue().map(t => t !== undefined && t.length > 1)).SetClass("mr-2")
, stateButtons]).SetClass("flex justify-end")
stateButtons.SetClass("sm:mr-2"),
new Toggle(addCommentButton,
new Combine([t.typeText]).SetClass("flex items-center h-full subtle"),
textField.GetValue().map(t => t !== undefined && t.length >= 1)).SetClass("sm:mr-2")
]).SetClass("sm:flex sm:justify-between sm:items-stretch")
]).SetClass("border-2 border-black rounded-xl p-4 block"),
t.loginToAddComment, state)
}
@ -896,7 +905,7 @@ export default class SpecialVisualizations {
args: [],
docs: "Shows the title of the popup. Useful for some cases, e.g. 'What is phone number of {title()}?'",
example: "`What is the phone number of {title()}`, which might automatically become `What is the phone number of XYZ`.",
constr: (state, tagsSource, args, guistate) =>
constr: (state, tagsSource) =>
new VariableUiElement(tagsSource.map(tags => {
const layer = state.layoutToUse.getMatchingLayer(tags)
const title = layer?.title?.GetRenderValue(tags)