More work on translations

Customizations/Layers/GrbToFix.ts

@@ -51,7 +51,7 @@ export class GrbToFix extends LayerDefinition {
                     },
                     question: "Wat is het huisnummer?"
                 }
-            ).OnlyShowIf(new Tag("fixme","*","")),
+            ),
 
             new TagRenderingOptions({
 

State.ts

@@ -24,7 +24,7 @@ export class State {
     // The singleton of the global state
     public static state: State;
     
-    public static vNumber = "0.0.7";
+    public static vNumber = "0.0.7a ¿hablas español?";
     
     // The user journey states thresholds when a new feature gets unlocked
     public static userJourney = {

UI/ShareScreen.ts

@@ -12,6 +12,8 @@ import {FilteredLayer} from "../Logic/FilteredLayer";
 import {Utils} from "../Utils";
 import {UIEventSource} from "../Logic/UIEventSource";
 import {UserDetails} from "../Logic/Osm/OsmConnection";
+import Translation from "./i18n/Translation";
+import {SubtleButton} from "./Base/SubtleButton";
 
 export class ShareScreen extends UIElement {
 
@@ -20,7 +22,7 @@ export class ShareScreen extends UIElement {
     private _options: UIElement;
     private _iframeCode: UIElement;
     private _link: UIElement;
-    private _linkStatus: UIElement;
+    private _linkStatus: UIEventSource<string | UIElement>;
     private _editLayout: UIElement;
 
     constructor() {
@@ -83,7 +85,7 @@ export class ShareScreen extends UIElement {
             }
             return "layer-"+flayer.layerDef.id+"="+flayer.isDisplayed.data
         }
-        
+
         optionParts.push(includeLayerChoices.isEnabled.map((includeLayerSelection) => {
             if (includeLayerSelection) {
                 return Utils.NoNull(State.state.filteredLayers.data.map(fLayerToParam)).join("&")
@@ -93,21 +95,22 @@ export class ShareScreen extends UIElement {
         }, State.state.filteredLayers.data.map((flayer) => flayer.isDisplayed)));
 
 
-        const switches = [{urlName: "fs-userbadge", human: "Enable the login-button"},
+        const switches = [
-            {urlName: "fs-search", human: "Enable the search bar"},
+            {urlName: "fs-userbadge", human:  tr.fsUserbadge},
-            {urlName: "fs-welcome-message", human: "Enable the welcome message"},
+            {urlName: "fs-search", human:  tr.fsSearch},
-            {urlName: "fs-layers", human: "Enable thelayer control"},
+            {urlName: "fs-welcome-message", human:  tr.fsWelcomeMessage}, 
-            {urlName: "layer-control-toggle", human: "Start with the layer control expanded", reverse:true},
+            {urlName: "fs-layers", human:  tr.fsLayers},
-            {urlName: "fs-add-new", human: "Enable the 'add new POI' button"},
+            {urlName: "layer-control-toggle", human:  tr.fsLayerControlToggle, reverse: true}, 
-            {urlName: "fs-geolocation", human: "Enable the 'geolocate-me' button"},
+            {urlName: "fs-addXXXnew", human:  tr.fsAddNew},
+            {urlName: "fs-geolocation", human:  tr.fsGeolocation}, 
         ]
 
 
         for (const swtch of switches) {
 
             const checkbox = new CheckBox(
-                new Combine([Img.checkmark, swtch.human]),
+                new Combine([Img.checkmark, Translations.W(swtch.human)]),
-                new Combine([Img.no_checkmark, swtch.human]),
+                new Combine([Img.no_checkmark, Translations.W(swtch.human)]),
                 swtch.reverse ? false : true
             );
             optionCheckboxes.push(checkbox);
@@ -171,16 +174,19 @@ export class ShareScreen extends UIElement {
                             if (userDetails.csCount <= State.userJourney.themeGeneratorUnlock) {
                                 return "";
                             }
-                            return `<h3>Edit this theme</h3>` +
+
-                                `<a target='_blank' href='./customGenerator.html#${State.state.layoutDefinition}'>Click here to edit</a>`
+                            return new SubtleButton("./assets/pencil.svg",
+                                new Combine([tr.editThisTheme.SetClass("bold"), "<br/>",
+                                    tr.editThemeDescription]),
+                                {url: `./customGenerator.html#${State.state.layoutDefinition}`, newTab: true}).Render();
 
                         }
                     ));
 
         }
 
-        const status = new UIEventSource(" ");
+        this._linkStatus = new UIEventSource<string | Translation>("");
-        this._linkStatus = new VariableUiElement(status);
+        this.ListenTo(this._linkStatus);
         const self = this;
         this._link = new VariableUiElement(
             url.map((url) => {
@@ -195,7 +201,6 @@ export class ShareScreen extends UIElement {
             }
 
             function rejected() {
-                status.setData("Copying to clipboard...")
                 var copyText = document.getElementById("code-link--copyable");
 
                 // @ts-ignore
@@ -204,13 +209,17 @@ export class ShareScreen extends UIElement {
                 copyText.setSelectionRange(0, 99999); /*For mobile devices*/
 
                 document.execCommand("copy");
-                status.setData("Copied to clipboard")
+                const copied = tr.copiedToClipboard;
+                copied.SetClass("thanks")
+                self._linkStatus.setData(copied);
             }
 
             try {
                 navigator.share(shareData)
                     .then(() => {
-                        status.setData("Thanks for sharing!")
+                        const thx = tr.thanksForSharing;
+                        thx.SetClass("thanks");
+                        this._linkStatus.setData(thx);
                     }, rejected)
                     .catch(rejected)
             } catch (err) {
@@ -226,10 +235,10 @@ export class ShareScreen extends UIElement {
         const tr = Translations.t.general.sharescreen;
 
         return new VerticalCombine([
+            this._editLayout,
             tr.intro,
             this._link,
-            this._linkStatus,
+            Translations.W(this._linkStatus.data),
-            this._editLayout,
             tr.addToHomeScreen,
             tr.embedIntro,
             this._options,

UI/i18n/Translations.ts

@@ -995,6 +995,51 @@ export default class Translations {
                     es: "<h3>Inclúyelo en tu página web</h3>Incluye este mapa en tu página web. <br/> Te animamos a que lo hagas, no hace falta que pidas permiso. <br/> Es gratis, y siempre lo será. A más gente que lo use más valioso será.",
                     fr: "<h3>Incorporer à votre website</h3>AJouter la carte à votre website. <br/>On vous en encourage - pas besoin de permission. <br/>  C'est gratuit et pour toujours. Le plus de personnes l'utilisent, le mieux ce sera.",
                     nl: "<h3>Plaats dit op je website</h3>Voeg dit kaartje toe op je eigen website.<br/>We moedigen dit zelfs aan - je hoeft geen toestemming te vragen.<br/> Het is gratis en zal dat altijd blijven. Hoe meer het gebruikt wordt, hoe waardevoller"
+                }),
+                copiedToClipboard: new T({
+                    en: "Link copied to clipboard",
+                    nl: "Link gekopieerd naar klembord"
+                }),
+                thanksForSharing: new T({
+                    en: "Thanks for sharing!",
+                    nl: "Bedankt om te delen!"
+                }),
+                editThisTheme: new T({
+                    en: "Edit this theme",
+                    nl: "Pas dit thema aan"
+                }),
+                editThemeDescription: new T({
+                    en: "Add or change questions to this map theme",
+                    nl: "Pas vragen aan of voeg vragen toe aan dit kaartthema",
+                }),
+                fsUserbadge: new T({
+                    en: "Enable the login-button",
+                    nl: "Activeer de login-knop"
+                }),
+                fsSearch: new T({
+                    en: "Enable the search bar",
+                    nl: "Activeer de zoekbalk"
+                }),
+                fsWelcomeMessage: new T({
+                    en: "Show the welcome message popup and associated tabs",
+                    nl: "Toon het welkomstbericht en de bijhorende tabbladen "
+                }),
+                fsLayers: new T({
+                    en: "Enable thelayer control",
+                    nl: "Toon de knop voor laagbediening"
+                }),
+
+                fsLayerControlToggle: new T({
+                    en: "Start with the layer control expanded",
+                    nl: "Toon de laagbediening meteen volledig"
+                }),
+                fsAddNew: new T({
+                    en: "Enable the 'add new POI' button",
+                    nl: "Activeer het toevoegen van nieuwe POI"
+                }),
+                fsGeolocation: new T({
+                    en:  "Enable the 'geolocate-me' button (mobile only)",
+                    nl: "Toon het knopje voor geolocalisatie (enkel op mobiel)"
                 })
             },
             morescreen: {
@@ -1070,7 +1115,11 @@ export default class Translations {
                 es: "No se han seleccionado etiquetas",
                 ca: "No s\'han seleccionat etiquetes"
             }),
-            customThemeIntro: new T({en: "<h3>Custom themes</h3>These are previously visited user-generated themes."})
+            customThemeIntro: new T({
+                en: "<h3>Custom themes</h3>These are previously visited user-generated themes.",
+                nl: "<h3>Onofficiële themea's</h3>Je bezocht deze thema's gemaakt door andere OpenStreetMappers eerder"
+            }),
+
         },
         favourite: {
 

index.css

@@ -94,6 +94,10 @@ form {
     color: #999;
 }
 
+.bold {
+    font-weight: bold;
+}
+
 .thanks {
     background-color: #43d904;
     font-weight: bold;