Improvements to notes layer and elements
This commit is contained in:
parent
9008e333ac
commit
d7df6a7a80
14 changed files with 185 additions and 38 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
|
|
@ -25,11 +25,13 @@
|
|||
]
|
||||
},
|
||||
"calculatedTags": [
|
||||
"_total_comments:=feat.get('comments').length",
|
||||
"_first_comment:=feat.get('comments')[0].text.toLowerCase()",
|
||||
"_opened_by_anonymous_user:=feat.get('comments')[0].user === undefined",
|
||||
"_first_user:=feat.get('comments')[0].user",
|
||||
"_first_user_lc:=feat.get('comments')[0].user?.toLowerCase()",
|
||||
"_first_user_id:=feat.get('comments')[0].uid",
|
||||
"_last_user_lc:=(() => {const comms = feat.get('comments'); return comms[comms.length - 1].user?.toLowerCase()})()",
|
||||
"_is_import_note:=(() => {const lines = feat.properties['_first_comment'].split('\\n'); const matchesMapCompleteURL = lines.map(l => l.match(\".*https://mapcomplete.osm.be/\\([a-zA-Z_-]+\\)\\(.html\\).*#import\")); const matchedIndexes = matchesMapCompleteURL.map((doesMatch, i) => [doesMatch !== null, i]).filter(v => v[0]).map(v => v[1]); return matchedIndexes[0] })()"
|
||||
],
|
||||
"titleIcons": [
|
||||
|
|
@ -79,7 +81,13 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
"iconSize": "40,40,bottom"
|
||||
"iconSize": "40,40,bottom",
|
||||
"iconBadges": [
|
||||
{
|
||||
"if": "_total_comments>1",
|
||||
"then": "speech_bubble"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"filter": [
|
||||
|
|
@ -147,6 +155,38 @@
|
|||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "edited_by",
|
||||
"options": [
|
||||
{
|
||||
"osmTags": "_lastt_user_lc~.*{search}.*",
|
||||
"fields": [
|
||||
{
|
||||
"name": "search"
|
||||
}
|
||||
],
|
||||
"question": {
|
||||
"en": "Opened before {search}"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "not_edited_by",
|
||||
"options": [
|
||||
{
|
||||
"osmTags": "_last_user_lc!~.*{search}.*",
|
||||
"fields": [
|
||||
{
|
||||
"name": "search"
|
||||
}
|
||||
],
|
||||
"question": {
|
||||
"en": "Opened after {search}"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "opened_before",
|
||||
"options": [
|
||||
|
|
@ -159,7 +199,7 @@
|
|||
}
|
||||
],
|
||||
"question": {
|
||||
"en": "Opened before {search}"
|
||||
"en": "Opened by anonymous user"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -176,7 +216,7 @@
|
|||
}
|
||||
],
|
||||
"question": {
|
||||
"en": "Opened after {search}"
|
||||
"en": "Only show open notes"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -187,7 +227,7 @@
|
|||
{
|
||||
"osmTags": "_opened_by_anonymous_user=true",
|
||||
"question": {
|
||||
"en": "Opened by anonymous user"
|
||||
"en": "Hide import notes"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1146,6 +1146,16 @@
|
|||
"sources": [
|
||||
"https://github.com/twitter/twemoji"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "speech_bubble_black_outline.svg",
|
||||
"license": "CC-BY 4.0",
|
||||
"authors": [
|
||||
"Twemoji"
|
||||
],
|
||||
"sources": [
|
||||
"https://github.com/twitter/twemoji"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "square.svg",
|
||||
|
|
@ -1341,4 +1351,4 @@
|
|||
"https://www.wikipedia.org/"
|
||||
]
|
||||
}
|
||||
]
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1 +1,32 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="#8CCAF7" d="M18 1c9.941 0 18 6.268 18 14 0 4.368-2.574 8.268-6.604 10.835C29.92 28.144 31.141 31.569 34 35c-5.758-.96-9.44-3.761-11.716-6.416-1.376.262-2.805.416-4.284.416-9.941 0-18-6.268-18-14S8.059 1 18 1z"/></svg>
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
viewBox="0 0 36 36"
|
||||
version="1.1"
|
||||
id="svg4"
|
||||
sodipodi:docname="speech_bubble.svg"
|
||||
inkscape:version="1.1.1 (1:1.1+202109281949+c3084ef5ed)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs8" />
|
||||
<sodipodi:namedview
|
||||
id="namedview6"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:pageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
showgrid="false"
|
||||
inkscape:zoom="24.083333"
|
||||
inkscape:cx="18.020761"
|
||||
inkscape:cy="18.020761"
|
||||
inkscape:current-layer="svg4" />
|
||||
<path
|
||||
fill="#8CCAF7"
|
||||
d="M18 1c9.941 0 18 6.268 18 14 0 4.368-2.574 8.268-6.604 10.835C29.92 28.144 31.141 31.569 34 35c-5.758-.96-9.44-3.761-11.716-6.416-1.376.262-2.805.416-4.284.416-9.941 0-18-6.268-18-14S8.059 1 18 1z"
|
||||
id="path2"
|
||||
style="stroke:none;stroke-opacity:1" />
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 289 B After Width: | Height: | Size: 1.1 KiB |
|
|
@ -227,4 +227,4 @@
|
|||
}
|
||||
],
|
||||
"hideFromOverview": false
|
||||
}
|
||||
}
|
||||
|
|
@ -1,13 +1,16 @@
|
|||
{
|
||||
"id": "mapcomplete-changes",
|
||||
"title": {
|
||||
"en": "Changes made with MapComplete"
|
||||
"en": "Changes made with MapComplete",
|
||||
"de": "Änderungen mit MapComplete"
|
||||
},
|
||||
"shortDescription": {
|
||||
"en": "Shows changes made by MapComplete"
|
||||
"en": "Shows changes made by MapComplete",
|
||||
"de": "Zeigt Änderungen, die von MapComplete vorgenommen wurden"
|
||||
},
|
||||
"description": {
|
||||
"en": "This maps shows all the changes made with MapComplete"
|
||||
"en": "This maps shows all the changes made with MapComplete",
|
||||
"de": "Diese Karte zeigt alle mit MapComplete vorgenommenen Änderungen"
|
||||
},
|
||||
"maintainer": "",
|
||||
"icon": "./assets/svg/logo.svg",
|
||||
|
|
@ -22,7 +25,8 @@
|
|||
{
|
||||
"id": "mapcomplete-changes",
|
||||
"name": {
|
||||
"en": "Changeset centers"
|
||||
"en": "Changeset centers",
|
||||
"de": "Schwerpunkte von Änderungssätzen"
|
||||
},
|
||||
"minzoom": 0,
|
||||
"source": {
|
||||
|
|
@ -36,35 +40,41 @@
|
|||
],
|
||||
"title": {
|
||||
"render": {
|
||||
"en": "Changeset for {theme}"
|
||||
"en": "Changeset for {theme}",
|
||||
"de": "Änderungssatz für {theme}"
|
||||
}
|
||||
},
|
||||
"description": {
|
||||
"en": "Shows all MapComplete changes"
|
||||
"en": "Shows all MapComplete changes",
|
||||
"de": "Zeigt alle MapComplete-Änderungen"
|
||||
},
|
||||
"tagRenderings": [
|
||||
{
|
||||
"id": "render_id",
|
||||
"render": {
|
||||
"en": "Changeset <a href='https://openstreetmap.org/changeset/{id}' target='_blank'>{id}</a>"
|
||||
"en": "Changeset <a href='https://openstreetmap.org/changeset/{id}' target='_blank'>{id}</a>",
|
||||
"de": "Änderungssatz <a href='https://openstreetmap.org/changeset/{id}' target='_blank'>{id}</a>"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "contributor",
|
||||
"render": {
|
||||
"en": "Change made by <a href='https://openstreetmap.org/user/{_last_edit:contributor}' target='_blank'>{_last_edit:contributor}</a>"
|
||||
"en": "Change made by <a href='https://openstreetmap.org/user/{_last_edit:contributor}' target='_blank'>{_last_edit:contributor}</a>",
|
||||
"de": "Geändert von <a href='https://openstreetmap.org/user/{_last_edit:contributor}' target='_blank'>{_last_edit:contributor}</a>"
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "theme",
|
||||
"render": {
|
||||
"en": "Change with theme <a href='https://mapcomplete.osm.be/{theme}'>{theme}</a>"
|
||||
"en": "Change with theme <a href='https://mapcomplete.osm.be/{theme}'>{theme}</a>",
|
||||
"de": "Änderung mit Thema <a href='https://mapcomplete.osm.be/{theme}'>{theme}</a>"
|
||||
},
|
||||
"mappings": [
|
||||
{
|
||||
"if": "theme~http.*",
|
||||
"then": {
|
||||
"en": "Change with <b>unofficial</b> theme <a href='https://mapcomplete.osm.be/theme.html?userlayout={theme}'>{theme}</a>"
|
||||
"en": "Change with <b>unofficial</b> theme <a href='https://mapcomplete.osm.be/theme.html?userlayout={theme}'>{theme}</a>",
|
||||
"de": "Änderung mit <b>inoffiziellem</b> Thema <a href='https://mapcomplete.osm.be/theme.html?userlayout={theme}'>{theme}</a>"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -328,7 +338,8 @@
|
|||
}
|
||||
],
|
||||
"question": {
|
||||
"en": "Themename contains {search}"
|
||||
"en": "Themename contains {search}",
|
||||
"de": "Themenname enthält {search}"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -344,7 +355,8 @@
|
|||
}
|
||||
],
|
||||
"question": {
|
||||
"en": "Made by contributor {search}"
|
||||
"en": "Made by contributor {search}",
|
||||
"de": "Erstellt von Mitwirkendem {search}"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -360,7 +372,8 @@
|
|||
}
|
||||
],
|
||||
"question": {
|
||||
"en": "<b>Not</b> made by contributor {search}"
|
||||
"en": "<b>Not</b> made by contributor {search}",
|
||||
"de": "<b> Nicht</b> erstellt von Mitwirkendem {search}"
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -375,7 +388,8 @@
|
|||
{
|
||||
"id": "link_to_more",
|
||||
"render": {
|
||||
"en": "More statistics can be found <a href='https://github.com/pietervdvn/MapComplete/tree/develop/Docs/Tools/graphs' target='_blank'>here</a>"
|
||||
"en": "More statistics can be found <a href='https://github.com/pietervdvn/MapComplete/tree/develop/Docs/Tools/graphs' target='_blank'>here</a>",
|
||||
"de": "Weitere Statistiken finden Sie <a href='https://github.com/pietervdvn/MapComplete/tree/develop/Docs/Tools/graphs' target='_blank'>hier</a>"
|
||||
}
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -863,10 +863,6 @@ video {
|
|||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
|
@ -887,6 +883,10 @@ video {
|
|||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.mb-2 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
|
@ -2457,10 +2457,18 @@ input {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.sm\:mr-2 {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.sm\:mt-5 {
|
||||
margin-top: 1.25rem;
|
||||
}
|
||||
|
||||
.sm\:flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.sm\:h-24 {
|
||||
height: 6rem;
|
||||
}
|
||||
|
|
@ -2493,6 +2501,10 @@ input {
|
|||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.sm\:items-stretch {
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.sm\:justify-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -369,6 +369,7 @@
|
|||
"isCreated": "Your note has been created!",
|
||||
"loginToAddComment": "Login to add a comment",
|
||||
"loginToAddPicture": "Login to add a picture",
|
||||
"typeText": "Type some text to add a comment",
|
||||
"loginToClose": "Login to close this note",
|
||||
"noteIsPublic": "This will be visible to everyone",
|
||||
"noteLayerDoEnable": "Enable the layer showing notes",
|
||||
|
|
|
|||
|
|
@ -3758,6 +3758,20 @@
|
|||
"question": "Hide import notes"
|
||||
}
|
||||
}
|
||||
},
|
||||
"9": {
|
||||
"options": {
|
||||
"0": {
|
||||
"question": "Only show open notes"
|
||||
}
|
||||
}
|
||||
},
|
||||
"10": {
|
||||
"options": {
|
||||
"0": {
|
||||
"question": "Hide import notes"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"name": "OpenStreetMap notes",
|
||||
|
|
|
|||
|
|
@ -13,8 +13,12 @@
|
|||
},
|
||||
"2": {
|
||||
"then": "Anjing diperbolehkan, tetapi mereka harus diikat"
|
||||
},
|
||||
"3": {
|
||||
"then": "Anjing diperbolehkan dan dapat berkeliaran dengan bebas"
|
||||
}
|
||||
}
|
||||
},
|
||||
"question": "Apakah anjing diperbolehkan dalam bisnis ini?"
|
||||
},
|
||||
"email": {
|
||||
"question": "Apa alamat surel dari {title()}?"
|
||||
|
|
|
|||
Loading…
Reference in a new issue