diff --git a/assets/layers/questions/questions.json b/assets/layers/questions/questions.json index 6badc023d..6a43e6689 100644 --- a/assets/layers/questions/questions.json +++ b/assets/layers/questions/questions.json @@ -1583,6 +1583,7 @@ }, { "id": "last_edit", + "labels": ["added_by_default"], "description": "Gives some metainfo about the last edit and who did edit it - rendering only", "condition": { "and": [ @@ -1622,6 +1623,7 @@ }, { "id": "just_created", + "labels": ["added_by_default"], "description": "This element shows a 'thank you' that the contributor has recently created this element", "classes": "rounded-xl thanks", "mappings": [ @@ -2609,6 +2611,34 @@ } } ] + }, + { + "id": "qr_code", + "labels": ["added_by_default"], + "classes": "flex items-center gap-x-2", + "render": { + "special": { + "type": "qr_code" + }, + "after": { + "en": "Scan this code to open this location on another device", + "nl": "Scan deze code om deze locatie op een ander apparaat te zien" + } + } + }, + { + "id": "share", + "labels": ["added_by_default"], + "metacondition": "_supports_sharing=yes", + "render": { + "special": { + "type": "share_link", + "text": { + "en": "Share this location", + "nl": "Deel deze locatie" + } + } + } } ] } diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index 836ab5ba9..f977d2bc5 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -1248,10 +1248,6 @@ video { width: 16rem; } -.w-14 { - width: 3.5rem; -} - .w-auto { width: auto; } diff --git a/src/Models/ThemeConfig/Conversion/PrepareLayer.ts b/src/Models/ThemeConfig/Conversion/PrepareLayer.ts index 917c98873..bff690459 100644 --- a/src/Models/ThemeConfig/Conversion/PrepareLayer.ts +++ b/src/Models/ThemeConfig/Conversion/PrepareLayer.ts @@ -601,6 +601,7 @@ export class AddEditingElements extends DesugaringStep { } json = { ...json } json.tagRenderings = [...(json.tagRenderings ?? [])] + const allIds = new Set(json.tagRenderings.map((tr) => tr["id"])) const specialVisualisations = ValidationUtils.getAllSpecialVisualisations( json.tagRenderings ) @@ -658,11 +659,12 @@ export class AddEditingElements extends DesugaringStep { }) } - if (!usedSpecialFunctions.has("qr_code")) { - json.tagRenderings.push({ - id: "qr_code", - render: { "*": "{qr_code()}" }, - }) + if (!allIds.has("qr_code")) { + json.tagRenderings.push(this._desugaring.tagRenderings.get("qr_code")) + } + + if (!allIds.has("share")) { + json.tagRenderings.push(this._desugaring.tagRenderings.get("share")) } if (!usedSpecialFunctions.has("all_tags")) { diff --git a/src/UI/Base/ShareButton.svelte b/src/UI/Base/ShareButton.svelte index 86256843b..21cc00785 100644 --- a/src/UI/Base/ShareButton.svelte +++ b/src/UI/Base/ShareButton.svelte @@ -1,6 +1,4 @@ - +{#if isIcon} + +{:else} + +{/if} diff --git a/src/UI/Popup/ShareLinkViz.ts b/src/UI/Popup/ShareLinkViz.ts index 1233e22b4..2a054c6c4 100644 --- a/src/UI/Popup/ShareLinkViz.ts +++ b/src/UI/Popup/ShareLinkViz.ts @@ -14,6 +14,10 @@ export class ShareLinkViz implements SpecialVisualization { name: "url", doc: "The url to share (default: current URL)", }, + { + name: "text", + doc: "The text to show on the button. If none is given, will act as a titleIcon", + }, ] needsUrls = [] @@ -22,6 +26,8 @@ export class ShareLinkViz implements SpecialVisualization { tagSource: UIEventSource>, args: string[] ) { + const text = args[1] + const generateShareData = () => { const title = state?.layout?.title?.txt ?? "MapComplete" @@ -46,6 +52,6 @@ export class ShareLinkViz implements SpecialVisualization { } } - return new SvelteUIElement(ShareButton, { generateShareData }) + return new SvelteUIElement(ShareButton, { generateShareData, text }) } } diff --git a/src/UI/SpecialVisualizations.ts b/src/UI/SpecialVisualizations.ts index 4b9a9fe30..916e3070e 100644 --- a/src/UI/SpecialVisualizations.ts +++ b/src/UI/SpecialVisualizations.ts @@ -1578,8 +1578,15 @@ export default class SpecialVisualizations { return undefined } const [lon, lat] = GeoOperations.centerpointCoordinates(feature) + const includeLayout = window.location.pathname + .split("/") + .at(-1) + .startsWith("theme") + const layout = includeLayout + ? "layout=" + state.layout.id + "&" + : "" const url = - `${window.location.protocol}//${window.location.host}${window.location.pathname}?lat=${lat}&lon=${lon}&z=15` + + `${window.location.protocol}//${window.location.host}${window.location.pathname}?${layout}lat=${lat}&lon=${lon}&z=15` + `#${id}` return new Img(new Qr(url).toImageElement(75)).SetStyle( "width: 75px"