Experimenting with tailwind: splitting the index intro into a separate class; adding the logo
This commit is contained in:
pietervdvn
parent
6864ba4fd6
commit
923b86b507
|
|
@ -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"} ),
|
||||
|
|
|
|||
28
UI/BigComponents/IndexText.ts
Normal file
28
UI/BigComponents/IndexText.ts
Normal file
|
|
@ -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");
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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()
|
||||
|
||||
|
||||
])
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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": "<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": {
|
||||
"#": "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": "<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": {
|
||||
|
|
|
|||
|
|
@ -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}}`;
|
||||
|
|
|
|||
Loading…
Reference in a new issue