{/if}
diff --git a/src/UI/Reviews/AllReviews.svelte b/src/UI/Reviews/AllReviews.svelte
index 2d8172210..1ea62d4bf 100644
--- a/src/UI/Reviews/AllReviews.svelte
+++ b/src/UI/Reviews/AllReviews.svelte
@@ -26,7 +26,7 @@
})
-
+
{#if _reviews.length > 1}
{/if}
@@ -35,10 +35,11 @@
{/each}
{:else}
+
|
+
{/if}
-
|
diff --git a/src/UI/Reviews/ReviewsOverview.svelte b/src/UI/Reviews/ReviewsOverview.svelte
index 99e1749ba..062289174 100644
--- a/src/UI/Reviews/ReviewsOverview.svelte
+++ b/src/UI/Reviews/ReviewsOverview.svelte
@@ -63,7 +63,7 @@
{/if}
-
+
|
diff --git a/src/UI/SpecialVisualisationUtils.ts b/src/UI/SpecialVisualisationUtils.ts
index ecf3af1b5..6b3fb0e3e 100644
--- a/src/UI/SpecialVisualisationUtils.ts
+++ b/src/UI/SpecialVisualisationUtils.ts
@@ -82,8 +82,8 @@ export default class SpecialVisualisationUtils {
}
const element: RenderingSpecification = {
- args: args,
- style: style,
+ args,
+ style,
func: knownSpecial,
}
return [...partBefore, element, ...partAfter]
diff --git a/src/UI/SpecialVisualizations.ts b/src/UI/SpecialVisualizations.ts
index 14dd47a8c..70fe55b7a 100644
--- a/src/UI/SpecialVisualizations.ts
+++ b/src/UI/SpecialVisualizations.ts
@@ -5,7 +5,7 @@ import Title from "./Base/Title"
import {
RenderingSpecification,
SpecialVisualization,
- SpecialVisualizationState,
+ SpecialVisualizationState
} from "./SpecialVisualization"
import { HistogramViz } from "./Popup/HistogramViz"
import { MinimapViz } from "./Popup/MinimapViz"
@@ -97,6 +97,7 @@ import LanguageUtils from "../Utils/LanguageUtils"
import MarkdownUtils from "../Utils/MarkdownUtils"
import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
import Trash from "@babeard/svelte-heroicons/mini/Trash"
+import NothingKnown from "./Popup/NothingKnown.svelte"
class NearbyImageVis implements SpecialVisualization {
// Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
@@ -104,13 +105,13 @@ class NearbyImageVis implements SpecialVisualization {
{
name: "mode",
defaultValue: "closed",
- doc: "Either `open` or `closed`. If `open`, then the image carousel will always be shown",
+ doc: "Either `open` or `closed`. If `open`, then the image carousel will always be shown"
},
{
name: "readonly",
required: false,
- doc: "If 'readonly', will not show the 'link'-button",
- },
+ doc: "If 'readonly', will not show the 'link'-button"
+ }
]
docs =
"A component showing nearby images loaded from various online services such as Mapillary. In edit mode and when used on a feature, the user can select an image to add to the feature"
@@ -135,7 +136,7 @@ class NearbyImageVis implements SpecialVisualization {
lat,
feature,
layer,
- linkable: !readonly,
+ linkable: !readonly
})
}
}
@@ -149,13 +150,13 @@ class StealViz implements SpecialVisualization {
{
name: "featureId",
doc: "The key of the attribute which contains the id of the feature from which to use the tags",
- required: true,
+ required: true
},
{
name: "tagRenderingId",
doc: "The layer-id and tagRenderingId to render. Can be multiple value if ';'-separated (in which case every value must also contain the layerId, e.g. `layerId.tagRendering0; layerId.tagRendering1`). Note: this can cause layer injection",
- required: true,
- },
+ required: true
+ }
]
needsUrls = []
svelteBased = true
@@ -189,7 +190,7 @@ class StealViz implements SpecialVisualization {
tags: otherTags,
selectedElement: otherFeature,
state,
- layer,
+ layer
})
)
}
@@ -224,12 +225,12 @@ export class QuestionViz implements SpecialVisualization {
args = [
{
name: "labels",
- doc: "One or more ';'-separated labels. If these are given, only questions with these labels will be given. Use `unlabeled` for all questions that don't have an explicit label. If none given, all questions will be shown",
+ doc: "One or more ';'-separated labels. If these are given, only questions with these labels will be given. Use `unlabeled` for all questions that don't have an explicit label. If none given, all questions will be shown"
},
{
name: "blacklisted-labels",
- doc: "One or more ';'-separated labels of questions which should _not_ be included",
- },
+ doc: "One or more ';'-separated labels of questions which should _not_ be included"
+ }
]
svelteBased = true
@@ -254,7 +255,7 @@ export class QuestionViz implements SpecialVisualization {
selectedElement: feature,
state,
onlyForLabels: labels,
- notForLabels: blacklist,
+ notForLabels: blacklist
}).SetClass("w-full")
}
}
@@ -277,18 +278,18 @@ export default class SpecialVisualizations {
viz.docs,
viz.args.length > 0
? MarkdownUtils.table(
- ["name", "default", "description"],
- viz.args.map((arg) => {
- let defaultArg = arg.defaultValue ?? "_undefined_"
- if (defaultArg == "") {
- defaultArg = "_empty string_"
- }
- return [arg.name, defaultArg, arg.doc]
- })
- )
+ ["name", "default", "description"],
+ viz.args.map((arg) => {
+ let defaultArg = arg.defaultValue ?? "_undefined_"
+ if (defaultArg == "") {
+ defaultArg = "_empty string_"
+ }
+ return [arg.name, defaultArg, arg.doc]
+ })
+ )
: undefined,
"#### Example usage of " + viz.funcName,
- "
" + example + "",
+ "
" + example + ""
].join("\n\n")
}
@@ -308,7 +309,7 @@ export default class SpecialVisualizations {
new Title("Special tag renderings", 1),
"In a tagrendering, some special values are substituted by an advanced UI-element. This allows advanced features and visualizations to be reused by custom themes or even to query third-party API's.",
- "General usage is `{func_name()}`, `{func_name(arg, someotherarg)}` or `{func_name(args):cssStyle}`. Note that you _do not_ need to use quotes around your arguments, the comma is enough to separate them. This also implies you cannot use a comma in your args",
+ "General usage is `{func_name()}`, `{func_name(arg, someotherarg)}` or `{func_name(args):cssClasses}`. Note that you _do not_ need to use quotes around your arguments, the comma is enough to separate them. This also implies you cannot use a comma in your args",
new Title("Using expanded syntax", 4),
`Instead of using \`{"render": {"en": "{some_special_visualisation(some_arg, some other really long message, more args)} , "nl": "{some_special_visualisation(some_arg, een boodschap in een andere taal, more args)}}\`, one can also write`,
new FixedUiElement(
@@ -320,24 +321,24 @@ export default class SpecialVisualizations {
argname: "some_arg",
message: {
en: "some other really long message",
- nl: "een boodschap in een andere taal",
+ nl: "een boodschap in een andere taal"
},
- other_arg_name: "more args",
+ other_arg_name: "more args"
},
before: {
en: "Some text to prefix before the special element (e.g. a title)",
- nl: "Een tekst om voor het element te zetten (bv. een titel)",
+ nl: "Een tekst om voor het element te zetten (bv. een titel)"
},
after: {
- en: "Some text to put after the element, e.g. a footer",
- },
- },
+ en: "Some text to put after the element, e.g. a footer"
+ }
+ }
},
null,
" "
)
).SetClass("code"),
- 'In other words: use `{ "before": ..., "after": ..., "special": {"type": ..., "argname": ...argvalue...}`. The args are in the `special` block; an argvalue can be a string, a translation or another value. (Refer to class `RewriteSpecial` in case of problems)',
+ "In other words: use `{ \"before\": ..., \"after\": ..., \"special\": {\"type\": ..., \"argname\": ...argvalue...}`. The args are in the `special` block; an argvalue can be a string, a translation or another value. (Refer to class `RewriteSpecial` in case of problems)"
])
.SetClass("flex flex-col")
.AsMarkdown()
@@ -354,14 +355,14 @@ export default class SpecialVisualizations {
s.structuredExamples === undefined
? []
: s.structuredExamples().map((e) => {
- return s.constr(
- state,
- new UIEventSource
>(e.feature.properties),
- e.args,
- e.feature,
- undefined
- )
- })
+ return s.constr(
+ state,
+ new UIEventSource>(e.feature.properties),
+ e.args,
+ e.feature,
+ undefined
+ )
+ })
return new Combine([new Title(s.funcName), s.docs, ...examples])
}
@@ -377,9 +378,9 @@ export default class SpecialVisualizations {
const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
return new SvelteUIElement(AddNewPoint, {
state,
- coordinate: { lon, lat },
+ coordinate: { lon, lat }
}).SetClass("w-full h-full overflow-auto")
- },
+ }
},
{
funcName: "user_profile",
@@ -388,9 +389,9 @@ export default class SpecialVisualizations {
docs: "A component showing information about the currently logged in user (username, profile description, profile picture + link to edit them). Mostly meant to be used in the 'user-settings'",
constr(state: SpecialVisualizationState): BaseUIElement {
return new SvelteUIElement(UserProfile, {
- osmConnection: state.osmConnection,
+ osmConnection: state.osmConnection
})
- },
+ }
},
{
funcName: "language_picker",
@@ -407,11 +408,11 @@ export default class SpecialVisualizations {
availableLanguages: languages,
preferredLanguages: state.osmConnection.userDetails.map(
(ud) => ud.languages
- ),
+ )
})
})
)
- },
+ }
},
{
funcName: "logout",
@@ -421,7 +422,7 @@ export default class SpecialVisualizations {
constr(state: SpecialVisualizationState): BaseUIElement {
return new SvelteUIElement(LogoutButton, { osmConnection: state.osmConnection })
- },
+ }
},
new HistogramViz(),
new StealViz(),
@@ -445,7 +446,7 @@ export default class SpecialVisualizations {
return undefined
})
)
- },
+ }
},
{
funcName: "move_button",
@@ -466,9 +467,9 @@ export default class SpecialVisualizations {
return new SvelteUIElement(MoveWizard, {
state,
featureToMove: feature,
- layer,
+ layer
})
- },
+ }
},
{
funcName: "delete_button",
@@ -490,9 +491,9 @@ export default class SpecialVisualizations {
deleteConfig: layer.deletion,
state,
feature,
- layer,
+ layer
}).SetClass("p-0 m-0")
- },
+ }
},
new ShareLinkViz(),
new ExportAsGpxViz(),
@@ -513,9 +514,9 @@ export default class SpecialVisualizations {
const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
return new SvelteUIElement(CreateNewNote, {
state,
- coordinate: new UIEventSource({ lon, lat }),
+ coordinate: new UIEventSource({ lon, lat })
})
- },
+ }
},
new CloseNoteButton(),
new PlantNetDetectionViz(),
@@ -535,8 +536,8 @@ export default class SpecialVisualizations {
{
name: "keyToShowWikipediaFor",
doc: "Use the wikidata entry from this key to show the wikipedia article for. Multiple keys can be given (separated by ';'), in which case the first matching value is used",
- defaultValue: "wikidata;wikipedia",
- },
+ defaultValue: "wikidata;wikipedia"
+ }
],
needsUrls: [...Wikidata.neededUrls, ...Wikipedia.neededUrls],
@@ -549,9 +550,9 @@ export default class SpecialVisualizations {
return tags[key]?.split(";")?.map((id) => id.trim()) ?? []
})
return new SvelteUIElement(WikipediaPanel, {
- wikiIds,
+ wikiIds
})
- },
+ }
},
{
funcName: "wikidata_label",
@@ -560,8 +561,8 @@ export default class SpecialVisualizations {
{
name: "keyToShowWikidataFor",
doc: "Use the wikidata entry from this key to show the label",
- defaultValue: "wikidata",
- },
+ defaultValue: "wikidata"
+ }
],
needsUrls: Wikidata.neededUrls,
example:
@@ -585,7 +586,7 @@ export default class SpecialVisualizations {
})
)
})
- ),
+ )
},
new MapillaryLinkVis(),
new LanguageElement(),
@@ -599,7 +600,7 @@ export default class SpecialVisualizations {
_,
__,
layer: LayerConfig
- ) => new SvelteUIElement(AllTagsPanel, { tags, layer }),
+ ) => new SvelteUIElement(AllTagsPanel, { tags, layer })
},
{
funcName: "image_carousel",
@@ -608,8 +609,8 @@ export default class SpecialVisualizations {
{
name: "image_key",
defaultValue: AllImageProviders.defaultKeys.join(","),
- doc: "The keys given to the images, e.g. if image is given, the first picture URL will be added as image, the second as image:0, the third as image:1, etc... Multiple values are allowed if ';'-separated ",
- },
+ doc: "The keys given to the images, e.g. if image is given, the first picture URL will be added as image, the second as image:0, the third as image:1, etc... Multiple values are allowed if ';'-separated "
+ }
],
needsUrls: AllImageProviders.apiUrls,
constr: (state, tags, args) => {
@@ -622,7 +623,7 @@ export default class SpecialVisualizations {
tags,
state
)
- },
+ }
},
{
funcName: "image_upload",
@@ -632,13 +633,13 @@ export default class SpecialVisualizations {
{
name: "image-key",
doc: "Image tag to add the URL to (or image-tag:0, image-tag:1 when multiple images are added)",
- required: false,
+ required: false
},
{
name: "label",
doc: "The text to show on the button",
- required: false,
- },
+ required: false
+ }
],
constr: (state, tags, args) => {
const targetKey = args[0] === "" ? undefined : args[0]
@@ -647,9 +648,9 @@ export default class SpecialVisualizations {
tags,
targetKey,
labelText: args[1],
- image: args[2],
+ image: args[2]
})
- },
+ }
},
{
funcName: "rating",
@@ -659,12 +660,12 @@ export default class SpecialVisualizations {
{
name: "subjectKey",
defaultValue: "name",
- doc: "The key to use to determine the subject. If the value is specified, the subject will be tags[subjectKey] and will use this to filter the reviews.",
+ doc: "The key to use to determine the subject. If the value is specified, the subject will be tags[subjectKey] and will use this to filter the reviews."
},
{
name: "fallback",
- doc: "The identifier to use, if tags[subjectKey] as specified above is not available. This is effectively a fallback value",
- },
+ doc: "The identifier to use, if tags[subjectKey] as specified above is not available. This is effectively a fallback value"
+ }
],
constr: (state, tags, args, feature) => {
const nameKey = args[0] ?? "name"
@@ -675,14 +676,14 @@ export default class SpecialVisualizations {
state.userRelatedState.mangroveIdentity,
{
nameKey: nameKey,
- fallbackName,
+ fallbackName
},
state.featureSwitchIsTesting
)
return new SvelteUIElement(StarsBarIcon, {
- score: reviews.average,
+ score: reviews.average
})
- },
+ }
},
{
@@ -693,12 +694,12 @@ export default class SpecialVisualizations {
{
name: "subjectKey",
defaultValue: "name",
- doc: "The key to use to determine the subject. If specified, the subject will be tags[subjectKey]",
+ doc: "The key to use to determine the subject. If specified, the subject will be tags[subjectKey]"
},
{
name: "fallback",
- doc: "The identifier to use, if tags[subjectKey] as specified above is not available. This is effectively a fallback value",
- },
+ doc: "The identifier to use, if tags[subjectKey] as specified above is not available. This is effectively a fallback value"
+ }
],
constr: (state, tags, args, feature, layer) => {
const nameKey = args[0] ?? "name"
@@ -709,12 +710,12 @@ export default class SpecialVisualizations {
state.userRelatedState?.mangroveIdentity,
{
nameKey: nameKey,
- fallbackName,
+ fallbackName
},
state.featureSwitchIsTesting
)
return new SvelteUIElement(ReviewForm, { reviews, state, tags, feature, layer })
- },
+ }
},
{
funcName: "list_reviews",
@@ -726,12 +727,12 @@ export default class SpecialVisualizations {
{
name: "subjectKey",
defaultValue: "name",
- doc: "The key to use to determine the subject. If specified, the subject will be tags[subjectKey]",
+ doc: "The key to use to determine the subject. If specified, the subject will be tags[subjectKey]"
},
{
name: "fallback",
- doc: "The identifier to use, if tags[subjectKey] as specified above is not available. This is effectively a fallback value",
- },
+ doc: "The identifier to use, if tags[subjectKey] as specified above is not available. This is effectively a fallback value"
+ }
],
constr: (state, tags, args, feature, layer) => {
const nameKey = args[0] ?? "name"
@@ -742,12 +743,12 @@ export default class SpecialVisualizations {
state.userRelatedState?.mangroveIdentity,
{
nameKey: nameKey,
- fallbackName,
+ fallbackName
},
state.featureSwitchIsTesting
)
return new SvelteUIElement(AllReviews, { reviews, state, tags, feature, layer })
- },
+ }
},
{
funcName: "import_mangrove_key",
@@ -755,8 +756,8 @@ export default class SpecialVisualizations {
args: [
{
name: "text",
- doc: "The text that is shown on the button",
- },
+ doc: "The text that is shown on the button"
+ }
],
needsUrls: [],
constr(
@@ -766,7 +767,7 @@ export default class SpecialVisualizations {
): BaseUIElement {
const [text] = argument
return new SvelteUIElement(ImportReviewIdentity, { state, text })
- },
+ }
},
{
funcName: "opening_hours_table",
@@ -775,18 +776,18 @@ export default class SpecialVisualizations {
{
name: "key",
defaultValue: "opening_hours",
- doc: "The tagkey from which the table is constructed.",
+ doc: "The tagkey from which the table is constructed."
},
{
name: "prefix",
defaultValue: "",
- doc: "Remove this string from the start of the value before parsing. __Note: use `&LPARENs` to indicate `(` if needed__",
+ doc: "Remove this string from the start of the value before parsing. __Note: use `&LPARENs` to indicate `(` if needed__"
},
{
name: "postfix",
defaultValue: "",
- doc: "Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__",
- },
+ doc: "Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__"
+ }
],
needsUrls: [Constants.countryCoderEndpoint],
example:
@@ -794,7 +795,7 @@ export default class SpecialVisualizations {
constr: (state, tagSource: UIEventSource, args) => {
const [key, prefix, postfix] = args
return new OpeningHoursVisualization(tagSource, state, key, prefix, postfix)
- },
+ }
},
{
funcName: "opening_hours_state",
@@ -803,18 +804,18 @@ export default class SpecialVisualizations {
{
name: "key",
defaultValue: "opening_hours",
- doc: "The tagkey from which the opening hours are read.",
+ doc: "The tagkey from which the opening hours are read."
},
{
name: "prefix",
defaultValue: "",
- doc: "Remove this string from the start of the value before parsing. __Note: use `&LPARENs` to indicate `(` if needed__",
+ doc: "Remove this string from the start of the value before parsing. __Note: use `&LPARENs` to indicate `(` if needed__"
},
{
name: "postfix",
defaultValue: "",
- doc: "Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__",
- },
+ doc: "Remove this string from the end of the value before parsing. __Note: use `&RPARENs` to indicate `)` if needed__"
+ }
],
constr(
state: SpecialVisualizationState,
@@ -829,9 +830,9 @@ export default class SpecialVisualizations {
keyToUse,
tags,
prefix,
- postfix,
+ postfix
})
- },
+ }
},
{
funcName: "canonical",
@@ -843,8 +844,8 @@ export default class SpecialVisualizations {
{
name: "key",
doc: "The key of the tag to give the canonical text for",
- required: true,
- },
+ required: true
+ }
],
constr: (state, tagSource, args) => {
const key = args[0]
@@ -868,7 +869,7 @@ export default class SpecialVisualizations {
return unit.asHumanLongValue(value, getCountry)
})
)
- },
+ }
},
{
funcName: "export_as_geojson",
@@ -882,7 +883,7 @@ export default class SpecialVisualizations {
new SvelteUIElement(ArrowDownTray),
new Combine([
t.downloadFeatureAsGeojson.SetClass("font-bold text-lg"),
- t.downloadGeoJsonHelper.SetClass("subtle"),
+ t.downloadGeoJsonHelper.SetClass("subtle")
]).SetClass("flex flex-col")
)
.onClick(() => {
@@ -895,12 +896,12 @@ export default class SpecialVisualizations {
data,
title + "_mapcomplete_export.geojson",
{
- mimetype: "application/vnd.geo+json",
+ mimetype: "application/vnd.geo+json"
}
)
})
.SetClass("w-full")
- },
+ }
},
{
funcName: "open_in_iD",
@@ -910,9 +911,9 @@ export default class SpecialVisualizations {
constr: (state, feature) => {
return new SvelteUIElement(OpenIdEditor, {
mapProperties: state.mapProperties,
- objectId: feature.data.id,
+ objectId: feature.data.id
})
- },
+ }
},
{
funcName: "open_in_josm",
@@ -922,7 +923,7 @@ export default class SpecialVisualizations {
constr: (state) => {
return new SvelteUIElement(OpenJosm, { state })
- },
+ }
},
{
funcName: "clear_location_history",
@@ -937,7 +938,7 @@ export default class SpecialVisualizations {
state.historicalUserLocations.features.setData([])
state.selectedElement.setData(undefined)
})
- },
+ }
},
{
funcName: "visualize_note_comments",
@@ -946,13 +947,13 @@ export default class SpecialVisualizations {
{
name: "commentsKey",
doc: "The property name of the comments, which should be stringified json",
- defaultValue: "comments",
+ defaultValue: "comments"
},
{
name: "start",
doc: "Drop the first 'start' comments",
- defaultValue: "0",
- },
+ defaultValue: "0"
+ }
],
needsUrls: [Constants.osmAuthConfig.url],
constr: (state, tags, args) =>
@@ -974,7 +975,7 @@ export default class SpecialVisualizations {
)
).SetClass("flex flex-col")
})
- ),
+ )
},
{
funcName: "add_image_to_note",
@@ -983,8 +984,8 @@ export default class SpecialVisualizations {
{
name: "Id-key",
doc: "The property name where the ID of the note to close can be found",
- defaultValue: "id",
- },
+ defaultValue: "id"
+ }
],
needsUrls: [Imgur.apiUrl],
@@ -993,7 +994,7 @@ export default class SpecialVisualizations {
tags = state.featureProperties.getStore(id)
console.log("Id is", id)
return new SvelteUIElement(UploadImage, { state, tags })
- },
+ }
},
{
funcName: "title",
@@ -1023,12 +1024,12 @@ export default class SpecialVisualizations {
tags: tagsSource,
state,
feature,
- layer,
+ layer
})
.SetClass("px-1")
.setSpan()
})
- ),
+ )
},
{
funcName: "maproulette_task",
@@ -1072,7 +1073,7 @@ export default class SpecialVisualizations {
})
)
},
- docs: "Fetches the metadata of MapRoulette campaign that this task is part of and shows those details (namely `title`, `description` and `instruction`).\n\nThis reads the property `mr_challengeId` to detect the parent campaign.",
+ docs: "Fetches the metadata of MapRoulette campaign that this task is part of and shows those details (namely `title`, `description` and `instruction`).\n\nThis reads the property `mr_challengeId` to detect the parent campaign."
},
{
funcName: "maproulette_set_status",
@@ -1083,15 +1084,15 @@ export default class SpecialVisualizations {
"\n" +
"```json\n" +
"{\n" +
- ' "id": "mark_duplicate",\n' +
- ' "render": {\n' +
- ' "special": {\n' +
- ' "type": "maproulette_set_status",\n' +
- ' "message": {\n' +
- ' "en": "Mark as not found or false positive"\n' +
+ " \"id\": \"mark_duplicate\",\n" +
+ " \"render\": {\n" +
+ " \"special\": {\n" +
+ " \"type\": \"maproulette_set_status\",\n" +
+ " \"message\": {\n" +
+ " \"en\": \"Mark as not found or false positive\"\n" +
" },\n" +
- ' "status": "2",\n' +
- ' "image": "close"\n' +
+ " \"status\": \"2\",\n" +
+ " \"image\": \"close\"\n" +
" }\n" +
" }\n" +
"}\n" +
@@ -1099,32 +1100,32 @@ export default class SpecialVisualizations {
args: [
{
name: "message",
- doc: "A message to show to the user",
+ doc: "A message to show to the user"
},
{
name: "image",
doc: "Image to show",
- defaultValue: "confirm",
+ defaultValue: "confirm"
},
{
name: "message_confirm",
- doc: "What to show when the task is closed, either by the user or was already closed.",
+ doc: "What to show when the task is closed, either by the user or was already closed."
},
{
name: "status",
doc: "A statuscode to apply when the button is clicked. 1 = `close`, 2 = `false_positive`, 3 = `skip`, 4 = `deleted`, 5 = `already fixed` (on the map, e.g. for duplicates), 6 = `too hard`",
- defaultValue: "1",
+ defaultValue: "1"
},
{
name: "maproulette_id",
doc: "The property name containing the maproulette id",
- defaultValue: "mr_taskId",
+ defaultValue: "mr_taskId"
},
{
name: "ask_feedback",
doc: "If not an empty string, this will be used as question to ask some additional feedback. A text field will be added",
- defaultValue: "",
- },
+ defaultValue: ""
+ }
],
constr: (state, tagsSource, args) => {
@@ -1134,7 +1135,7 @@ export default class SpecialVisualizations {
message_closed,
statusToSet,
maproulette_id_key,
- askFeedback,
+ askFeedback
] = args
if (image === "") {
image = "confirm"
@@ -1151,9 +1152,9 @@ export default class SpecialVisualizations {
message_closed,
statusToSet,
maproulette_id_key,
- askFeedback,
+ askFeedback
})
- },
+ }
},
{
funcName: "statistics",
@@ -1180,7 +1181,7 @@ export default class SpecialVisualizations {
[state.mapProperties.bounds]
)
)
- },
+ }
},
{
funcName: "send_email",
@@ -1189,29 +1190,29 @@ export default class SpecialVisualizations {
{
name: "to",
doc: "Who to send the email to?",
- required: true,
+ required: true
},
{
name: "subject",
doc: "The subject of the email",
- required: true,
+ required: true
},
{
name: "body",
doc: "The text in the email",
- required: true,
+ required: true
},
{
name: "button_text",
doc: "The text shown on the button in the UI",
- required: true,
- },
+ required: true
+ }
],
constr(__, tags, args) {
return new SvelteUIElement(SendEmail, { args, tags })
- },
+ }
},
{
funcName: "link",
@@ -1220,25 +1221,25 @@ export default class SpecialVisualizations {
{
name: "text",
doc: "Text to be shown",
- required: true,
+ required: true
},
{
name: "href",
doc: "The URL to link to. Note that this will be URI-encoded before ",
- required: true,
+ required: true
},
{
name: "class",
- doc: "CSS-classes to add to the element",
+ doc: "CSS-classes to add to the element"
},
{
name: "download",
- doc: "Expects a string which denotes the filename to download the contents of `href` into. If set, this link will act as a download-button.",
+ doc: "Expects a string which denotes the filename to download the contents of `href` into. If set, this link will act as a download-button."
},
{
name: "arialabel",
- doc: "If set, this text will be used as aria-label",
- },
+ doc: "If set, this text will be used as aria-label"
+ }
],
constr(
@@ -1265,9 +1266,9 @@ export default class SpecialVisualizations {
classnames: new ImmutableStore(classnames),
download: tagSource.map((tags) => Utils.SubstituteKeys(download, tags)),
ariaLabel: tagSource.map((tags) => Utils.SubstituteKeys(ariaLabel, tags)),
- newTab: new ImmutableStore(newTab),
+ newTab: new ImmutableStore(newTab)
}).setSpan()
- },
+ }
},
{
funcName: "multi",
@@ -1281,10 +1282,10 @@ export default class SpecialVisualizations {
type: "multi",
key: "_doors_from_building_properties",
tagrendering: {
- en: "The building containing this feature has a door of width {entrance:width}",
- },
- },
- },
+ en: "The building containing this feature has a door of width {entrance:width}"
+ }
+ }
+ }
},
null,
" "
@@ -1294,17 +1295,17 @@ export default class SpecialVisualizations {
{
name: "key",
doc: "The property to read and to interpret as a list of properties",
- required: true,
+ required: true
},
{
name: "tagrendering",
doc: "An entire tagRenderingConfig",
- required: true,
+ required: true
},
{
name: "classes",
- doc: "CSS-classes to apply on every individual item. Seperated by `space`",
- },
+ doc: "CSS-classes to apply on every individual item. Seperated by `space`"
+ }
],
constr(
state: SpecialVisualizationState,
@@ -1340,14 +1341,14 @@ export default class SpecialVisualizations {
tags: new ImmutableStore(property),
state,
feature,
- layer,
+ layer
}).SetClass(classes)
elements.push(subsTr)
}
return elements
})
)
- },
+ }
},
{
funcName: "translated",
@@ -1357,8 +1358,8 @@ export default class SpecialVisualizations {
{
name: "key",
doc: "The attribute to interpret as json",
- defaultValue: "value",
- },
+ defaultValue: "value"
+ }
],
constr(
state: SpecialVisualizationState,
@@ -1379,7 +1380,7 @@ export default class SpecialVisualizations {
}
})
)
- },
+ }
},
{
funcName: "fediverse_link",
@@ -1388,8 +1389,8 @@ export default class SpecialVisualizations {
{
name: "key",
doc: "The attribute-name containing the link",
- required: true,
- },
+ required: true
+ }
],
constr(
@@ -1413,13 +1414,13 @@ export default class SpecialVisualizations {
const normalLink = new SvelteUIElement(Link, {
text: fediAccount,
href: "https://" + host + "/@" + username,
- newTab: true,
+ newTab: true
})
const loggedInContributorMastodon =
state.userRelatedState?.preferencesAsTags?.data?.[
"_mastodon_link"
- ]
+ ]
console.log(
"LoggedinContributorMastodon",
loggedInContributorMastodon
@@ -1435,12 +1436,12 @@ export default class SpecialVisualizations {
new SvelteUIElement(Link, {
href: homeHost + "/" + fediAccount,
text: Translations.t.validation.fediverse.onYourServer,
- newTab: true,
- }).SetClass("button"),
+ newTab: true
+ }).SetClass("button")
])
})
)
- },
+ }
},
{
funcName: "braced",
@@ -1450,8 +1451,8 @@ export default class SpecialVisualizations {
{
name: "text",
required: true,
- doc: "The value to show",
- },
+ doc: "The value to show"
+ }
],
constr(
state: SpecialVisualizationState,
@@ -1461,7 +1462,7 @@ export default class SpecialVisualizations {
layer: LayerConfig
): BaseUIElement {
return new FixedUiElement("{" + args[0] + "}")
- },
+ }
},
{
funcName: "tags",
@@ -1471,8 +1472,8 @@ export default class SpecialVisualizations {
{
name: "key",
defaultValue: "value",
- doc: "The key to look for the tags",
- },
+ doc: "The key to look for the tags"
+ }
],
constr(
state: SpecialVisualizationState,
@@ -1497,14 +1498,14 @@ export default class SpecialVisualizations {
} catch (e) {
return new FixedUiElement(
"Could not parse this tag: " +
- JSON.stringify(value) +
- " due to " +
- e
+ JSON.stringify(value) +
+ " due to " +
+ e
).SetClass("alert")
}
})
)
- },
+ }
},
{
funcName: "giggity",
@@ -1512,8 +1513,8 @@ export default class SpecialVisualizations {
{
name: "giggityUrl",
required: true,
- doc: "The URL of the giggity-XML",
- },
+ doc: "The URL of the giggity-XML"
+ }
],
docs: "Shows events that are happening based on a Giggity URL",
needsUrls: (args) => args[0],
@@ -1527,7 +1528,7 @@ export default class SpecialVisualizations {
): BaseUIElement {
const giggityUrl = argument[0]
return new SvelteUIElement(Giggity, { tags: tagSource, state, giggityUrl })
- },
+ }
},
{
funcName: "gps_all_tags",
@@ -1550,10 +1551,10 @@ export default class SpecialVisualizations {
new SvelteUIElement(OrientationDebugPanel, {}),
new SvelteUIElement(AllTagsPanel, {
state,
- tags,
- }),
+ tags
+ })
])
- },
+ }
},
{
funcName: "favourite_status",
@@ -1572,9 +1573,9 @@ export default class SpecialVisualizations {
tags: tagSource,
state,
layer,
- feature,
+ feature
})
- },
+ }
},
{
funcName: "favourite_icon",
@@ -1592,9 +1593,9 @@ export default class SpecialVisualizations {
tags: tagSource,
state,
layer,
- feature,
+ feature
}).SetClass("w-full h-full")
- },
+ }
},
{
funcName: "direction_indicator",
@@ -1609,7 +1610,7 @@ export default class SpecialVisualizations {
layer: LayerConfig
): BaseUIElement {
return new SvelteUIElement(DirectionIndicator, { state, feature })
- },
+ }
},
{
funcName: "qr_code",
@@ -1658,7 +1659,7 @@ export default class SpecialVisualizations {
size.setData(smallSize)
}
})
- },
+ }
},
{
funcName: "direction_absolute",
@@ -1667,8 +1668,8 @@ export default class SpecialVisualizations {
{
name: "key",
doc: "The attribute containing the degrees",
- defaultValue: "_direction:centerpoint",
- },
+ defaultValue: "_direction:centerpoint"
+ }
],
constr(
@@ -1691,7 +1692,7 @@ export default class SpecialVisualizations {
return Translations.t.general.visualFeedback.directionsAbsolute[dir]
})
)
- },
+ }
},
{
funcName: "compare_data",
@@ -1700,18 +1701,18 @@ export default class SpecialVisualizations {
{
name: "url",
required: true,
- doc: "The attribute containing the url where to fetch more data",
+ doc: "The attribute containing the url where to fetch more data"
},
{
name: "host",
required: true,
- doc: "The domain name(s) where data might be fetched from - this is needed to set the CSP. A domain must include 'https', e.g. 'https://example.com'. For multiple domains, separate them with ';'. If you don't know the possible domains, use '*'. ",
+ doc: "The domain name(s) where data might be fetched from - this is needed to set the CSP. A domain must include 'https', e.g. 'https://example.com'. For multiple domains, separate them with ';'. If you don't know the possible domains, use '*'. "
},
{
name: "readonly",
required: false,
- doc: "If 'yes', will not show 'apply'-buttons",
- },
+ doc: "If 'yes', will not show 'apply'-buttons"
+ }
],
docs: "Gives an interactive element which shows a tag comparison between the OSM-object and the upstream object. This allows to copy some or all tags into OSM",
constr(
@@ -1731,9 +1732,9 @@ export default class SpecialVisualizations {
layer,
feature,
readonly,
- externalData,
+ externalData
})
- },
+ }
},
{
funcName: "login_button",
@@ -1752,7 +1753,7 @@ export default class SpecialVisualizations {
new SvelteUIElement(LoginButton, { osmConnection: state.osmConnection }),
state.osmConnection.isLoggedIn
)
- },
+ }
},
{
funcName: "linked_data_from_website",
@@ -1761,21 +1762,21 @@ export default class SpecialVisualizations {
{
name: "key",
defaultValue: "website",
- doc: "Attempt to load ld+json from the specified URL. This can be in an embedded
-
+
Stylesheet testing grounds
This document exists to explore the style hierarchy.
-
-
Normal background
- There are a few styles, such as the
-
normal-background
- -style which is used if there is nothing special going on. Some general information, with at most
-
a link to someplace
-
Subtle
+
Normal background
+ There are a few styles, such as the
+
normal-background
+ -style which is used if there is nothing special going on. Some general information, with at most
+
a link to someplace
+
Subtle
-
Alert: something went wrong
-
Warning
-
Some important information
-
Thank you! Operation successful
-
-
-
Loading...
-
+
Alert: something went wrong
+
Warning
+
Some important information
+
Thank you! Operation successful
+
+
Loading...
Low interaction
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte
index 0ea8bae5d..940d9c19d 100644
--- a/src/UI/ThemeViewGUI.svelte
+++ b/src/UI/ThemeViewGUI.svelte
@@ -76,6 +76,7 @@
import Github from "../assets/svg/Github.svelte"
import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
import Share from "@babeard/svelte-heroicons/solid/Share"
+ import ChevronRight from "@babeard/svelte-heroicons/solid/ChevronRight"
export let state: ThemeViewState
let layout = state.layout
@@ -255,12 +256,13 @@
|
+
-
diff --git a/src/index.css b/src/index.css
index e2c7d5eb8..f6b8a58fc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -35,10 +35,11 @@
--interactive-foreground: black;
--interactive-contrast: #ff00ff;
- --button-background: #383838;
+ --button-background: #282828;
--button-background-hover: #686868;
--button-foreground: white;
- --disabled: #DBDBDB;
+ --button-border-color: #F7F7F7;
+ --disabled: #DBDBDB;
/**
* Base colour of interactive elements, mainly the 'subtle button'
@@ -191,9 +192,9 @@ button, .button {
margin: 0.25rem;
background: var(--background-color);
- border: 1px solid var(--foreground-color);
+ border: 1px solid var(--button-background-hover);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
- border-radius: 30px;
+ border-radius: 15px;
background: var(--background-color);
transition: all 200ms;
@@ -213,9 +214,14 @@ button:focus, .button:focus {
border-color: var(--interactive-contrast);
}
+.focus {
+ border: 2px solid var(--interactive-contrast);
+}
+
button.primary, .button.primary {
color: var(--button-foreground);
background-color: var(--button-background);
+ border-color: var(--button-border-color);
}
button.primary:hover:not(.disabled), .button.primary:hover:not(.disabled) {
@@ -226,6 +232,14 @@ button.disabled {
border-color: var(--disabled);
color: var(--disabled);
}
+button.disabled svg path {
+ transition: all 200ms;
+}
+button.disabled svg path {
+ fill: var(--disabled);
+ stroke: var(--disabled);
+}
+
button.primary.disabled, .button.primary.disabled {
color: var(--button-foreground);
@@ -284,12 +298,11 @@ label:not(.neutral-label):not(.button) {
/**
* Label should _contain_ the input element
*/
- border: 2px solid var(--interactive-background);
padding: 0.25rem;
padding-right: 0.5rem;
padding-left: 0.5rem;
+ margin:0.25rem;
border-radius: 0.5rem;
- background-color: var(--low-interaction-background);
width: 100%;
box-sizing: border-box;
transition: all 250ms;
@@ -300,27 +313,13 @@ label.button {
}
label:hover:not(.neutral-label) {
- background-color: var(--catch-detail-color);
- color: var(--catch-detail-foregroundcolor);
- border: 2px solid var(--interactive-contrast);
+ background-color: var(--low-interaction-background);
}
-label:not(.no-image-background):not(.neutral-label) img {
- padding: 0.25rem;
- border-radius: 0.25rem;
- background: var(--low-interaction-background);
-}
-
-label:not(.neutral-label) svg path {
- transition: all 250ms;
-}
-
-label:hover:not(.no-image-background):not(.neutral-label) svg path {
- fill: var(--catch-detail-foregroundcolor) !important;
-}
label.checked:not(.neutral-label) {
- border: 2px solid var(--foreground-color);
+ color: var(--foreground-color);
+ background-color: var(--low-interaction-background);
}
textarea {
@@ -566,20 +565,7 @@ svg.apply-fill path {
}
}
-.glowing-shadow {
- -webkit-animation: glowing 1s ease-in-out infinite alternate;
- -moz-animation: glowing 1s ease-in-out infinite alternate;
- animation: glowing 1s ease-in-out infinite alternate;
-}
-@-webkit-keyframes glowing {
- from {
- box-shadow: 0 0 20px 10px #eaaf2588, inset 0 0 0px 1px #eaaf25;
- }
- to {
- box-shadow: 0 0 20px 20px #eaaf2588, inset 0 0 5px 1px #eaaf25;
- }
-}
/************************* LEGACY MARKER - CLEANUP BELOW ********************************/