From 923b86b507dcab28aec4f4a3e69c4d901668db27 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Mon, 18 Jan 2021 02:51:42 +0100 Subject: [PATCH] Experimenting with tailwind: splitting the index intro into a separate class; adding the logo --- AllTranslationAssets.ts | 6 +++++- UI/BigComponents/IndexText.ts | 28 ++++++++++++++++++++++++++ UI/BigComponents/MoreScreen.ts | 9 +++++---- UI/UIElement.ts | 35 ++++++++++++++++++++++----------- assets/translations.json | 25 ++++++++++++++++++----- scripts/generateTranslations.ts | 6 ++++++ 6 files changed, 88 insertions(+), 21 deletions(-) create mode 100644 UI/BigComponents/IndexText.ts diff --git a/AllTranslationAssets.ts b/AllTranslationAssets.ts index ea5a0cf..7d3bae0 100644 --- a/AllTranslationAssets.ts +++ b/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":"

Welcome to MapComplete

MapComplete is an OpenStreetMap-viewer and editor, which shows you information about a specific theme.

Pick a theme below to get started.

","nl":"

Welkom bij MapComplete

MapComplete is een OpenStreetMap applicatie waar informatie over een specifiek thema bekeken en aangepast kan worden.

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":"

Welcome to MapComplete

MapComplete is an OpenStreetMap-viewer and editor, which shows you information about a specific theme.

Pick a theme below to get started.

"} ), 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"} ), diff --git a/UI/BigComponents/IndexText.ts b/UI/BigComponents/IndexText.ts new file mode 100644 index 0000000..24348cc --- /dev/null +++ b/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(`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"); + } + +} \ No newline at end of file diff --git a/UI/BigComponents/MoreScreen.ts b/UI/BigComponents/MoreScreen.ts index dc11de4..8a9c4e0 100644 --- a/UI/BigComponents/MoreScreen.ts +++ b/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(`MapComplete Logo`), - Translations.t.general.index.SetClass("sm:text-center lg:text-left block m-6 mt-8") + new IndexText() + + ]) } diff --git a/UI/UIElement.ts b/UI/UIElement.ts index 947e616..d531727 100644 --- a/UI/UIElement.ts +++ b/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 { @@ -8,7 +7,7 @@ export abstract class UIElement extends UIEventSource { public readonly id: string; public readonly _source: UIEventSource; public dumbMode = false; - private clss: string[] = [] + private clss: Set = new Set(); private style: string; private _hideIfEmpty = false; private lastInnerRender: string; @@ -127,8 +126,8 @@ export abstract class UIElement extends UIEventSource { 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 `${this.lastInnerRender}` } @@ -151,20 +150,34 @@ export abstract class UIElement extends UIEventSource { } 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; diff --git a/assets/translations.json b/assets/translations.json index 3edb7cc..609d52b 100644 --- a/assets/translations.json +++ b/assets/translations.json @@ -161,12 +161,27 @@ "de": "Laden von Daten fehlgeschlagen. Erneuter Versuch... ({count})" } }, - "general": { - "index": { - "#": "This text is shown above the theme buttons when no theme is loaded", - "en": "

Welcome to MapComplete

MapComplete is an OpenStreetMap-viewer and editor, which shows you information about a specific theme.

Pick a theme below to get started.

", - "nl": "

Welkom bij MapComplete

MapComplete is een OpenStreetMap applicatie waar informatie over een specifiek thema bekeken en aangepast kan worden.

Kies hieronder een thema om te beginnen." + "index": { + "#": "These texts are shown above the theme buttons when no theme is loaded", + "title": { + "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": "

Welcome to MapComplete

MapComplete is an OpenStreetMap-viewer and editor, which shows you information about a specific theme.

Pick a theme below to get started.

" + + }, "loginWithOpenStreetMap": { diff --git a/scripts/generateTranslations.ts b/scripts/generateTranslations.ts index 590cd08..55946aa 100644 --- a/scripts/generateTranslations.ts +++ b/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}}`;