midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Add extra explanation and discover more themes button, #665

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

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