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

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 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")
+               new IndexText()
+                   
+                   
            ])
         }
 

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) {
-            clss = `class='${this.clss.join(" ")}' `;
+        if (this.clss.size > 0) {
+            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) {
-            throw "Use RemoveClass instead";
-        } else if (this.clss.indexOf(clss) < 0) {
-            this.clss.push(clss);
+        const all = clss.split(" ");
+        let recordedChange = false;
+        for (const c of all) {
+            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 (i >= 0) {
-            this.clss.splice(i, 1);
+        if (this.clss.has(clss)) {
+            this.clss.delete(clss);
             this.Update();
         }
         return this;