midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add extra explanation and discover more themes button, #665

Browse source
This commit is contained in:
pietervdvn 2022-06-22 18:52:50 +02:00
parent 12f660ac86
commit 67b1e83224
3 changed files with 39 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
UI/BigComponents/FullWelcomePaneWithTabs.ts
View file

@ -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: {
layoutToUse: LayoutConfig,
osmConnection: OsmConnection,
featureSwitchShareScreen: UIEventSource<boolean>,
featureSwitchMoreQuests: UIEventSource<boolean>,
featurePipeline: FeaturePipeline,
locationControl: UIEventSource<Loc>, backgroundLayer: UIEventSource<BaseLayer>, filteredLayers: UIEventSource<FilteredLayer[]>
} & UserRelatedState,
isShown: UIEventSource<boolean>):
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,
isShown: UIEventSource<boolean>, currentTab: UIEventSource<number>):
{ 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 tabsWithAboutMc = [...FullWelcomePaneWithTabs.ConstructBaseTabs(state, isShown)]
const tabs = FullWelcomePaneWithTabs.ConstructBaseTabs(state, isShown, currentTab)
const tabsWithAboutMc = [...FullWelcomePaneWithTabs.ConstructBaseTabs(state, isShown, currentTab)]
tabsWithAboutMc.push({

31
UI/BigComponents/ThemeIntroductionPanel.ts
View file

@ -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()
])

6
langs/en.json
View file

@ -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",