From 3709dc323f5afedb5e4ba1ad990b2e49417ff820 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Fri, 6 Jan 2023 03:46:10 +0100 Subject: [PATCH] Move extra actions into themeExplanationpanel, switch userinfo and help buttons, remove obsolete scrollableTriggers --- UI/BigComponents/ActionButtons.ts | 59 +++++++++++++++ UI/BigComponents/CopyrightPanel.ts | 38 +--------- UI/BigComponents/ThemeIntroductionPanel.ts | 11 ++- UI/DefaultGUI.ts | 84 ++++++++++------------ 4 files changed, 105 insertions(+), 87 deletions(-) create mode 100644 UI/BigComponents/ActionButtons.ts diff --git a/UI/BigComponents/ActionButtons.ts b/UI/BigComponents/ActionButtons.ts new file mode 100644 index 0000000000..0b3a6eeb70 --- /dev/null +++ b/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 + readonly locationControl: Store + readonly osmConnection: OsmConnection + readonly isTranslator: Store + }) { + 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") + } +} diff --git a/UI/BigComponents/CopyrightPanel.ts b/UI/BigComponents/CopyrightPanel.ts index 4e87190fb8..83dad07db5 100644 --- a/UI/BigComponents/CopyrightPanel.ts +++ b/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 }, + state: { readonly locationControl: Store }, 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")) diff --git a/UI/BigComponents/ThemeIntroductionPanel.ts b/UI/BigComponents/ThemeIntroductionPanel.ts index 09669d6933..9c117a1a9a 100644 --- a/UI/BigComponents/ThemeIntroductionPanel.ts +++ b/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 layoutToUse: LayoutConfig osmConnection: OsmConnection + currentBounds: Store + locationControl: UIEventSource + isTranslator: Store }, guistate?: { userInfoIsOpened: UIEventSource } ) { @@ -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(), ]) diff --git a/UI/DefaultGUI.ts b/UI/DefaultGUI.ts index b0f319ff89..079090e4e5 100644 --- a/UI/DefaultGUI.ts +++ b/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( - new VariableUiElement( - state.osmConnection.userDetails.map((ud) => { - if (ud?.img === undefined) { - 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)) + const userInfoMapControl = Toggle.If(state.featureSwitchUserbadge, () => { + console.log("Guistate is", guiState) + new UserInformationPanel(state, { + isOpened: guiState.userInfoIsOpened, + }) - return new LoginToggle( - mapControl, - Translations.t.general.loginWithOpenStreetMap, - state - ) - }), - Toggle.If( - state.featureSwitchExtraLinkEnabled, - () => new ExtraLinkButton(state, state.layoutToUse.extraLink) - ), - Toggle.If(state.featureSwitchWelcomeMessage, () => self.InitWelcomeMessage()), - Toggle.If(state.featureSwitchIsTesting, () => - new FixedUiElement("TESTING").SetClass("alert m-2 border-2 border-black") - ), - ]) + const mapControl = new MapControlButton( + new VariableUiElement( + state.osmConnection.userDetails.map((ud) => { + if (ud?.img === undefined) { + return Svg.person_ui().SetClass("mt-1 block") + } + return new Img(ud?.img) + }) + ).SetClass("block rounded-full overflow-hidden"), + { + dontStyle: true, + } + ).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 {