Experimenting with tailwind: splitting the index intro into a separate class; adding the logo

AllTranslationAssets.ts

@@ -22,7 +22,11 @@ export default class AllTranslationAssets {
     ready: new Translation( {"en":"Done!","ca":"Fet.","es":"Hecho.","nl":"Klaar!","fr":"Finis!","gl":"Feito!","de":"Erledigt!"} ),
     retrying: new Translation( {"en":"Loading data failed. Trying again... ({count})","ca":"La càrrega de dades ha fallat.Tornant-ho a intentar... ({count})","es":"La carga de datos ha fallado.Volviéndolo a probar... ({count})","gl":"A carga dos datos fallou. Tentándoo de novo... ({count})","fr":"Le chargement a échoué. Essayer à nouveau... ({count})","de":"Laden von Daten fehlgeschlagen. Erneuter Versuch... ({count})"} ),
 },
-  general: {    index: new Translation( {"#":"This text is shown above the theme buttons when no theme is loaded","en":"<h1 class='text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl'><span class='block text-gray-800 xl:inline'>Welcome to</span> <span class='block text-green-600 xl:inline'>MapComplete</span></h1><p class='mt-3 text-base font-semibold text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0'>MapComplete is an OpenStreetMap-viewer and editor, which shows you information about a specific theme.</p><p class='mt-3 text-base text-green-600 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0'>Pick a theme below to get started.</p>","nl":"<h3>Welkom bij MapComplete</h3> MapComplete is een OpenStreetMap applicatie waar informatie over een specifiek thema bekeken en aangepast kan worden.<br/><br/>Kies hieronder een thema om te beginnen."} ),
+  index: {    title: new Translation( {"en":"Welcome to MapComplete","nl":"Welkom bij MapComplete"} ),
+    intro: new Translation( {"nl":"MapComplete is een OpenStreetMap applicatie waar informatie over een specifiek thema bekeken en aangepast kan worden.","en":"MapComplete is an OpenStreetMap-viewer and editor, which shows you information about a specific theme."} ),
+    pickTheme: new Translation( {"en":"Pick a theme below to get started.","nl":"Kies hieronder een thema om te beginnen."} ),
+},
+  general: {    indexTitle: new Translation( {"en":"<h1 class=''><span class='block text-gray-800 xl:inline'>Welcome to</span> <span class='block text-green-600 xl:inline'>MapComplete</span></h1><p class='mt-3 text-base font-semibold text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0'>MapComplete is an OpenStreetMap-viewer and editor, which shows you information about a specific theme.</p><p class='mt-3 text-base text-green-600 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0'>Pick a theme below to get started.</p>"} ),
     loginWithOpenStreetMap: new Translation( {"en":"Login with OpenStreetMap","ca":"Entra a OpenStreetMap","es":"Entra en OpenStreetMap","nl":"Aanmelden met OpenStreetMap","fr":"Se connecter avec OpenStreeMap","gl":"Inicia a sesión no OpenStreetMap","de":"Anmeldung mit OpenStreetMap"} ),
     welcomeBack: new Translation( {"en":"You are logged in, welcome back!","ca":"Has entrat, benvingut.","es":"Has entrado, bienvenido.","nl":"Je bent aangemeld. Welkom terug!","fr":"Vous êtes connecté. Bienvenue!","gl":"Iniciaches a sesión, benvido.","de":"Sie sind eingeloggt, willkommen zurück!"} ),
     loginToStart: new Translation( {"en":"Login to answer this question","ca":"Entra per contestar aquesta pregunta","es":"Entra para contestar esta pregunta","nl":"Meld je aan om deze vraag te beantwoorden","fr":"Connectez-vous pour répondre à cette question","gl":"Inicia a sesión para responder esta pregunta","de":"Anmelden, um diese Frage zu beantworten"} ),

UI/BigComponents/IndexText.ts

@@ -0,0 +1,28 @@
+import {UIElement} from "../UIElement";
+import Combine from "../Base/Combine";
+import Translations from "../i18n/Translations";
+import {FixedUiElement} from "../Base/FixedUiElement";
+
+export default class IndexText extends Combine {
+    constructor() {
+        super([
+            new FixedUiElement(`<img class="h-24 w-24" src="./assets/svg/logo.svg" alt="MapComplete Logo">`)
+                .AddClass("flex-none m-3"),
+
+            new Combine([
+                Translations.t.index.title
+                    .AddClass("text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl block text-gray-800 xl:inline"),
+
+                Translations.t.index.intro.AddClass(
+                    "mt-3 text-base font-semibold text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0"),
+
+                Translations.t.index.pickTheme.AddClass("mt-3 text-base text-green-600 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0")
+
+            ]).AddClass("flex flex-col sm:text-center lg:text-left m-6 mt-8")
+        ]);
+
+
+        this.AddClass("flex flex-col sm:flex-row");
+    }
+
+}

UI/BigComponents/MoreScreen.ts

@@ -11,6 +11,7 @@ import Translations from "../i18n/Translations";
 import * as personal from "../../assets/themes/personalLayout/personalLayout.json"
 import Constants from "../../Models/Constants";
 import LanguagePicker from "../LanguagePicker";
+import IndexText from "./IndexText";
 
 export default class MoreScreen extends UIElement {
     private readonly _onMainScreen: boolean;
@@ -129,11 +130,11 @@ export default class MoreScreen extends UIElement {
         if(this._onMainScreen){
            intro = new Combine([
 
-           LanguagePicker.CreateLanguagePicker(Translations.t.general.index.SupportedLanguages())
+           LanguagePicker.CreateLanguagePicker(Translations.t.index.title.SupportedLanguages())
                .SetClass("absolute top-2 right-3 dropdown-ui-element-2226"),
-            //    todo add logo above text
+               new IndexText()
-            //    new FixedUiElement(`<img class="h-24 w-24" src="./assets/svg/logo.svg" alt="MapComplete Logo">`),
+                   
-               Translations.t.general.index.SetClass("sm:text-center lg:text-left block m-6 mt-8")
+                   
            ])
         }
 

UI/UIElement.ts

@@ -1,5 +1,4 @@
 import {UIEventSource} from "../Logic/UIEventSource";
-import Constants from "../Models/Constants";
 import {Utils} from "../Utils";
 
 export abstract class UIElement extends UIEventSource<string> {
@@ -8,7 +7,7 @@ export abstract class UIElement extends UIEventSource<string> {
     public readonly id: string;
     public readonly _source: UIEventSource<any>;
     public dumbMode = false;
-    private clss: string[] = []
+    private clss: Set<string> = new Set<string>();
     private style: string;
     private _hideIfEmpty = false;
     private lastInnerRender: string;
@@ -127,8 +126,8 @@ export abstract class UIElement extends UIEventSource<string> {
             style = `style="${this.style}" `;
         }
         let clss = "";
-        if (this.clss.length > 0) {
+        if (this.clss.size > 0) {
-            clss = `class='${this.clss.join(" ")}' `;
+            clss = `class='${Array.from(this.clss).join(" ")}' `;
         }
         return `<span ${clss}${style}id='${this.id}'>${this.lastInnerRender}</span>`
     }
@@ -151,20 +150,34 @@ export abstract class UIElement extends UIEventSource<string> {
     }
 
     public SetClass(clss: string): UIElement {
+        return this.AddClass(clss);
+    }
+
+    /**
+     * Adds all the relevant classes, space seperated
+     * @param clss
+     * @constructor
+     */
+    public AddClass(clss: string) {
         this.dumbMode = false;
-        if (clss === "" && this.clss.length > 0) {
+        const all = clss.split(" ");
-            throw "Use RemoveClass instead";
+        let recordedChange = false;
-        } else if (this.clss.indexOf(clss) < 0) {
+        for (const c of all) {
-            this.clss.push(clss);
+            if (this.clss.has(clss)) {
+                continue;
+            }
+            this.clss.add(c);
+            recordedChange = true;
+        }
+        if (recordedChange) {
             this.Update();
         }
         return this;
     }
 
     public RemoveClass(clss: string): UIElement {
-        const i = this.clss.indexOf(clss);
+        if (this.clss.has(clss)) {
-        if (i >= 0) {
+            this.clss.delete(clss);
-            this.clss.splice(i, 1);
             this.Update();
         }
         return this;

assets/translations.json

@@ -161,11 +161,26 @@
       "de": "Laden von Daten fehlgeschlagen. Erneuter Versuch... ({count})"
     }
   },
-  "general": {
   "index": {
-      "#": "This text is shown above the theme buttons when no theme is loaded",
+    "#": "These texts are shown above the theme buttons when no theme is loaded",
-      "en": "<h1 class='text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl'><span class='block text-gray-800 xl:inline'>Welcome to</span> <span class='block text-green-600 xl:inline'>MapComplete</span></h1><p class='mt-3 text-base font-semibold text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0'>MapComplete is an OpenStreetMap-viewer and editor, which shows you information about a specific theme.</p><p class='mt-3 text-base text-green-600 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0'>Pick a theme below to get started.</p>",
+    "title": {
-      "nl": "<h3>Welkom bij MapComplete</h3> MapComplete is een OpenStreetMap applicatie waar informatie over een specifiek thema bekeken en aangepast kan worden.<br/><br/>Kies hieronder een thema om te beginnen."
+      "en": "Welcome to MapComplete",
+      "nl": "Welkom bij MapComplete"
+    },
+    "intro": {
+      "nl": "MapComplete is een OpenStreetMap applicatie waar informatie over een specifiek thema bekeken en aangepast kan worden.",
+      "en": "MapComplete is an OpenStreetMap-viewer and editor, which shows you information about a specific theme."
+    },
+    
+    "pickTheme": {
+      "en": "Pick a theme below to get started.",
+      "nl": "Kies hieronder een thema om te beginnen."
+    }
+  },
+  "general": {
+    "indexTitle": {
+      "en": "<h1 class=''><span class='block text-gray-800 xl:inline'>Welcome to</span> <span class='block text-green-600 xl:inline'>MapComplete</span></h1><p class='mt-3 text-base font-semibold text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0'>MapComplete is an OpenStreetMap-viewer and editor, which shows you information about a specific theme.</p><p class='mt-3 text-base text-green-600 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0'>Pick a theme below to get started.</p>"
+      
      },
 
 

scripts/generateTranslations.ts

@@ -18,6 +18,12 @@ function transformTranslation(obj: any, depth = 1) {
 
     let values = ""
     for (const key in obj) {
+        if(key === "#"){
+            continue;
+        }
+        if(key.match("^[a-zA-Z0-9_]*$") === null){
+            throw "Invalid character in key: "+key
+        }
         values += (Utils.Times((_) => "  ", depth)) + key + ": " + transformTranslation(obj[key], depth + 1) + ",\n"
     }
     return `{${values}}`;