From 01bf69a678d3c99eaf0a67360a529be9dba00606 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sun, 30 May 2021 00:17:31 +0200 Subject: [PATCH] Add grid overview to index page --- UI/Base/SubtleButton.ts | 54 ++++++------- UI/BigComponents/MoreScreen.ts | 139 +++++++++++++++++---------------- index.ts | 1 + langs/en.json | 2 +- langs/nl.json | 2 +- 5 files changed, 100 insertions(+), 98 deletions(-) diff --git a/UI/Base/SubtleButton.ts b/UI/Base/SubtleButton.ts index 472be20f7..4a2f688d9 100644 --- a/UI/Base/SubtleButton.ts +++ b/UI/Base/SubtleButton.ts @@ -4,17 +4,19 @@ import Combine from "./Combine"; import {FixedUiElement} from "./FixedUiElement"; -export class SubtleButton extends UIElement{ - private readonly image: UIElement; - private readonly message: UIElement; - private readonly linkTo: { url: string, newTab?: boolean } = undefined; +export class SubtleButton extends Combine { constructor(imageUrl: string | UIElement, message: string | UIElement, linkTo: { url: string, newTab?: boolean } = undefined) { - super(undefined); - this.linkTo = linkTo; - this.message = Translations.W(message); - if(this.message !== null){ - this.message.dumbMode = false; + super(SubtleButton.generateContent(imageUrl, message, linkTo)); + + this.SetClass("block flex p-3 my-2 bg-blue-100 rounded-lg hover:shadow-xl hover:bg-blue-200 link-no-underline") + + } + + private static generateContent(imageUrl: string | UIElement, messageT: string | UIElement, linkTo: { url: string, newTab?: boolean } = undefined): (UIElement | string)[] { + const message = Translations.W(messageT); + if (message !== null) { + message.dumbMode = false; } let img; if ((imageUrl ?? "") === "") { @@ -25,35 +27,31 @@ export class SubtleButton extends UIElement{ img = imageUrl; } img.SetClass("block flex items-center justify-center h-11 w-11 flex-shrink0") - this.image = new Combine([img]) + const image = new Combine([img]) .SetClass("flex-shrink-0"); - - - } - InnerRender(): string { - if(this.message !== null && this.message.IsEmpty()){ + if (message !== null && message.IsEmpty()) { // Message == null: special case to force empty text - return ""; + return []; } - if(this.linkTo != undefined){ - return new Combine([ - ``, - this.image, - `
`, - this.message, + if (linkTo != undefined) { + return [ + ``, + image, + `
`, + message, `
`, `` - ]).Render(); + ]; } - return new Combine([ - this.image, - this.message, - ]).SetClass("block flex p-3 my-2 bg-blue-100 rounded-lg hover:shadow-xl hover:bg-blue-200 link-no-underline") - .Render(); + return [ + image, + message, + ]; + } diff --git a/UI/BigComponents/MoreScreen.ts b/UI/BigComponents/MoreScreen.ts index 687d2f218..f5b4eaecd 100644 --- a/UI/BigComponents/MoreScreen.ts +++ b/UI/BigComponents/MoreScreen.ts @@ -25,12 +25,78 @@ export default class MoreScreen extends UIElement { this.ListenTo(State.state.installedThemes); } + InnerRender(): string { + + const tr = Translations.t.general.morescreen; + + const els: UIElement[] = [] + + const themeButtons: UIElement[] = [] + + for (const layout of AllKnownLayouts.layoutsList) { + if (layout.id === personal.id) { + if (State.state.osmConnection.userDetails.data.csCount < Constants.userJourney.personalLayoutUnlock) { + continue; + } + } + themeButtons.push(this.createLinkButton(layout)); + } + + + els.push(new VariableUiElement( + State.state.osmConnection.userDetails.map(userDetails => { + if (userDetails.csCount < Constants.userJourney.themeGeneratorReadOnlyUnlock) { + return new SubtleButton(null, tr.requestATheme, {url:"https://github.com/pietervdvn/MapComplete/issues", newTab: true}).Render(); + } + return new SubtleButton(Svg.pencil_ui(), tr.createYourOwnTheme, { + url: "./customGenerator.html", + newTab: false + }).Render(); + }) + )); + + els.push(new Combine(themeButtons)) + + + const customThemesNames = State.state.installedThemes.data ?? []; + + if (customThemesNames.length > 0) { + els.push(Translations.t.general.customThemeIntro) + + for (const installed of State.state.installedThemes.data) { + els.push(this.createLinkButton(installed.layout, installed.definition)); + } + } + + let intro: UIElement = tr.intro; + const themeButtonsElement = new Combine(els) + + if (this._onMainScreen) { + intro = new Combine([ + LanguagePicker.CreateLanguagePicker(Translations.t.index.title.SupportedLanguages()) + .SetClass("absolute top-2 right-3"), + new IndexText() + ]) + themeButtons.map(e => e?.SetClass("h-32 min-h-32 max-h-32 overflow-ellipsis overflow-hidden")) + themeButtonsElement.SetClass("md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-g4 gap-4") + } + + + + this._component = new Combine([ + intro, + themeButtonsElement, + tr.streetcomplete.SetClass("block text-base mx-10 my-3 mb-10") + ]); + return this._component.Render(); + } + private createLinkButton(layout: LayoutConfig, customThemeDefinition: string = undefined) { if (layout === undefined) { return undefined; } - if(layout.id === undefined){ - console.error("ID is undefined for layout",layout); + if (layout.id === undefined) { + console.error("ID is undefined for layout", layout); return undefined; } if (layout.hideFromOverview) { @@ -49,10 +115,10 @@ export default class MoreScreen extends UIElement { // Path starts with a '/' and contains everything, e.g. '/dir/dir/page.html' path = path.substr(0, path.lastIndexOf("/")); // Path will now contain '/dir/dir', or empty string in case of nothing - if(path === ""){ + if (path === "") { path = "." } - + const params = `z=${currentLocation.zoom ?? 1}&lat=${currentLocation.lat ?? 0}&lon=${currentLocation.lon ?? 0}` let linkText = `${path}/${layout.id.toLowerCase()}.html?${params}` @@ -72,73 +138,10 @@ export default class MoreScreen extends UIElement { `
`, Translations.W(layout.title), `
`, - `
`, + `
`, description ?? "", `
`, ]), {url: linkText, newTab: false}); } - InnerRender(): string { - - const tr = Translations.t.general.morescreen; - - const els: UIElement[] = [] - - const linkButton: UIElement[] = [] - - for (const layout of AllKnownLayouts.layoutsList) { - if (layout.id === personal.id) { - if (State.state.osmConnection.userDetails.data.csCount < Constants.userJourney.personalLayoutUnlock) { - continue; - } - } - linkButton.push(this.createLinkButton(layout)); - } - - - els.push(new VariableUiElement( - State.state.osmConnection.userDetails.map(userDetails => { - if (userDetails.csCount < Constants.userJourney.themeGeneratorReadOnlyUnlock) { - return tr.requestATheme.SetClass("block text-base mx-10 my-3").Render(); - } - return new SubtleButton(Svg.pencil_ui(), tr.createYourOwnTheme, { - url: "./customGenerator.html", - newTab: false - }).Render(); - }) - )); - - els.push(new Combine(linkButton)) - - - const customThemesNames = State.state.installedThemes.data ?? []; - - if (customThemesNames.length > 0) { - els.push(Translations.t.general.customThemeIntro) - - for (const installed of State.state.installedThemes.data) { - els.push(this.createLinkButton(installed.layout, installed.definition)); - } - } - - let intro : UIElement= tr.intro; - if(this._onMainScreen){ - intro = new Combine([ - - LanguagePicker.CreateLanguagePicker(Translations.t.index.title.SupportedLanguages()) - .SetClass("absolute top-2 right-3 dropdown-ui-element-2226"), - new IndexText() - - - ]) - } - - this._component = new Combine([ - intro, - new Combine(els), - tr.streetcomplete.SetClass("block text-base mx-10 my-3 mb-10") - ]); - return this._component.Render(); - } - } \ No newline at end of file diff --git a/index.ts b/index.ts index ed7728501..47cf7ebb0 100644 --- a/index.ts +++ b/index.ts @@ -149,6 +149,7 @@ if (layoutFromBase64.startsWith("http")) { InitUiElements.InitAll(layoutToUse, layoutFromBase64, testing, defaultLayout); } else { // We fall through: no theme loaded: just show an overview of layouts + new FixedUiElement("").AttachTo("centermessage") State.state = new State(undefined); new Combine([new MoreScreen(true), Translations.t.general.aboutMapcomplete.SetClass("link-underline") diff --git a/langs/en.json b/langs/en.json index cc6c3d665..47d533a44 100644 --- a/langs/en.json +++ b/langs/en.json @@ -102,7 +102,7 @@ }, "morescreen": { "intro": "

More thematic maps?

Do you enjoy collecting geodata?
There are more themes available.", - "requestATheme": "If you want a custom-built quest, request it here.", + "requestATheme": "If you want a custom-built quest, request it in the issue tracker", "streetcomplete": "Another, similar application is StreetComplete.", "createYourOwnTheme": "Create your own MapComplete theme from scratch" }, diff --git a/langs/nl.json b/langs/nl.json index e7550d9fe..986938190 100644 --- a/langs/nl.json +++ b/langs/nl.json @@ -102,7 +102,7 @@ }, "morescreen": { "intro": "

Meer thematische kaarten

Vind je het leuk om geodata te verzamelen?
Hier vind je meer kaartthemas.", - "requestATheme": "Wil je een eigen kaartthema, vraag dit hier aan.", + "requestATheme": "Wil je een eigen kaartthema, vraag dit in de issue tracker.", "streetcomplete": "Een andere, gelijkaardige Android-applicatie is StreetComplete.", "createYourOwnTheme": "Maak je eigen MapComplete-kaart" },