Move extra actions into themeExplanationpanel, switch userinfo and help buttons, remove obsolete scrollableTriggers

UI/BigComponents/ActionButtons.ts

@@ -0,0 +1,59 @@
+import Combine from "../Base/Combine"
+import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
+import { Store, UIEventSource } from "../../Logic/UIEventSource"
+import { BBox } from "../../Logic/BBox"
+import Loc from "../../Models/Loc"
+import { OsmConnection } from "../../Logic/Osm/OsmConnection"
+import Translations from "../i18n/Translations"
+import { SubtleButton } from "../Base/SubtleButton"
+import Svg from "../../Svg"
+import { Utils } from "../../Utils"
+import { MapillaryLink } from "./MapillaryLink"
+import TranslatorsPanel from "./TranslatorsPanel"
+import { OpenIdEditor, OpenJosm } from "./CopyrightPanel"
+
+export class ActionButtons extends Combine {
+    constructor(state: {
+        readonly layoutToUse: LayoutConfig
+        readonly currentBounds: Store<BBox>
+        readonly locationControl: Store<Loc>
+        readonly osmConnection: OsmConnection
+        readonly isTranslator: Store<boolean>
+    }) {
+        const imgSize = "h-6 w-6"
+        const iconStyle = "height: 1.5rem; width: 1.5rem"
+        const t = Translations.t.general.attribution
+
+        super([
+            new SubtleButton(Svg.liberapay_ui(), t.donate, {
+                url: "https://liberapay.com/pietervdvn/",
+                newTab: true,
+                imgSize,
+            }),
+            new SubtleButton(Svg.bug_ui(), t.openIssueTracker, {
+                url: "https://github.com/pietervdvn/MapComplete/issues",
+                newTab: true,
+                imgSize,
+            }),
+            new SubtleButton(
+                Svg.statistics_ui(),
+                t.openOsmcha.Subs({ theme: state.layoutToUse.title }),
+                {
+                    url: Utils.OsmChaLinkFor(31, state.layoutToUse.id),
+                    newTab: true,
+                    imgSize,
+                }
+            ),
+            new SubtleButton(Svg.mastodon_ui(), t.followOnMastodon, {
+                url: "https://en.osm.town/@MapComplete",
+                newTab: true,
+                imgSize,
+            }),
+            new OpenIdEditor(state, iconStyle),
+            new MapillaryLink(state, iconStyle),
+            new OpenJosm(state, iconStyle).SetClass("hidden-on-mobile"),
+            new TranslatorsPanel(state, iconStyle),
+        ])
+        this.SetClass("block w-full link-no-underline")
+    }
+}

UI/BigComponents/CopyrightPanel.ts

@@ -23,13 +23,10 @@ import Constants from "../../Models/Constants"
 import ContributorCount from "../../Logic/ContributorCount"
 import Img from "../Base/Img"
 import { TypedTranslation } from "../i18n/Translation"
-import TranslatorsPanel from "./TranslatorsPanel"
-import { MapillaryLink } from "./MapillaryLink"
-import FullWelcomePaneWithTabs from "./FullWelcomePaneWithTabs"
 
 export class OpenIdEditor extends VariableUiElement {
     constructor(
-        state: { locationControl: UIEventSource<Loc> },
+        state: { readonly locationControl: Store<Loc> },
         iconStyle?: string,
         objectId?: string
     ) {
@@ -125,38 +122,6 @@ export default class CopyrightPanel extends Combine {
     }) {
         const t = Translations.t.general.attribution
         const layoutToUse = state.layoutToUse
-        const imgSize = "h-6 w-6"
-        const iconStyle = "height: 1.5rem; width: 1.5rem"
-        const actionButtons = [
-            new SubtleButton(Svg.liberapay_ui(), t.donate, {
-                url: "https://liberapay.com/pietervdvn/",
-                newTab: true,
-                imgSize,
-            }),
-            new SubtleButton(Svg.bug_ui(), t.openIssueTracker, {
-                url: "https://github.com/pietervdvn/MapComplete/issues",
-                newTab: true,
-                imgSize,
-            }),
-            new SubtleButton(
-                Svg.statistics_ui(),
-                t.openOsmcha.Subs({ theme: state.layoutToUse.title }),
-                {
-                    url: Utils.OsmChaLinkFor(31, state.layoutToUse.id),
-                    newTab: true,
-                    imgSize,
-                }
-            ),
-            new SubtleButton(Svg.mastodon_ui(), t.followOnMastodon, {
-                url: "https://en.osm.town/@MapComplete",
-                newTab: true,
-                imgSize,
-            }),
-            new OpenIdEditor(state, iconStyle),
-            new MapillaryLink(state, iconStyle),
-            new OpenJosm(state, iconStyle),
-            new TranslatorsPanel(state, iconStyle),
-        ]
 
         const iconAttributions = layoutToUse.usedImages.map(CopyrightPanel.IconAttribution)
 
@@ -213,7 +178,6 @@ export default class CopyrightPanel extends Combine {
                 CopyrightPanel.CodeContributors(contributors, t.codeContributionsBy),
                 CopyrightPanel.CodeContributors(translators, t.translatedBy),
                 new FixedUiElement("MapComplete " + Constants.vNumber).SetClass("font-bold"),
-                new Combine(actionButtons).SetClass("block w-full link-no-underline"),
                 new Title(t.iconAttribution.title, 3),
                 ...iconAttributions,
             ].map((e) => e?.SetClass("mt-4"))

UI/BigComponents/ThemeIntroductionPanel.ts

@@ -3,13 +3,16 @@ import LanguagePicker from "../LanguagePicker"
 import Translations from "../i18n/Translations"
 import Toggle from "../Input/Toggle"
 import { SubtleButton } from "../Base/SubtleButton"
-import { UIEventSource } from "../../Logic/UIEventSource"
+import { Store, 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 LoggedInUserIndicator from "../LoggedInUserIndicator"
+import { ActionButtons } from "./ActionButtons"
+import { BBox } from "../../Logic/BBox"
+import Loc from "../../Models/Loc"
 
 export default class ThemeIntroductionPanel extends Combine {
     constructor(
@@ -21,6 +24,9 @@ export default class ThemeIntroductionPanel extends Combine {
             featureSwitchUserbadge: UIEventSource<boolean>
             layoutToUse: LayoutConfig
             osmConnection: OsmConnection
+            currentBounds: Store<BBox>
+            locationControl: UIEventSource<Loc>
+            isTranslator: Store<boolean>
         },
         guistate?: { userInfoIsOpened: UIEventSource<boolean> }
     ) {
@@ -74,7 +80,7 @@ export default class ThemeIntroductionPanel extends Combine {
             loginStatus.SetClass("block mt-6 pt-2 md:border-t-2 border-dotted border-gray-400"),
             layout.descriptionTail?.Clone().SetClass("block mt-4"),
 
-            languagePicker?.SetClass("block mt-4"),
+            languagePicker?.SetClass("block mt-4 pb-8 border-b-2 border-dotted border-gray-400"),
 
             Toggle.If(state.featureSwitchMoreQuests, () =>
                 new Combine([
@@ -89,6 +95,7 @@ export default class ThemeIntroductionPanel extends Combine {
                         .SetClass("h-12"),
                 ]).SetClass("flex flex-col mt-6")
             ),
+            new ActionButtons(state),
 
             ...layout.CustomCodeSnippets(),
         ])

UI/DefaultGUI.ts

@@ -55,6 +55,7 @@ export default class DefaultGUI {
     public setup() {
         this.SetupUIElements()
         this.SetupMap()
+        ScrollableFullScreen.ActivateCurrent()
 
         if (
             this.state.layoutToUse.customCss !== undefined &&
@@ -202,41 +203,43 @@ export default class DefaultGUI {
         const guiState = this.guiState
 
         const self = this
-        new Combine([
-            Toggle.If(state.featureSwitchUserbadge, () => {
-                const userInfo = new UserInformationPanel(state, {
-                    isOpened: guiState.userInfoIsOpened,
-                })
 
-                const mapControl = new MapControlButton(
+        const userInfoMapControl = Toggle.If(state.featureSwitchUserbadge, () => {
-                    new VariableUiElement(
+            console.log("Guistate is", guiState)
-                        state.osmConnection.userDetails.map((ud) => {
+            new UserInformationPanel(state, {
-                            if (ud?.img === undefined) {
+                isOpened: guiState.userInfoIsOpened,
-                                return Svg.person_ui().SetClass("mt-1 block")
+            })
-                            }
-                            return new Img(ud?.img)
-                        })
-                    ).SetClass("block rounded-full overflow-hidden"),
-                    {
-                        dontStyle: true,
-                    }
-                ).onClick(() => guiState.userInfoIsOpened.setData(true))
 
-                return new LoginToggle(
+            const mapControl = new MapControlButton(
-                    mapControl,
+                new VariableUiElement(
-                    Translations.t.general.loginWithOpenStreetMap,
+                    state.osmConnection.userDetails.map((ud) => {
-                    state
+                        if (ud?.img === undefined) {
-                )
+                            return Svg.person_ui().SetClass("mt-1 block")
-            }),
+                        }
-            Toggle.If(
+                        return new Img(ud?.img)
-                state.featureSwitchExtraLinkEnabled,
+                    })
-                () => new ExtraLinkButton(state, state.layoutToUse.extraLink)
+                ).SetClass("block rounded-full overflow-hidden"),
-            ),
+                {
-            Toggle.If(state.featureSwitchWelcomeMessage, () => self.InitWelcomeMessage()),
+                    dontStyle: true,
-            Toggle.If(state.featureSwitchIsTesting, () =>
+                }
-                new FixedUiElement("TESTING").SetClass("alert m-2 border-2 border-black")
+            ).onClick(() => {
-            ),
+                self.guiState.userInfoIsOpened.setData(true)
-        ])
+            })
+
+            return new LoginToggle(mapControl, Translations.t.general.loginWithOpenStreetMap, state)
+        })
+        const extraLink = Toggle.If(
+            state.featureSwitchExtraLinkEnabled,
+            () => new ExtraLinkButton(state, state.layoutToUse.extraLink)
+        )
+
+        const welcomeMessageMapControl = Toggle.If(state.featureSwitchWelcomeMessage, () =>
+            self.InitWelcomeMessage()
+        )
+        const testingBadge = Toggle.If(state.featureSwitchIsTesting, () =>
+            new FixedUiElement("TESTING").SetClass("alert m-2 border-2 border-black")
+        )
+        new Combine([welcomeMessageMapControl, userInfoMapControl, extraLink, testingBadge])
             .SetClass("flex flex-col")
             .AttachTo("top-left")
 
@@ -274,21 +277,6 @@ export default class DefaultGUI {
 
         new CenterMessageBox(state).AttachTo("centermessage")
         document?.getElementById("centermessage")?.classList?.add("pointer-events-none")
-
-        // We have to ping the welcomeMessageIsOpened and other isOpened-stuff to activate the FullScreenMessage if needed
-        for (const state of guiState.allFullScreenStates) {
-            if (state.data) {
-                state.ping()
-            }
-        }
-
-        /**
-         * At last, if the map moves or an element is selected, we close all the panels just as well
-         */
-
-        state.selectedElement.addCallbackAndRunD((_) => {
-            guiState.allFullScreenStates.forEach((s) => s.setData(false))
-        })
     }
 
     private InitWelcomeMessage(): BaseUIElement {