forked from MapComplete/MapComplete
Auto-formatting
This commit is contained in:
parent
9e000d521f
commit
fed4cff878
26 changed files with 360 additions and 304 deletions
|
|
@ -1,20 +1,20 @@
|
|||
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
|
||||
import Translations from "../i18n/Translations";
|
||||
import {OsmConnection} from "../../Logic/Osm/OsmConnection";
|
||||
import Combine from "../Base/Combine";
|
||||
import {SubtleButton} from "../Base/SubtleButton";
|
||||
import Svg from "../../Svg";
|
||||
import {VariableUiElement} from "../Base/VariableUIElement";
|
||||
import Img from "../Base/Img";
|
||||
import {FixedUiElement} from "../Base/FixedUiElement";
|
||||
import Link from "../Base/Link";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import Loc from "../../Models/Loc";
|
||||
import BaseUIElement from "../BaseUIElement";
|
||||
import ScrollableFullScreen from "../Base/ScrollableFullScreen"
|
||||
import Translations from "../i18n/Translations"
|
||||
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
|
||||
import Combine from "../Base/Combine"
|
||||
import { SubtleButton } from "../Base/SubtleButton"
|
||||
import Svg from "../../Svg"
|
||||
import { VariableUiElement } from "../Base/VariableUIElement"
|
||||
import Img from "../Base/Img"
|
||||
import { FixedUiElement } from "../Base/FixedUiElement"
|
||||
import Link from "../Base/Link"
|
||||
import { UIEventSource } from "../../Logic/UIEventSource"
|
||||
import Loc from "../../Models/Loc"
|
||||
import BaseUIElement from "../BaseUIElement"
|
||||
import Showdown from "showdown"
|
||||
import LanguagePicker from "../LanguagePicker";
|
||||
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig";
|
||||
import Constants from "../../Models/Constants";
|
||||
import LanguagePicker from "../LanguagePicker"
|
||||
import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig"
|
||||
import Constants from "../../Models/Constants"
|
||||
|
||||
export class ImportViewerLinks extends VariableUiElement {
|
||||
constructor(osmConnection: OsmConnection) {
|
||||
|
|
@ -37,22 +37,25 @@ export class ImportViewerLinks extends VariableUiElement {
|
|||
}
|
||||
|
||||
class UserInformationMainPanel extends Combine {
|
||||
constructor(osmConnection: OsmConnection, locationControl: UIEventSource<Loc>, layout: LayoutConfig) {
|
||||
const t = Translations.t.userinfo;
|
||||
constructor(
|
||||
osmConnection: OsmConnection,
|
||||
locationControl: UIEventSource<Loc>,
|
||||
layout: LayoutConfig
|
||||
) {
|
||||
const t = Translations.t.userinfo
|
||||
const imgSize = "h-6 w-6"
|
||||
const ud = osmConnection.userDetails;
|
||||
const ud = osmConnection.userDetails
|
||||
super([
|
||||
|
||||
new VariableUiElement(ud.map(ud => {
|
||||
|
||||
new VariableUiElement(
|
||||
ud.map((ud) => {
|
||||
if (!ud?.loggedIn) {
|
||||
// Not logged in
|
||||
return new SubtleButton(
|
||||
Svg.login_svg(), "Login", {imgSize}
|
||||
).onClick(osmConnection.AttemptLogin)
|
||||
return new SubtleButton(Svg.login_svg(), "Login", { imgSize }).onClick(
|
||||
osmConnection.AttemptLogin
|
||||
)
|
||||
}
|
||||
|
||||
let img: Img = Svg.person_svg();
|
||||
let img: Img = Svg.person_svg()
|
||||
if (ud.img !== undefined) {
|
||||
img = new Img(ud.img)
|
||||
}
|
||||
|
|
@ -64,69 +67,95 @@ class UserInformationMainPanel extends Combine {
|
|||
Svg.pencil_svg().SetClass("h-4 w-4"),
|
||||
"https://www.openstreetmap.org/profile/edit",
|
||||
true
|
||||
).SetClass("absolute block bg-subtle rounded-full p-2 bottom-2 right-2 w-min self-end")
|
||||
).SetClass(
|
||||
"absolute block bg-subtle rounded-full p-2 bottom-2 right-2 w-min self-end"
|
||||
)
|
||||
|
||||
description = new Combine([
|
||||
new FixedUiElement(new Showdown.Converter().makeHtml(ud.description)).SetClass("link-underline"),
|
||||
editButton
|
||||
new FixedUiElement(
|
||||
new Showdown.Converter().makeHtml(ud.description)
|
||||
).SetClass("link-underline"),
|
||||
editButton,
|
||||
]).SetClass("relative w-full m-2")
|
||||
|
||||
} else {
|
||||
description = new Combine([
|
||||
t.noDescription, new SubtleButton(Svg.pencil_svg(), t.noDescriptionCallToAction, {imgSize})
|
||||
t.noDescription,
|
||||
new SubtleButton(Svg.pencil_svg(), t.noDescriptionCallToAction, {
|
||||
imgSize,
|
||||
}),
|
||||
]).SetClass("w-full m-2")
|
||||
}
|
||||
|
||||
let panToHome: BaseUIElement;
|
||||
let panToHome: BaseUIElement
|
||||
if (ud.home) {
|
||||
panToHome = new SubtleButton(Svg.home_svg(), t.moveToHome, {imgSize})
|
||||
.onClick(() => {
|
||||
const home = ud?.home
|
||||
if (home === undefined) {
|
||||
return
|
||||
}
|
||||
locationControl.setData({...home, zoom: 16})
|
||||
}
|
||||
);
|
||||
panToHome = new SubtleButton(Svg.home_svg(), t.moveToHome, {
|
||||
imgSize,
|
||||
}).onClick(() => {
|
||||
const home = ud?.home
|
||||
if (home === undefined) {
|
||||
return
|
||||
}
|
||||
locationControl.setData({ ...home, zoom: 16 })
|
||||
})
|
||||
}
|
||||
|
||||
return new Combine([
|
||||
new Combine([img, description]).SetClass("flex border border-black rounded-md"),
|
||||
new LanguagePicker(layout.language, Translations.t.general.pickLanguage.Clone()),
|
||||
new Combine([img, description]).SetClass(
|
||||
"flex border border-black rounded-md"
|
||||
),
|
||||
new LanguagePicker(
|
||||
layout.language,
|
||||
Translations.t.general.pickLanguage.Clone()
|
||||
),
|
||||
|
||||
new SubtleButton(Svg.envelope_svg(), new Combine([t.gotoInbox,
|
||||
ud.unreadMessages == 0 ? undefined : t.newMessages.SetClass("alert block")
|
||||
new SubtleButton(
|
||||
Svg.envelope_svg(),
|
||||
new Combine([
|
||||
t.gotoInbox,
|
||||
ud.unreadMessages == 0
|
||||
? undefined
|
||||
: t.newMessages.SetClass("alert block"),
|
||||
]),
|
||||
{imgSize, url: `${ud.backend}/messages/inbox`, newTab: true}),
|
||||
new SubtleButton(Svg.gear_svg(), t.gotoSettings,
|
||||
{imgSize, url: `${ud.backend}/user/${encodeURIComponent(ud.name)}/account`, newTab: true}),
|
||||
{ imgSize, url: `${ud.backend}/messages/inbox`, newTab: true }
|
||||
),
|
||||
new SubtleButton(Svg.gear_svg(), t.gotoSettings, {
|
||||
imgSize,
|
||||
url: `${ud.backend}/user/${encodeURIComponent(ud.name)}/account`,
|
||||
newTab: true,
|
||||
}),
|
||||
panToHome,
|
||||
new ImportViewerLinks(osmConnection),
|
||||
new SubtleButton(Svg.logout_svg(), Translations.t.general.logout, {imgSize}).onClick(osmConnection.LogOut)
|
||||
|
||||
new SubtleButton(Svg.logout_svg(), Translations.t.general.logout, {
|
||||
imgSize,
|
||||
}).onClick(osmConnection.LogOut),
|
||||
])
|
||||
}
|
||||
)).SetClass("flex flex-col"),
|
||||
|
||||
|
||||
]);
|
||||
})
|
||||
).SetClass("flex flex-col"),
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
export default class UserInformationPanel extends ScrollableFullScreen {
|
||||
constructor(state: {
|
||||
layoutToUse: LayoutConfig;
|
||||
osmConnection: OsmConnection, locationControl: UIEventSource<Loc>
|
||||
layoutToUse: LayoutConfig
|
||||
osmConnection: OsmConnection
|
||||
locationControl: UIEventSource<Loc>
|
||||
}) {
|
||||
const t = Translations.t.general;
|
||||
const t = Translations.t.general
|
||||
super(
|
||||
() => {
|
||||
return new VariableUiElement(state.osmConnection.userDetails.map(ud => "Welcome " + ud.name))
|
||||
return new VariableUiElement(
|
||||
state.osmConnection.userDetails.map((ud) => "Welcome " + ud.name)
|
||||
)
|
||||
},
|
||||
() => {
|
||||
return new UserInformationMainPanel(state.osmConnection, state.locationControl, state.layoutToUse)
|
||||
return new UserInformationMainPanel(
|
||||
state.osmConnection,
|
||||
state.locationControl,
|
||||
state.layoutToUse
|
||||
)
|
||||
},
|
||||
"userinfo"
|
||||
);
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue