From 67b1e8322432ab85d7a094728d2bac0dc3b763b3 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Wed, 22 Jun 2022 18:52:50 +0200 Subject: [PATCH] Add extra explanation and discover more themes button, #665 --- UI/BigComponents/FullWelcomePaneWithTabs.ts | 20 +++++-------- UI/BigComponents/ThemeIntroductionPanel.ts | 31 +++++++++++++++++---- langs/en.json | 6 ++++ 3 files changed, 39 insertions(+), 18 deletions(-) diff --git a/UI/BigComponents/FullWelcomePaneWithTabs.ts b/UI/BigComponents/FullWelcomePaneWithTabs.ts index 7daa95088b..6559d83e63 100644 --- a/UI/BigComponents/FullWelcomePaneWithTabs.ts +++ b/UI/BigComponents/FullWelcomePaneWithTabs.ts @@ -23,7 +23,8 @@ import PrivacyPolicy from "./PrivacyPolicy"; export default class FullWelcomePaneWithTabs extends ScrollableFullScreen { - + public static MoreThemesTabIndex = 1; + constructor(isShown: UIEventSource, currentTab: UIEventSource, state: { @@ -45,19 +46,12 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen { ) } - private static ConstructBaseTabs(state: { - layoutToUse: LayoutConfig, - osmConnection: OsmConnection, - featureSwitchShareScreen: UIEventSource, - featureSwitchMoreQuests: UIEventSource, - featurePipeline: FeaturePipeline, - locationControl: UIEventSource, backgroundLayer: UIEventSource, filteredLayers: UIEventSource - } & UserRelatedState, - isShown: UIEventSource): + private static ConstructBaseTabs(state: { layoutToUse: LayoutConfig; osmConnection: OsmConnection; featureSwitchShareScreen: UIEventSource; featureSwitchMoreQuests: UIEventSource; featurePipeline: FeaturePipeline; locationControl: UIEventSource; backgroundLayer: UIEventSource; filteredLayers: UIEventSource } & UserRelatedState, + isShown: UIEventSource, currentTab: UIEventSource): { header: string | BaseUIElement; content: BaseUIElement }[] { const tabs: { header: string | BaseUIElement, content: BaseUIElement }[] = [ - {header: ``, content: new ThemeIntroductionPanel(isShown)}, + {header: ``, content: new ThemeIntroductionPanel(isShown, currentTab, state)}, ] @@ -107,8 +101,8 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen { locationControl: UIEventSource, backgroundLayer: UIEventSource, filteredLayers: UIEventSource } & UserRelatedState, currentTab: UIEventSource, isShown: UIEventSource) { - const tabs = FullWelcomePaneWithTabs.ConstructBaseTabs(state, isShown) - const tabsWithAboutMc = [...FullWelcomePaneWithTabs.ConstructBaseTabs(state, isShown)] + const tabs = FullWelcomePaneWithTabs.ConstructBaseTabs(state, isShown, currentTab) + const tabsWithAboutMc = [...FullWelcomePaneWithTabs.ConstructBaseTabs(state, isShown, currentTab)] tabsWithAboutMc.push({ diff --git a/UI/BigComponents/ThemeIntroductionPanel.ts b/UI/BigComponents/ThemeIntroductionPanel.ts index def06d7a91..f8f9164e07 100644 --- a/UI/BigComponents/ThemeIntroductionPanel.ts +++ b/UI/BigComponents/ThemeIntroductionPanel.ts @@ -1,4 +1,3 @@ -import State from "../../State"; import Combine from "../Base/Combine"; import LanguagePicker from "../LanguagePicker"; import Translations from "../i18n/Translations"; @@ -6,12 +5,17 @@ import Toggle from "../Input/Toggle"; import {SubtleButton} from "../Base/SubtleButton"; import {UIEventSource} from "../../Logic/UIEventSource"; import {LoginToggle} from "../Popup/LoginButton"; +import Svg from "../../Svg"; +import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"; +import {OsmConnection} from "../../Logic/Osm/OsmConnection"; +import FullWelcomePaneWithTabs from "./FullWelcomePaneWithTabs"; +import Title from "../Base/Title"; export default class ThemeIntroductionPanel extends Combine { - constructor(isShown: UIEventSource) { + constructor(isShown: UIEventSource, currentTab: UIEventSource, state: { featureSwitchMoreQuests: UIEventSource; featureSwitchAddNew: UIEventSource; featureSwitchUserbadge: UIEventSource; layoutToUse: LayoutConfig; osmConnection: OsmConnection }) { const t = Translations.t.general - const layout = State.state.layoutToUse + const layout = state.layoutToUse const languagePicker = LanguagePicker.CreateLanguagePicker(layout.language, t.pickLanguage.Clone()) @@ -30,18 +34,35 @@ export default class ThemeIntroductionPanel extends Combine { new Combine([Translations.t.general.loginWithOpenStreetMap.SetClass("text-xl font-bold"), Translations.t.general.loginOnlyNeededToEdit.Clone().SetClass("font-bold")] ).SetClass("flex flex-col"), - State.state + state ), undefined, - State.state.featureSwitchUserbadge + state.featureSwitchUserbadge ) + const hasPresets = layout.layers.some(l => l.presets?.length > 0) super([ layout.description.Clone().SetClass("blcok mb-4"), + new Combine([ + t.welcomeExplanation.general, + hasPresets ? Toggle.If( state.featureSwitchAddNew, () => t.welcomeExplanation.addNew) : undefined, + ]).SetClass("flex flex-col mt-2"), + toTheMap, loginStatus.SetClass("block"), layout.descriptionTail?.Clone().SetClass("block mt-4"), + languagePicker?.SetClass("block mt-4"), + + Toggle.If(state.featureSwitchMoreQuests, + () => new Combine([ + t.welcomeExplanation.browseOtherThemesIntro, + new SubtleButton(Svg.add_ui().SetClass("h-6"),t.welcomeExplanation.browseMoreMaps ) + .onClick(() => currentTab.setData(FullWelcomePaneWithTabs.MoreThemesTabIndex)) + .SetClass("h-12") + + ]).SetClass("flex flex-col mt-6")), + ...layout.CustomCodeSnippets() ]) diff --git a/langs/en.json b/langs/en.json index 17fcc6ba75..e5fec19ce1 100644 --- a/langs/en.json +++ b/langs/en.json @@ -253,6 +253,12 @@ "wednesday": "Wednesday" }, "welcomeBack": "You are logged in, welcome back!", + "welcomeExplanation": { + "addNew": "Tap the map to add a new POI.", + "browseMoreMaps": "Discover more maps", + "browseOtherThemesIntro": "Various thematic maps exist on MapComplete", + "general": "On this map, you can see, edit and add points of interest. Zoom around to see the POI, tap one to see or edit the information. All data is sourced from and saved to OpenStreetMap, which can be freely reused." + }, "wikipedia": { "createNewWikidata": "Create a new Wikidata item", "doSearch": "Search above to see results",