midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Further fixing the refactoring

Browse source
This commit is contained in:
pietervdvn 2021-06-13 15:04:55 +02:00
parent 3943100e54
commit 49c821268e
8 changed files with 66 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
UI/BigComponents/FullWelcomePaneWithTabs.ts
View file

@ -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<UserDetails>) {
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: `<img src='${layoutToUse.icon}'>`, 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, "<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)
)
}
}

14
UI/BigComponents/MoreScreen.ts
View file

@ -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});
}

83
UI/BigComponents/ShareScreen.ts
View file

@ -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 => `&lt;iframe src="${url}" width="100%" height="100%" title="${layout?.title?.txt ?? "MapComplete"} with MapComplete"&gt;&lt;/iframe&gt`);
const iframe = url.map(url => `&lt;iframe src="${url}" width="100%" height="100%" title="${layout?.title?.txt ?? "MapComplete"} with MapComplete"&gt;&lt;/iframe&gt`);
this._iframeCode = new VariableUiElement(
const iframeCode = new VariableUiElement(
url.map((url) => {
return `<span class='literal-code iframe-code-block'>
&lt;iframe src="${url}" width="100%" height="100%" title="${layout.title?.txt ?? "MapComplete"} with MapComplete"&gt;&lt;/iframe&gt
&lt;iframe src="${url}" width="100%" height="100%" style="min-width: 25Opx; min-height: 250ox" title="${layout.title?.txt ?? "MapComplete"} with MapComplete"&gt;&lt;/iframe&gt
</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")
}
}

9
UI/BigComponents/ThemeIntroductionPanel.ts
View file

@ -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()

4
UI/Input/DropDown.ts
View file

@ -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;

2
UI/LanguagePicker.ts
View file

@ -3,7 +3,7 @@ import Locale from "./i18n/Locale";
import BaseUIElement from "./BaseUIElement";
export default class LanguagePicker {
public static CreateLanguagePicker(
languages : string[] ,

10
css/userbadge.css
View file

@ -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
View file

@ -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")