Add extra explanation and discover more themes button, #665

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<boolean>,
                 currentTab: UIEventSource<number>,
                 state: {
@@ -45,19 +46,12 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen {
         )
     }
 
-    private static ConstructBaseTabs(state: {
+    private static ConstructBaseTabs(state: { layoutToUse: LayoutConfig; osmConnection: OsmConnection; featureSwitchShareScreen: UIEventSource<boolean>; featureSwitchMoreQuests: UIEventSource<boolean>; featurePipeline: FeaturePipeline; locationControl: UIEventSource<Loc>; backgroundLayer: UIEventSource<BaseLayer>; filteredLayers: UIEventSource<FilteredLayer[]> } & UserRelatedState,
-                                         layoutToUse: LayoutConfig,
+                                     isShown: UIEventSource<boolean>, currentTab: UIEventSource<number>):
-                                         osmConnection: OsmConnection,
-                                         featureSwitchShareScreen: UIEventSource<boolean>,
-                                         featureSwitchMoreQuests: UIEventSource<boolean>,
-                                         featurePipeline: FeaturePipeline,
-                                         locationControl: UIEventSource<Loc>, backgroundLayer: UIEventSource<BaseLayer>, filteredLayers: UIEventSource<FilteredLayer[]>
-                                     } & UserRelatedState,
-                                     isShown: UIEventSource<boolean>):
         { header: string | BaseUIElement; content: BaseUIElement }[] {
 
         const tabs: { header: string | BaseUIElement, content: BaseUIElement }[] = [
-            {header: `<img src='${state.layoutToUse.icon}'>`, content: new ThemeIntroductionPanel(isShown)},
+            {header: `<img src='${state.layoutToUse.icon}'>`, content: new ThemeIntroductionPanel(isShown, currentTab,  state)},
         ]
 
 
@@ -107,8 +101,8 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen {
         locationControl: UIEventSource<Loc>, backgroundLayer: UIEventSource<BaseLayer>, filteredLayers: UIEventSource<FilteredLayer[]>
     } & UserRelatedState, currentTab: UIEventSource<number>, isShown: UIEventSource<boolean>) {
 
-        const tabs = FullWelcomePaneWithTabs.ConstructBaseTabs(state, isShown)
+        const tabs = FullWelcomePaneWithTabs.ConstructBaseTabs(state, isShown, currentTab)
-        const tabsWithAboutMc = [...FullWelcomePaneWithTabs.ConstructBaseTabs(state, isShown)]
+        const tabsWithAboutMc = [...FullWelcomePaneWithTabs.ConstructBaseTabs(state, isShown, currentTab)]
 
 
         tabsWithAboutMc.push({

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<boolean>) {
+    constructor(isShown: UIEventSource<boolean>, currentTab: UIEventSource<number>, state: { featureSwitchMoreQuests: UIEventSource<boolean>; featureSwitchAddNew: UIEventSource<boolean>; featureSwitchUserbadge: UIEventSource<boolean>; 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()
         ])
 

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 <i>points of interest</i>. 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",