mapcomplete/UI/BigComponents/ThemeIntroductionPanel.ts

64 lines
2.1 KiB
TypeScript
Raw Normal View History

import State from "../../State";
import Combine from "../Base/Combine";
import LanguagePicker from "../LanguagePicker";
import Translations from "../i18n/Translations";
2021-06-12 02:58:32 +02:00
import Toggle from "../Input/Toggle";
2021-06-16 21:23:03 +02:00
import {SubtleButton} from "../Base/SubtleButton";
import Svg from "../../Svg";
import {UIEventSource} from "../../Logic/UIEventSource";
export default class ThemeIntroductionPanel extends Combine {
2021-06-16 21:23:03 +02:00
constructor(isShown: UIEventSource<boolean>) {
const layout = State.state.layoutToUse
2021-06-12 02:58:32 +02:00
2021-10-01 04:49:40 +02:00
const languagePicker = LanguagePicker.CreateLanguagePicker(layout.language, Translations.t.general.pickLanguage.Clone())
2021-06-16 21:23:03 +02:00
const toTheMap = new SubtleButton(
undefined,
2021-06-16 21:23:03 +02:00
Translations.t.general.openTheMap.Clone().SetClass("text-xl font-bold w-full text-center")
).onClick(() => {
2021-06-16 21:23:03 +02:00
isShown.setData(false)
}).SetClass("only-on-mobile")
const plzLogIn =
2021-06-16 21:23:03 +02:00
new SubtleButton(
Svg.osm_logo_ui(),
2021-06-16 21:23:03 +02:00
new Combine([Translations.t.general.loginWithOpenStreetMap
.Clone().SetClass("text-xl font-bold"),
Translations.t.general.loginOnlyNeededToEdit.Clone().SetClass("font-bold")]
).SetClass("flex flex-col text-center w-full")
2021-06-16 21:23:03 +02:00
)
.onClick(() => {
State.state.osmConnection.AttemptLogin()
});
2021-06-12 02:58:32 +02:00
2021-06-13 15:04:55 +02:00
const welcomeBack = Translations.t.general.welcomeBack.Clone();
2021-06-12 02:58:32 +02:00
const loginStatus =
new Toggle(
new Toggle(
welcomeBack,
plzLogIn,
State.state.osmConnection.isLoggedIn
),
undefined,
State.state.featureSwitchUserbadge
2021-01-07 04:50:12 +01:00
)
super([
layout.description.Clone().SetClass("blcok mb-4"),
2021-06-16 21:23:03 +02:00
toTheMap,
loginStatus.SetClass("block"),
layout.descriptionTail?.Clone().SetClass("block mt-4"),
2021-10-12 15:19:27 +02:00
languagePicker?.SetClass("block mt-4"),
...layout.CustomCodeSnippets()
])
2021-06-12 02:58:32 +02:00
this.SetClass("link-underline")
}
2020-11-24 14:36:43 +01:00
}