Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Finish refactoring

Browse source
This commit is contained in:
Pieter Vander Vennet 2020-11-06 04:02:53 +01:00
parent dc1dde6c3d
commit b764371cce
55 changed files with 76 additions and 3201 deletions
Download patch file Download diff file Expand all files Collapse all files

16
UI/CustomGenerator/AllLayersPanel.ts
View file

@ -11,9 +11,10 @@ import {MultiInput} from "../Input/MultiInput";
import TagRenderingPanel from "./TagRenderingPanel";
import SingleSetting from "./SingleSetting";
import {VariableUiElement} from "../Base/VariableUIElement";
import {FromJSON} from "../../Customizations/JSON/FromJSON";
import AvailableBaseLayers from "../../Logic/AvailableBaseLayers";
import {DropDown} from "../Input/DropDown";
import TagRenderingConfig from "../../Customizations/JSON/TagRenderingConfig";
import Svg from "../../Svg";
export default class AllLayersPanel extends UIElement {
@ -67,27 +68,26 @@ export default class AllLayersPanel extends UIElement {
const layer = config.layers[i];
if (typeof layer !== "string") {
try {
const iconTagRendering = FromJSON.TagRendering(layer.icon, "icon");
const icon = iconTagRendering.GetContent({"id": "node/-1"}).txt;
const iconTagRendering = new TagRenderingConfig(layer.icon, "icon")
const icon = iconTagRendering.GetRenderValue({"id": "node/-1"}).txt;
return `<img src='${icon}'>`
} catch (e) {
return "<img src='./assets/bug.svg'>"
return Svg.bug_img
// Nothing to do here
}
}
return "<img src='./assets/help.svg'>"
return Svg.help_img;
})),
content: new LayerPanelWithPreview(this._config, this.languages, i, userDetails)
});
}
tabs.push({
header: "<img src='./assets/layersAdd.svg'>",
header: Svg.layersAdd_img,
content: new Combine([
"<h2>Layer editor</h2>",
"In this tab page, you can add and edit the layers of the theme. Click the layers above or add a new layer to get started.",
new SubtleButton(
"./assets/layersAdd.svg",
Svg.layersAdd_ui(),
"Add a new layer"
).onClick(() => {
self._config.data.layers.push(GenerateEmpty.createEmptyLayer())

9
UI/CustomGenerator/CustomGeneratorPanel.ts
View file

@ -16,6 +16,7 @@ import {FixedUiElement} from "../Base/FixedUiElement";
import SavePanel from "./SavePanel";
import {LocalStorageSource} from "../../Logic/Web/LocalStorageSource";
import HelpText from "./HelpText";
import Svg from "../../Svg";
export default class CustomGeneratorPanel extends UIElement {
@ -66,7 +67,7 @@ export default class CustomGeneratorPanel extends UIElement {
]).SetClass("preview")
this.mainPanel = new TabbedComponent([
{
header: "<img src='./assets/gear.svg'>",
header: Svg.gear_img,
content:
new PageSplit(
generalSettings.SetStyle("width: 50vw;"),
@ -77,16 +78,16 @@ export default class CustomGeneratorPanel extends UIElement {
)
},
{
header: "<img src='./assets/layers.svg'>",
header: Svg.layers_img,
content: new AllLayersPanel(es, languages, userDetails)
},
{
header: "<img src='./assets/floppy.svg'>",
header: Svg.floppy_img,
content: new SavePanel(this.connection, es, chronic)
},
{
header: "<img src='./assets/share.svg'>",
header:Svg.share_img,
content: new SharePanel(es, liveUrl, userDetails)
}
])

8
UI/CustomGenerator/GenerateEmpty.ts
View file

@ -14,7 +14,7 @@ export class GenerateEmpty {
tagRenderings: [],
hideUnderlayingFeaturesMinPercentage: 0,
icon: {
render: "./assets/bug.svg"
render: "./assets/svg/bug.svg"
},
width: {
render: "8"
@ -36,7 +36,7 @@ export class GenerateEmpty {
description: {},
language: [],
maintainer: "",
icon: "./assets/bug.svg",
icon: "./assets/svg/bug.svg",
version: "0",
startLat: 0,
startLon: 0,
@ -58,7 +58,7 @@ export class GenerateEmpty {
description: {"en": "A layout for testing"},
language: ["en"],
maintainer: "Pieter Vander Vennet",
icon: "./assets/bug.svg",
icon: "./assets/svg/bug.svg",
version: "0",
startLat: 0,
startLon: 0,
@ -72,7 +72,7 @@ export class GenerateEmpty {
overpassTags: {and: ["highway=residential"]},
title: {},
description: {"en": "Some Description"},
icon: {render: {en: "./assets/pencil.svg"}},
icon: {render: {en: "./assets/svg/pencil.svg"}},
width: {render: {en: "5"}},
tagRenderings: [{
render: {"en":"Test Rendering"}

3
UI/CustomGenerator/HelpText.ts
View file

@ -4,6 +4,7 @@ import {VariableUiElement} from "../Base/VariableUIElement";
import {SubtleButton} from "../Base/SubtleButton";
import Combine from "../Base/Combine";
import SingleSetting from "./SingleSetting";
import Svg from "../../Svg";
export default class HelpText extends UIElement {
@ -12,7 +13,7 @@ export default class HelpText extends UIElement {
constructor(currentSetting: UIEventSource<SingleSetting<any>>) {
super();
this.returnButton = new SubtleButton("./assets/close.svg",
this.returnButton = new SubtleButton(Svg.close_ui(),
new VariableUiElement(
currentSetting.map(currentSetting => {
if (currentSetting === undefined) {

9
UI/CustomGenerator/LayerPanel.ts
View file

@ -20,8 +20,7 @@ import {UserDetails} from "../../Logic/Osm/OsmConnection";
import State from "../../State";
import {FixedUiElement} from "../Base/FixedUiElement";
import ValidatedTextField from "../Input/ValidatedTextField";
import {TagRendering} from "../Popup/TagRendering";
import {Utils} from "../../Utils";
import Svg from "../../Svg";
/**
* Shows the configuration for a single layer
@ -51,7 +50,7 @@ export default class LayerPanel extends UIElement {
this.mapRendering = this.setupRenderOptions(config, languages, index, currentlySelected, userDetails);
const actualDeleteButton = new SubtleButton(
"./assets/delete.svg",
Svg.delete_icon_ui(),
"Yes, delete this layer"
).onClick(() => {
config.data.layers.splice(index, 1);
@ -63,7 +62,7 @@ export default class LayerPanel extends UIElement {
[
"<h3>Confirm layer deletion</h3>",
new SubtleButton(
"./assets/close.svg",
Svg.close_ui(),
"No, don't delete"
),
"<span class='alert'>Deleting a layer can not be undone!</span>",
@ -71,7 +70,7 @@ export default class LayerPanel extends UIElement {
]
),
new SubtleButton(
"./assets/delete.svg",
Svg.delete_icon_ui(),
"Remove this layer"
)
)

3
UI/CustomGenerator/SavePanel.ts
View file

@ -7,6 +7,7 @@ import {OsmConnection} from "../../Logic/Osm/OsmConnection";
import {FixedUiElement} from "../Base/FixedUiElement";
import {TextField} from "../Input/TextField";
import {SubtleButton} from "../Base/SubtleButton";
import Svg from "../../Svg";
export default class SavePanel extends UIElement {
private json: UIElement;
@ -39,7 +40,7 @@ export default class SavePanel extends UIElement {
textAreaRows: 20
});
this.json = jsonTextField;
this.loadFromJson = new SubtleButton("./assets/reload.svg", "<b>Load the JSON file below</b>")
this.loadFromJson = new SubtleButton(Svg.reload_ui(), "<b>Load the JSON file below</b>")
.onClick(() => {
try{
const json = jsonTextField.GetValue().data;

3
UI/Image/DeleteImage.ts
View file

@ -5,6 +5,7 @@ import CheckBox from "../Input/CheckBox";
import Combine from "../Base/Combine";
import State from "../../State";
import {Tag} from "../../Logic/Tags";
import Svg from "../../Svg";
export default class DeleteImage extends UIElement {
@ -35,7 +36,7 @@ export default class DeleteImage extends UIElement {
cancelButton
]).SetStyle("display:flex;flex-direction:column;"),
"<img src='./assets/delete.svg' style='width:1.5em;'>"
Svg.delete_icon_ui().SetStyle('width:1.5em;display:block;padding-left: calc(50% - 0.75em);')
)
}

3
UI/Image/ImageUploadFlow.ts
View file

@ -8,6 +8,7 @@ import {Imgur} from "../../Logic/Web/Imgur";
import {DropDown} from "../Input/DropDown";
import {Tag} from "../../Logic/Tags";
import Translations from "../i18n/Translations";
import Svg from "../../Svg";
export class ImageUploadFlow extends UIElement {
private readonly _licensePicker: UIElement;
@ -96,7 +97,7 @@ export class ImageUploadFlow extends UIElement {
]);
const label = new Combine([
"<img style='width: 36px;height: 36px;padding: 0.1em;margin-top: 5px;border-radius: 0;float: left;' src='./assets/camera-plus.svg'/> ",
Svg.camera_plus_ui().SetStyle("width: 36px;height: 36px;padding: 0.1em;margin-top: 5px;border-radius: 0;float: left;display:block"),
Translations.t.image.addPicture
.SetStyle("width:max-content;font-size: 28px;" +
"font-weight: bold;" +

12
UI/Image/SlideShow.ts
View file

@ -27,7 +27,8 @@ export class SlideShow extends UIElement {
const self = this;
this._prev = new Combine([
"<div class='vspan'></div>",
Svg.arrow_left_smooth_img]).SetStyle("prev-button")
Svg.arrow_left_smooth_img])
.SetClass("prev-button")
.onClick(() => {
const current = self._currentSlide.data;
self.MoveTo(current - 1);
@ -64,11 +65,12 @@ export class SlideShow extends UIElement {
}
slides += " <div class=\"slide " + state + "\">" + embeddedElement.Render() + "</div>\n";
}
return new Combine(["<div class='image-slideshow'>"
, this._prev
return new Combine([
this._prev
, "<div class='slides'>", slides, "</div>"
, this._next
, "</div>"]).Render();
, this._next])
.SetClass('image-slideshow')
.Render();
}
public MoveTo(index: number) {

2
UI/Img.ts
View file

@ -12,7 +12,5 @@ export class Img {
static AsImageElement(source: string): string{
return `<img src="${Img.AsData(source)}">`;
}
static readonly checkmark = `<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 7.28571L10.8261 15L23 3" stroke="black" stroke-width="4" stroke-linejoin="round"/></svg>`;
static readonly no_checkmark = `<svg width="26" height="18" viewBox="0 0 26 18" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>`;
}

9
UI/Input/AndOrTagInput.ts
View file

@ -7,7 +7,6 @@ import CheckBox from "./CheckBox";
import {AndOrTagConfigJson} from "../../Customizations/JSON/TagConfigJson";
import {MultiTagInput} from "./MultiTagInput";
import Svg from "../../Svg";
import {Img} from "../Img";
class AndOrConfig implements AndOrTagConfigJson {
public and: (string | AndOrTagConfigJson)[] = undefined;
@ -32,13 +31,13 @@ export default class AndOrTagInput extends InputElement<AndOrTagConfigJson> {
super();
const self = this;
this._isAndButton = new CheckBox(
new SubtleButton(Img.AsData(Svg.ampersand), null).SetClass("small-button"),
new SubtleButton(Img.AsData(Svg.or), null).SetClass("small-button"),
new SubtleButton(Svg.ampersand_ui(), null).SetClass("small-button"),
new SubtleButton(Svg.or_ui(), null).SetClass("small-button"),
this._isAnd);
this._addBlock =
new SubtleButton(Img.AsData(Svg.addSmall), "Add an and/or-expression")
new SubtleButton(Svg.addSmall_ui(), "Add an and/or-expression")
.SetClass("small-button")
.onClick(() => {self.createNewBlock()});
@ -65,7 +64,7 @@ export default class AndOrTagInput extends InputElement<AndOrTagConfigJson> {
private createDeleteButton(elementId: string): UIElement {
const self = this;
return new SubtleButton(Img.AsData(Svg.delete_icon), null).SetClass("small-button")
return new SubtleButton(Svg.delete_icon_ui(), null).SetClass("small-button")
.onClick(() => {
for (let i = 0; i < self._subAndOrs.length; i++) {
if (self._subAndOrs[i].id === elementId) {

6
UI/Input/MultiInput.ts
View file

@ -3,9 +3,7 @@ import {UIEventSource} from "../../Logic/UIEventSource";
import {UIElement} from "../UIElement";
import Combine from "../Base/Combine";
import {SubtleButton} from "../Base/SubtleButton";
import {FixedUiElement} from "../Base/FixedUiElement";
import Svg from "../../Svg";
import {Img} from "../Img";
export class MultiInput<T> extends InputElement<T[]> {
@ -30,7 +28,7 @@ export class MultiInput<T> extends InputElement<T[]> {
this.ListenTo(value.map((latest : T[]) => latest.length));
this._options = options ?? {};
this.addTag = new SubtleButton(Img.AsData(Svg.addSmall), addAElement)
this.addTag = new SubtleButton(Svg.addSmall_ui(), addAElement)
.SetClass("small-button")
.onClick(() => {
this.IsSelected.setData(true);
@ -72,7 +70,7 @@ export class MultiInput<T> extends InputElement<T[]> {
this.inputELements.push(input);
input.IsSelected.addCallback(() => this.UpdateIsSelected());
const moveUpBtn = new FixedUiElement(Img.AsData(Svg.up))
const moveUpBtn = Svg.up_ui()
.onClick(() => {
const v = self._value.data[i];
self._value.data[i] = self._value.data[i - 1];

3
UI/MoreScreen.ts
View file

@ -79,8 +79,7 @@ export class MoreScreen extends UIElement {
if (userDetails.csCount < State.userJourney.themeGeneratorReadOnlyUnlock) {
return tr.requestATheme.Render();
}
return new SubtleButton(
Img.AsData(Svg.pencil), tr.createYourOwnTheme, {
return new SubtleButton(Svg.pencil_ui(), tr.createYourOwnTheme, {
url: "./customGenerator.html",
newTab: false
}).Render();

18
UI/ShareScreen.ts
View file

@ -34,8 +34,8 @@ export class ShareScreen extends UIElement {
const optionParts: (UIEventSource<string>)[] = [];
const includeLocation = new CheckBox(
new Combine([Img.checkmark, tr.fsIncludeCurrentLocation]),
new Combine([Img.no_checkmark, tr.fsIncludeCurrentLocation]),
new Combine([Svg.checkmark, tr.fsIncludeCurrentLocation]),
new Combine([Svg.no_checkmark, tr.fsIncludeCurrentLocation]),
true
)
optionCheckboxes.push(includeLocation);
@ -69,8 +69,8 @@ export class ShareScreen extends UIElement {
return tr.fsIncludeCurrentBackgroundMap.Subs({name: layer?.name ?? ""}).Render();
}));
const includeCurrentBackground = new CheckBox(
new Combine([Img.checkmark, currentBackground]),
new Combine([Img.no_checkmark, currentBackground]),
new Combine([Svg.checkmark, currentBackground]),
new Combine([Svg.no_checkmark, currentBackground]),
true
)
optionCheckboxes.push(includeCurrentBackground);
@ -84,8 +84,8 @@ export class ShareScreen extends UIElement {
const includeLayerChoices = new CheckBox(
new Combine([Img.checkmark, tr.fsIncludeCurrentLayers]),
new Combine([Img.no_checkmark, tr.fsIncludeCurrentLayers]),
new Combine([Svg.checkmark, tr.fsIncludeCurrentLayers]),
new Combine([Svg.no_checkmark, tr.fsIncludeCurrentLayers]),
true
)
optionCheckboxes.push(includeLayerChoices);
@ -114,8 +114,8 @@ export class ShareScreen extends UIElement {
for (const swtch of switches) {
const checkbox = new CheckBox(
new Combine([Img.checkmark, Translations.W(swtch.human)]),
new Combine([Img.no_checkmark, Translations.W(swtch.human)]), !swtch.reverse
new Combine([Svg.checkmark, Translations.W(swtch.human)]),
new Combine([Svg.no_checkmark, Translations.W(swtch.human)]), !swtch.reverse
);
optionCheckboxes.push(checkbox);
optionParts.push(checkbox.isEnabled.map((isEn) => {
@ -187,7 +187,7 @@ export class ShareScreen extends UIElement {
return "";
}
return new SubtleButton(Img.AsData(Svg.pencil),
return new SubtleButton(Svg.pencil_ui(),
new Combine([tr.editThisTheme.SetClass("bold"), "<br/>",
tr.editThemeDescription]),
{url: `./customGenerator.html#${State.state.layoutDefinition}`, newTab: true}).Render();

8
UI/SimpleAddUI.ts
View file

@ -30,7 +30,7 @@ export class SimpleAddUI extends UIElement {
private confirmButton: UIElement = undefined;
private openLayerControl: UIElement;
private cancelButton: UIElement;
private goToInboxButton: UIElement = new SubtleButton(Img.AsData(Svg.envelope),
private goToInboxButton: UIElement = new SubtleButton(Svg.envelope_ui(),
Translations.t.general.goToInbox, {url:"https://www.openstreetmap.org/messages/inbox", newTab: false});
constructor() {
@ -97,15 +97,13 @@ export class SimpleAddUI extends UIElement {
}
}
this.cancelButton = new SubtleButton(
Img.AsData(Svg.close),
this.cancelButton = new SubtleButton(Svg.close_ui(),
Translations.t.general.cancel
).onClick(() => {
self._confirmPreset.setData(undefined);
})
this.openLayerControl = new SubtleButton(
Img.AsData(Svg.layers),
this.openLayerControl = new SubtleButton(Svg.layers_ui(),
Translations.t.general.add.openLayerControl
).onClick(() => {
State.state.layerControlIsOpened.setData(true);