forked from MapComplete/MapComplete
Further fixing the refactoring
This commit is contained in:
parent
3943100e54
commit
49c821268e
8 changed files with 66 additions and 86 deletions
|
|
@ -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,7 +30,7 @@ export default class FullWelcomePaneWithTabs extends ScrollableFullScreen {
|
|||
|
||||
private static GenerateContents(layoutToUse: LayoutConfig, userDetails: UIEventSource<UserDetails>) {
|
||||
|
||||
let welcome: UIElement = new ThemeIntroductionPanel();
|
||||
let welcome: BaseUIElement = new ThemeIntroductionPanel();
|
||||
if (layoutToUse.id === personal.id) {
|
||||
welcome = new PersonalLayersPanel();
|
||||
}
|
||||
|
|
@ -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, "<br/>Version " + Constants.vNumber]).SetClass("link-underline");
|
||||
}, [Locale.language]))
|
||||
content: new Combine([Translations.t.general.aboutMapcomplete.Clone(), "<br/>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)
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -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([
|
||||
`<dt class='text-lg leading-6 font-medium text-gray-900 group-hover:text-blue-800'>`,
|
||||
Translations.W(layout.title),
|
||||
Translations.WT(layout.title).Clone(),
|
||||
`</dt>`,
|
||||
`<dd class='mt-1 text-base text-gray-500 group-hover:text-blue-900 overflow-ellipsis'>`,
|
||||
description ?? "",
|
||||
description.Clone().SetClass("subtle") ?? "",
|
||||
`</dd>`,
|
||||
]), {url: linkText, newTab: false});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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<string>;
|
||||
private readonly _link: BaseUIElement;
|
||||
private readonly _linkStatus: UIEventSource<string | BaseUIElement>;
|
||||
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<string>)[] = [];
|
||||
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<boolean>(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<boolean>(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<boolean>(!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 `<span class='literal-code iframe-code-block'>
|
||||
<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>
|
||||
</span>`
|
||||
})
|
||||
);
|
||||
|
|
@ -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"), "<br/>",
|
||||
tr.editThemeDescription]),
|
||||
new Combine([tr.editThisTheme.Clone().SetClass("bold"), "<br/>",
|
||||
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<string | Translation>("");
|
||||
this.ListenTo(this._linkStatus);
|
||||
const self = this;
|
||||
this._link = new VariableUiElement(
|
||||
url.map((url) => {
|
||||
return `<input type="text" value=" ${url}" id="code-link--copyable" style="width:90%">`
|
||||
})
|
||||
const linkStatus = new UIEventSource<string | Translation>("");
|
||||
const link = new VariableUiElement(
|
||||
url.map((url) => `<input type="text" value=" ${url}" id="code-link--copyable" style="width:90%">`)
|
||||
).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")
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -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(),
|
||||
"<br/><br/>",
|
||||
loginStatus,
|
||||
layout.descriptionTail,
|
||||
layout.descriptionTail.Clone(),
|
||||
"<br/>",
|
||||
languagePicker,
|
||||
...layout.CustomCodeSnippets()
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@ export class DropDown<T> extends InputElement<T> {
|
|||
const labelHtml = document.createElement("label")
|
||||
labelHtml.appendChild(labelEl)
|
||||
labelHtml.htmlFor = el.id;
|
||||
el.appendChild(labelHtml)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -52,7 +53,10 @@ export class DropDown<T> extends InputElement<T> {
|
|||
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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
3
test.ts
3
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<LayoutConfig>(undefined)).AttachTo("maindiv")
|
||||
LanguagePicker.CreateLanguagePicker(["nl","en"]).AttachTo("maindiv")
|
||||
Loading…
Add table
Add a link
Reference in a new issue