diff --git a/UI/BigComponents/FullWelcomePaneWithTabs.ts b/UI/BigComponents/FullWelcomePaneWithTabs.ts index 29b53f56f7..754d82b84f 100644 --- a/UI/BigComponents/FullWelcomePaneWithTabs.ts +++ b/UI/BigComponents/FullWelcomePaneWithTabs.ts @@ -1,4 +1,3 @@ -import {UIElement} from "../UIElement"; import State from "../../State"; import ThemeIntroductionPanel from "./ThemeIntroductionPanel"; import * as personal from "../../assets/themes/personalLayout/personalLayout.json"; @@ -7,16 +6,15 @@ import Svg from "../../Svg"; import Translations from "../i18n/Translations"; import ShareScreen from "./ShareScreen"; import MoreScreen from "./MoreScreen"; -import {VariableUiElement} from "../Base/VariableUIElement"; import Constants from "../../Models/Constants"; import Combine from "../Base/Combine"; -import Locale from "../i18n/Locale"; import {TabbedComponent} from "../Base/TabbedComponent"; import {UIEventSource} from "../../Logic/UIEventSource"; import LayoutConfig from "../../Customizations/JSON/LayoutConfig"; import UserDetails from "../../Logic/Osm/OsmConnection"; import ScrollableFullScreen from "../Base/ScrollableFullScreen"; import BaseUIElement from "../BaseUIElement"; +import Toggle from "../Input/Toggle"; export default class FullWelcomePaneWithTabs extends ScrollableFullScreen { @@ -32,11 +30,11 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen { private static GenerateContents(layoutToUse: LayoutConfig, userDetails: UIEventSource) { - let welcome: UIElement = new ThemeIntroductionPanel(); + let welcome: BaseUIElement = new ThemeIntroductionPanel(); if (layoutToUse.id === personal.id) { welcome = new PersonalLayersPanel(); } - const tabs : {header: string | BaseUIElement, content: BaseUIElement}[] = [ + const tabs: { header: string | BaseUIElement, content: BaseUIElement }[] = [ {header: ``, content: welcome}, { header: Svg.osm_logo_img, @@ -58,19 +56,20 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen { } - tabs.push({ + const tabsWithAboutMc = [...tabs] + tabsWithAboutMc.push({ header: Svg.help, - content: new VariableUiElement(userDetails.map(userdetails => { - if (userdetails.csCount < Constants.userJourney.mapCompleteHelpUnlock) { - return "" - } - return new Combine([Translations.t.general.aboutMapcomplete, "
Version " + Constants.vNumber]).SetClass("link-underline"); - }, [Locale.language])) + content: new Combine([Translations.t.general.aboutMapcomplete.Clone(), "
Version " + Constants.vNumber]) + .SetClass("link-underline") } ); - return new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab); + return new Toggle( + new TabbedComponent(tabs, State.state.welcomeMessageOpenedTab), + new TabbedComponent(tabsWithAboutMc, State.state.welcomeMessageOpenedTab), + userDetails.map(userdetails => + userdetails.csCount < Constants.userJourney.mapCompleteHelpUnlock) + ) } - } \ No newline at end of file diff --git a/UI/BigComponents/MoreScreen.ts b/UI/BigComponents/MoreScreen.ts index f3a9c799bf..a5de7896cf 100644 --- a/UI/BigComponents/MoreScreen.ts +++ b/UI/BigComponents/MoreScreen.ts @@ -21,7 +21,7 @@ export default class MoreScreen extends Combine { private static Init(onMainScreen: boolean, state: State): BaseUIElement [] { const tr = Translations.t.general.morescreen; - let intro: BaseUIElement = tr.intro; + let intro: BaseUIElement = tr.intro.Clone(); let themeButtonStyle = "" let themeListStyle = "" if (onMainScreen) { @@ -38,7 +38,7 @@ export default class MoreScreen extends Combine { intro, MoreScreen.createOfficialThemesList(state, themeButtonStyle).SetClass(themeListStyle), MoreScreen.createUnofficialThemeList(themeButtonStyle)?.SetClass(themeListStyle), - tr.streetcomplete.SetClass("block text-base mx-10 my-3 mb-10") + tr.streetcomplete.Clone().SetClass("block text-base mx-10 my-3 mb-10") ]; } @@ -77,12 +77,12 @@ export default class MoreScreen extends Combine { return new VariableUiElement( state.osmConnection.userDetails.map(userDetails => { if (userDetails.csCount < Constants.userJourney.themeGeneratorReadOnlyUnlock) { - return new SubtleButton(null, tr.requestATheme, { + return new SubtleButton(null, tr.requestATheme.Clone(), { url: "https://github.com/pietervdvn/MapComplete/issues", newTab: true }); } - return new SubtleButton(Svg.pencil_ui(), tr.createYourOwnTheme, { + return new SubtleButton(Svg.pencil_ui(), tr.createYourOwnTheme.Clone(), { url: "./customGenerator.html", newTab: false }); @@ -146,14 +146,14 @@ export default class MoreScreen extends Combine { - let description = Translations.W(layout.shortDescription); + let description = Translations.WT(layout.shortDescription).Clone(); return new SubtleButton(layout.icon, new Combine([ `
`, - Translations.W(layout.title), + Translations.WT(layout.title).Clone(), `
`, `
`, - description ?? "", + description.Clone().SetClass("subtle") ?? "", `
`, ]), {url: linkText, newTab: false}); } diff --git a/UI/BigComponents/ShareScreen.ts b/UI/BigComponents/ShareScreen.ts index 13695b5a16..70a9ab3c54 100644 --- a/UI/BigComponents/ShareScreen.ts +++ b/UI/BigComponents/ShareScreen.ts @@ -1,4 +1,3 @@ -import {UIElement} from "../UIElement"; import {VariableUiElement} from "../Base/VariableUIElement"; import {Translation} from "../i18n/Translation"; import LayoutConfig from "../../Customizations/JSON/LayoutConfig"; @@ -15,23 +14,16 @@ import Constants from "../../Models/Constants"; import LayerConfig from "../../Customizations/JSON/LayerConfig"; import BaseUIElement from "../BaseUIElement"; -export default class ShareScreen extends UIElement { - private readonly _options: BaseUIElement; - private readonly _iframeCode: BaseUIElement; - public iframe: UIEventSource; - private readonly _link: BaseUIElement; - private readonly _linkStatus: UIEventSource; - private readonly _editLayout: BaseUIElement; +export default class ShareScreen extends Combine { constructor(layout: LayoutConfig = undefined, layoutDefinition: string = undefined) { - super(undefined) layout = layout ?? State.state?.layoutToUse?.data; layoutDefinition = layoutDefinition ?? State.state?.layoutDefinition; const tr = Translations.t.general.sharescreen; const optionCheckboxes: BaseUIElement[] = [] const optionParts: (UIEventSource)[] = []; - this.SetClass("link-underline") + function check() { return Svg.checkmark_svg().SetStyle("width: 1.5em; display:inline-block;"); } @@ -41,8 +33,8 @@ export default class ShareScreen extends UIElement { } const includeLocation = new Toggle( - new Combine([check(), tr.fsIncludeCurrentLocation]), - new Combine([nocheck(), tr.fsIncludeCurrentLocation]), + new Combine([check(), tr.fsIncludeCurrentLocation.Clone()]), + new Combine([nocheck(), tr.fsIncludeCurrentLocation.Clone()]), new UIEventSource(true) ) optionCheckboxes.push(includeLocation); @@ -91,8 +83,8 @@ export default class ShareScreen extends UIElement { const includeLayerChoices = new Toggle( - new Combine([check(), tr.fsIncludeCurrentLayers]), - new Combine([nocheck(), tr.fsIncludeCurrentLayers]), + new Combine([check(), tr.fsIncludeCurrentLayers.Clone()]), + new Combine([nocheck(), tr.fsIncludeCurrentLayers.Clone()]), new UIEventSource(true) ) optionCheckboxes.push(includeLayerChoices); @@ -121,8 +113,8 @@ export default class ShareScreen extends UIElement { for (const swtch of switches) { const checkbox = new Toggle( - new Combine([check(), Translations.W(swtch.human)]), - new Combine([nocheck(), Translations.W(swtch.human)]), + new Combine([check(), Translations.W(swtch.human.Clone())]), + new Combine([nocheck(), Translations.W(swtch.human.Clone())]), new UIEventSource(!swtch.reverse) ); optionCheckboxes.push(checkbox); @@ -144,7 +136,7 @@ export default class ShareScreen extends UIElement { } - this._options = new Combine(optionCheckboxes).SetClass("flex flex-col") + const options = new Combine(optionCheckboxes).SetClass("flex flex-col") const url = (currentLocation ?? new UIEventSource(undefined)).map(() => { const host = window.location.host; @@ -174,12 +166,12 @@ export default class ShareScreen extends UIElement { }, optionParts); - this.iframe = url.map(url => `<iframe src="${url}" width="100%" height="100%" title="${layout?.title?.txt ?? "MapComplete"} with MapComplete"></iframe>`); + const iframe = url.map(url => `<iframe src="${url}" width="100%" height="100%" title="${layout?.title?.txt ?? "MapComplete"} with MapComplete"></iframe>`); - this._iframeCode = new VariableUiElement( + const iframeCode = new VariableUiElement( url.map((url) => { return ` - <iframe src="${url}" width="100%" height="100%" title="${layout.title?.txt ?? "MapComplete"} with MapComplete"></iframe> + <iframe src="${url}" width="100%" height="100%" style="min-width: 25Opx; min-height: 250ox" title="${layout.title?.txt ?? "MapComplete"} with MapComplete"></iframe> ` }) ); @@ -187,9 +179,9 @@ export default class ShareScreen extends UIElement { - this._editLayout = new FixedUiElement(""); + let editLayout : BaseUIElement= new FixedUiElement(""); if ((layoutDefinition !== undefined && State.state?.osmConnection !== undefined)) { - this._editLayout = + editLayout = new VariableUiElement( State.state.osmConnection.userDetails.map( userDetails => { @@ -198,8 +190,8 @@ export default class ShareScreen extends UIElement { } return new SubtleButton(Svg.pencil_ui(), - new Combine([tr.editThisTheme.SetClass("bold"), "
", - tr.editThemeDescription]), + new Combine([tr.editThisTheme.Clone().SetClass("bold"), "
", + tr.editThemeDescription.Clone()]), {url: `./customGenerator.html#${State.state.layoutDefinition}`, newTab: true}); } @@ -207,13 +199,9 @@ export default class ShareScreen extends UIElement { } - this._linkStatus = new UIEventSource(""); - this.ListenTo(this._linkStatus); - const self = this; - this._link = new VariableUiElement( - url.map((url) => { - return `` - }) + const linkStatus = new UIEventSource(""); + const link = new VariableUiElement( + url.map((url) => ``) ).onClick(async () => { const shareData = { @@ -231,17 +219,17 @@ export default class ShareScreen extends UIElement { copyText.setSelectionRange(0, 99999); /*For mobile devices*/ document.execCommand("copy"); - const copied = tr.copiedToClipboard; + const copied = tr.copiedToClipboard.Clone(); copied.SetClass("thanks") - self._linkStatus.setData(copied); + linkStatus.setData(copied); } try { navigator.share(shareData) .then(() => { - const thx = tr.thanksForSharing; + const thx = tr.thanksForSharing.Clone(); thx.SetClass("thanks"); - this._linkStatus.setData(thx); + linkStatus.setData(thx); }, rejected) .catch(rejected) } catch (err) { @@ -250,22 +238,19 @@ export default class ShareScreen extends UIElement { }); - } - InnerRender(): BaseUIElement { + super ([ + editLayout, + tr.intro.Clone(), + link, + new VariableUiElement(linkStatus), + tr.addToHomeScreen.Clone(), + tr.embedIntro.Clone(), + options, + iframeCode, + ]) + this.SetClass("flex flex-col link-underline") - const tr = Translations.t.general.sharescreen; - - return new Combine([ - this._editLayout, - tr.intro, - this._link, - Translations.W(this._linkStatus.data), - tr.addToHomeScreen, - tr.embedIntro, - this._options, - this._iframeCode, - ]).SetClass("flex flex-col") } } \ No newline at end of file diff --git a/UI/BigComponents/ThemeIntroductionPanel.ts b/UI/BigComponents/ThemeIntroductionPanel.ts index f3a9073201..fc1750f96c 100644 --- a/UI/BigComponents/ThemeIntroductionPanel.ts +++ b/UI/BigComponents/ThemeIntroductionPanel.ts @@ -11,18 +11,19 @@ export default class ThemeIntroductionPanel extends VariableUiElement { const languagePicker = new VariableUiElement( - State.state.layoutToUse.map(layout => LanguagePicker.CreateLanguagePicker(layout.language, Translations.t.general.pickLanguage)) + State.state.layoutToUse.map(layout => LanguagePicker.CreateLanguagePicker(layout.language, Translations.t.general.pickLanguage.Clone())) ) ; const plzLogIn = Translations.t.general.loginWithOpenStreetMap + .Clone() .onClick(() => { State.state.osmConnection.AttemptLogin() }); - const welcomeBack = Translations.t.general.welcomeBack; + const welcomeBack = Translations.t.general.welcomeBack.Clone(); const loginStatus = new Toggle( @@ -37,10 +38,10 @@ export default class ThemeIntroductionPanel extends VariableUiElement { super(State.state.layoutToUse.map (layout => new Combine([ - layout.description, + layout.description.Clone(), "

", loginStatus, - layout.descriptionTail, + layout.descriptionTail.Clone(), "
", languagePicker, ...layout.CustomCodeSnippets() diff --git a/UI/Input/DropDown.ts b/UI/Input/DropDown.ts index 4a187ed8b1..dffecae384 100644 --- a/UI/Input/DropDown.ts +++ b/UI/Input/DropDown.ts @@ -40,6 +40,7 @@ export class DropDown extends InputElement { const labelHtml = document.createElement("label") labelHtml.appendChild(labelEl) labelHtml.htmlFor = el.id; + el.appendChild(labelHtml) } } @@ -52,7 +53,10 @@ export class DropDown extends InputElement { const option = document.createElement("option") option.value = "" + i option.appendChild(Translations.W(values[i].shown).ConstructElement()) + select.appendChild(option) } + el.appendChild(select) + select.onchange = (() => { var index = select.selectedIndex; diff --git a/UI/LanguagePicker.ts b/UI/LanguagePicker.ts index 686a62b12e..5616707dd4 100644 --- a/UI/LanguagePicker.ts +++ b/UI/LanguagePicker.ts @@ -3,7 +3,7 @@ import Locale from "./i18n/Locale"; import BaseUIElement from "./BaseUIElement"; export default class LanguagePicker { - + public static CreateLanguagePicker( languages : string[] , diff --git a/css/userbadge.css b/css/userbadge.css index 72ae5e59ce..2fe2efec16 100644 --- a/css/userbadge.css +++ b/css/userbadge.css @@ -12,16 +12,6 @@ overflow-x: hidden; } -#userbadge a { - text-decoration: none; - color: var(--foreground-color); -} - - -#userbadge form { - width: unset !important; -} - .userstats { display: flex; align-items: center; diff --git a/test.ts b/test.ts index b243a09fbc..2cf2c82ffb 100644 --- a/test.ts +++ b/test.ts @@ -1,6 +1,7 @@ import GeoLocationHandler from "./Logic/Actors/GeoLocationHandler"; import LayoutConfig from "./Customizations/JSON/LayoutConfig"; import {UIEventSource} from "./Logic/UIEventSource"; +import LanguagePicker from "./UI/LanguagePicker"; -new GeoLocationHandler(new UIEventSource<{latlng: any; accuracy: number}>(undefined), undefined, new UIEventSource(undefined)).AttachTo("maindiv") \ No newline at end of file +LanguagePicker.CreateLanguagePicker(["nl","en"]).AttachTo("maindiv") \ No newline at end of file