midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Further butchering the UI framework

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-10 14:05:26 +02:00
parent 6415e195d1
commit d5d90afc74
10 changed files with 125 additions and 100 deletions
Download patch file Download diff file Expand all files Collapse all files

1
UI/BigComponents/IndexText.ts
View file

@ -1,4 +1,3 @@
import {UIElement} from "../UIElement";
import Combine from "../Base/Combine";
import Translations from "../i18n/Translations";
import {FixedUiElement} from "../Base/FixedUiElement";

11
UI/BigComponents/LayerControlPanel.ts
View file

@ -1,4 +1,3 @@
import {UIElement} from "../UIElement";
import State from "../../State";
import BackgroundSelector from "./BackgroundSelector";
import LayerSelection from "./LayerSelection";
@ -7,6 +6,7 @@ import {FixedUiElement} from "../Base/FixedUiElement";
import ScrollableFullScreen from "../Base/ScrollableFullScreen";
import Translations from "../i18n/Translations";
import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
export default class LayerControlPanel extends ScrollableFullScreen {
@ -14,13 +14,12 @@ export default class LayerControlPanel extends ScrollableFullScreen {
super(LayerControlPanel.GenTitle, LayerControlPanel.GeneratePanel, "layers", isShown);
}
private static GenTitle(): UIElement {
const title = Translations.t.general.layerSelection.title.SetClass("text-2xl break-words font-bold p-2")
return title.Clone();
private static GenTitle():BaseUIElement {
return Translations.t.general.layerSelection.title.Clone().SetClass("text-2xl break-words font-bold p-2")
}
private static GeneratePanel() {
let layerControlPanel: UIElement = new FixedUiElement("");
private static GeneratePanel() : BaseUIElement {
let layerControlPanel: BaseUIElement = new FixedUiElement("");
if (State.state.layoutToUse.data.enableBackgroundLayerSelection) {
layerControlPanel = new BackgroundSelector();
layerControlPanel.SetStyle("margin:1em");

18
UI/BigComponents/SearchAndGo.ts
View file

@ -9,11 +9,13 @@ import {TextField} from "../Input/TextField";
import {Geocoding} from "../../Logic/Osm/Geocoding";
import Translations from "../i18n/Translations";
import Hash from "../../Logic/Web/Hash";
import Combine from "../Base/Combine";
import BaseUIElement from "../BaseUIElement";
export default class SearchAndGo extends UIElement {
private _placeholder = new UIEventSource<Translation>(Translations.t.general.search.search)
private _searchField = new TextField({
private readonly _placeholder = new UIEventSource<Translation>(Translations.t.general.search.search)
private readonly _searchField = new TextField({
placeholder: new VariableUiElement(
this._placeholder.map(uiElement => uiElement.InnerRender(), [Locale.language])
),
@ -21,8 +23,9 @@ export default class SearchAndGo extends UIElement {
}
);
private _foundEntries = new UIEventSource([]);
private _goButton = Svg.search_ui().SetClass('w-8 h-8 full-rounded border-black float-right');
private readonly _foundEntries = new UIEventSource([]);
private readonly _goButton = Svg.search_ui().SetClass('w-8 h-8 full-rounded border-black float-right');
private readonly _element: Combine;
constructor() {
super(undefined);
@ -36,12 +39,13 @@ export default class SearchAndGo extends UIElement {
this._goButton.onClick(function () {
self.RunSearch();
});
this._element = new Combine([this._searchField, this._goButton])
}
InnerRender(): string {
return this._searchField.Render() +
this._goButton.Render();
InnerRender(): BaseUIElement
{
return this._element
}

34
UI/BigComponents/ShareScreen.ts
View file

@ -13,14 +13,15 @@ import {FixedUiElement} from "../Base/FixedUiElement";
import Translations from "../i18n/Translations";
import Constants from "../../Models/Constants";
import LayerConfig from "../../Customizations/JSON/LayerConfig";
import BaseUIElement from "../BaseUIElement";
export default class ShareScreen extends UIElement {
private readonly _options: UIElement;
private readonly _iframeCode: UIElement;
private readonly _options: BaseUIElement;
private readonly _iframeCode: BaseUIElement;
public iframe: UIEventSource<string>;
private readonly _link: UIElement;
private readonly _linkStatus: UIEventSource<string | UIElement>;
private readonly _editLayout: UIElement;
private readonly _link: BaseUIElement;
private readonly _linkStatus: UIEventSource<string | BaseUIElement>;
private readonly _editLayout: BaseUIElement;
constructor(layout: LayoutConfig = undefined, layoutDefinition: string = undefined) {
super(undefined)
@ -28,7 +29,7 @@ export default class ShareScreen extends UIElement {
layoutDefinition = layoutDefinition ?? State.state?.layoutDefinition;
const tr = Translations.t.general.sharescreen;
const optionCheckboxes: UIElement[] = []
const optionCheckboxes: BaseUIElement[] = []
const optionParts: (UIEventSource<string>)[] = [];
this.SetClass("link-underline")
function check() {
@ -42,7 +43,7 @@ export default class ShareScreen extends UIElement {
const includeLocation = new Toggle(
new Combine([check(), tr.fsIncludeCurrentLocation]),
new Combine([nocheck(), tr.fsIncludeCurrentLocation]),
true
new UIEventSource<boolean>(true)
)
optionCheckboxes.push(includeLocation);
@ -72,12 +73,12 @@ export default class ShareScreen extends UIElement {
const currentLayer: UIEventSource<{ id: string, name: string, layer: any }> = State.state.backgroundLayer;
const currentBackground = new VariableUiElement(currentLayer.map(layer => {
return tr.fsIncludeCurrentBackgroundMap.Subs({name: layer?.name ?? ""}).Render();
return tr.fsIncludeCurrentBackgroundMap.Subs({name: layer?.name ?? ""});
}));
const includeCurrentBackground = new Toggle(
new Combine([check(), currentBackground]),
new Combine([nocheck(), currentBackground]),
true
new UIEventSource<boolean>(true)
)
optionCheckboxes.push(includeCurrentBackground);
optionParts.push(includeCurrentBackground.isEnabled.map((includeBG) => {
@ -92,7 +93,7 @@ export default class ShareScreen extends UIElement {
const includeLayerChoices = new Toggle(
new Combine([check(), tr.fsIncludeCurrentLayers]),
new Combine([nocheck(), tr.fsIncludeCurrentLayers]),
true
new UIEventSource<boolean>(true)
)
optionCheckboxes.push(includeLayerChoices);
@ -121,7 +122,8 @@ export default class ShareScreen extends UIElement {
const checkbox = new Toggle(
new Combine([check(), Translations.W(swtch.human)]),
new Combine([nocheck(), Translations.W(swtch.human)]), !swtch.reverse
new Combine([nocheck(), Translations.W(swtch.human)]),
new UIEventSource<boolean>(!swtch.reverse)
);
optionCheckboxes.push(checkbox);
optionParts.push(checkbox.isEnabled.map((isEn) => {
@ -198,7 +200,7 @@ export default class ShareScreen extends UIElement {
return new SubtleButton(Svg.pencil_ui(),
new Combine([tr.editThisTheme.SetClass("bold"), "<br/>",
tr.editThemeDescription]),
{url: `./customGenerator.html#${State.state.layoutDefinition}`, newTab: true}).Render();
{url: `./customGenerator.html#${State.state.layoutDefinition}`, newTab: true});
}
));
@ -215,9 +217,9 @@ export default class ShareScreen extends UIElement {
).onClick(async () => {
const shareData = {
title: Translations.W(layout.title)?.InnerRenderAsString() ?? "",
text: Translations.W(layout.description)?.InnerRenderAsString() ?? "",
url: self._link.data,
title: Translations.W(layout.title)?.ConstructElement().innerText ?? "",
text: Translations.W(layout.description)?.ConstructElement().innerText ?? "",
url: url.data,
}
function rejected() {
@ -250,7 +252,7 @@ export default class ShareScreen extends UIElement {
}
InnerRender(): UIElement {
InnerRender(): BaseUIElement {
const tr = Translations.t.general.sharescreen;