forked from MapComplete/MapComplete
Move extra actions into themeExplanationpanel, switch userinfo and help buttons, remove obsolete scrollableTriggers
This commit is contained in:
parent
8c35bfd67b
commit
3709dc323f
4 changed files with 105 additions and 87 deletions
59
UI/BigComponents/ActionButtons.ts
Normal file
59
UI/BigComponents/ActionButtons.ts
Normal file
|
|
@ -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")
|
||||
}
|
||||
}
|
||||
|
|
@ -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"))
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
])
|
||||
|
|
|
|||
|
|
@ -55,6 +55,7 @@ export default class DefaultGUI {
|
|||
public setup() {
|
||||
this.SetupUIElements()
|
||||
this.SetupMap()
|
||||
ScrollableFullScreen.ActivateCurrent()
|
||||
|
||||
if (
|
||||
this.state.layoutToUse.customCss !== undefined &&
|
||||
|
|
@ -202,9 +203,10 @@ export default class DefaultGUI {
|
|||
const guiState = this.guiState
|
||||
|
||||
const self = this
|
||||
new Combine([
|
||||
Toggle.If(state.featureSwitchUserbadge, () => {
|
||||
const userInfo = new UserInformationPanel(state, {
|
||||
|
||||
const userInfoMapControl = Toggle.If(state.featureSwitchUserbadge, () => {
|
||||
console.log("Guistate is", guiState)
|
||||
new UserInformationPanel(state, {
|
||||
isOpened: guiState.userInfoIsOpened,
|
||||
})
|
||||
|
||||
|
|
@ -220,23 +222,24 @@ export default class DefaultGUI {
|
|||
{
|
||||
dontStyle: true,
|
||||
}
|
||||
).onClick(() => guiState.userInfoIsOpened.setData(true))
|
||||
).onClick(() => {
|
||||
self.guiState.userInfoIsOpened.setData(true)
|
||||
})
|
||||
|
||||
return new LoginToggle(
|
||||
mapControl,
|
||||
Translations.t.general.loginWithOpenStreetMap,
|
||||
state
|
||||
)
|
||||
}),
|
||||
Toggle.If(
|
||||
return new LoginToggle(mapControl, Translations.t.general.loginWithOpenStreetMap, state)
|
||||
})
|
||||
const extraLink = Toggle.If(
|
||||
state.featureSwitchExtraLinkEnabled,
|
||||
() => new ExtraLinkButton(state, state.layoutToUse.extraLink)
|
||||
),
|
||||
Toggle.If(state.featureSwitchWelcomeMessage, () => self.InitWelcomeMessage()),
|
||||
Toggle.If(state.featureSwitchIsTesting, () =>
|
||||
)
|
||||
|
||||
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 {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue