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

More fixes to the refactored code

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-06-15 16:18:58 +02:00
parent 42d13f564c
commit 94f9a0de56
15 changed files with 78 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

54
UI/Image/DeleteImage.ts
View file

@ -9,49 +9,47 @@ import {Tag} from "../../Logic/Tags/Tag";
import BaseUIElement from "../BaseUIElement";
export default class DeleteImage extends UIElement {
private readonly key: string;
private readonly tags: UIEventSource<any>;
private readonly isDeletedBadge: BaseUIElement;
private readonly deleteDialog: BaseUIElement;
export default class DeleteImage extends Toggle {
constructor(key: string, tags: UIEventSource<any>) {
super(tags);
this.tags = tags;
this.key = key;
this.isDeletedBadge = Translations.t.image.isDeleted;
const oldValue = tags.data[key]
const isDeletedBadge = Translations.t.image.isDeleted.Clone()
.SetClass("rounded-full p-1")
.SetStyle("color:white;background:#ff8c8c")
.onClick(() => {
State.state?.changes?.addTag(tags.data.id, new Tag(key, oldValue), tags);
});
const deleteButton = Translations.t.image.doDelete.Clone()
.SetClass("block w-full pl-4 pr-4")
.SetStyle("color:white;background:#ff8c8c; border-top-left-radius:30rem; border-top-right-radius: 30rem;")
.onClick(() => {
State.state?.changes.addTag(tags.data.id, new Tag(key, ""));
State.state?.changes?.addTag(tags.data.id, new Tag(key, ""), tags);
});
const cancelButton = Translations.t.general.cancel.SetClass("bg-white pl-4 pr-4").SetStyle( "border-bottom-left-radius:30rem; border-bottom-right-radius: 30rem;");
this.deleteDialog = new Toggle(
const cancelButton = Translations.t.general.cancel.Clone().SetClass("bg-white pl-4 pr-4").SetStyle("border-bottom-left-radius:30rem; border-bottom-right-radius: 30rem;");
const openDelete = Svg.delete_icon_svg().SetStyle("width: 2em; height: 2em; display:block;")
const deleteDialog = new Toggle(
new Combine([
deleteButton,
cancelButton
]).SetClass("flex flex-col background-black"),
Svg.delete_icon_svg().SetStyle("width: 2em; height: 2em; display:block;")
).ToggleOnClick()
openDelete
)
}
cancelButton.onClick(() => deleteDialog.isEnabled.setData(false))
openDelete.onClick(() => deleteDialog.isEnabled.setData(true))
InnerRender() {
if(! State.state?.featureSwitchUserbadge?.data){
return "";
}
const value = this.tags.data[this.key];
if (value === undefined || value === "") {
return this.isDeletedBadge;
}
return this.deleteDialog;
super(
new Toggle(
deleteDialog,
isDeletedBadge,
tags.map(tags => (tags[key] ?? "") !== "")
),
undefined /*Login (and thus editing) is disabled*/,
State.state?.featureSwitchUserbadge ?? new UIEventSource<boolean>(true)
)
this.SetClass("cursor-pointer")
}
}

4
UI/Image/ImageUploadFlow.ts
View file

@ -28,7 +28,7 @@ export class ImageUploadFlow extends Toggle {
key = imagePrefix + ":" + freeIndex;
}
console.log("Adding image:" + key, url);
State.state.changes.addTag(tags.id, new Tag(key, url));
State.state.changes.addTag(tags.id, new Tag(key, url), tagsSource);
})
@ -47,7 +47,7 @@ export class ImageUploadFlow extends Toggle {
}
console.log("Received images from the user, starting upload")
const license = licensePicker.GetValue().data ?? "CC0"
const license = licensePicker.GetValue()?.data ?? "CC0"
const tags = tagsSource.data;

19
UI/Image/SlideShow.ts
View file

@ -1,6 +1,5 @@
import {UIEventSource} from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
import $ from "jquery"
export class SlideShow extends BaseUIElement {
@ -15,15 +14,29 @@ export class SlideShow extends BaseUIElement {
protected InnerConstructElement(): HTMLElement {
const el = document.createElement("div")
el.classList.add("slic-carousel")
el.style.overflowX = "auto"
el.style.width = "min-content"
el.style.minWidth = "min-content"
el.style.display = "flex"
this.embeddedElements.addCallbackAndRun(elements => {
while (el.firstChild) {
el.removeChild(el.lastChild)
}
for (const element of elements ?? []) {
element.SetClass("slick-carousel-content")
element.SetClass("block ml-1")
.SetStyle("width: 300px; max-height: var(--image-carousel-height); height: var(--image-carousel-height)")
el.appendChild(element.ConstructElement())
}
});
return el;
const wrapper = document.createElement("div")
wrapper.style.maxWidth = "100%"
wrapper.style.overflowX = "auto"
wrapper.appendChild(el)
return wrapper;
}
}

4
UI/Input/DropDown.ts
View file

@ -21,6 +21,8 @@ export class DropDown<T> extends InputElement<T> {
}
) {
super();
value = value ?? new UIEventSource<T>(undefined)
this._value = value
this._values = values;
if (values.length <= 1) {
return;
@ -43,7 +45,7 @@ export class DropDown<T> extends InputElement<T> {
el.appendChild(labelHtml)
}
}
options = options ?? {}
options.select_class = options.select_class ?? 'bg-indigo-100 p-1 rounded hover:bg-indigo-200'

2
UI/Input/TextField.ts
View file

@ -106,7 +106,7 @@ export class TextField extends InputElement<string> {
newCursorPos--;
}
// @ts-ignore
TextField.SetCursorPosition(newCursorPos);
TextField.SetCursorPosition(field, newCursorPos);
};

2
UI/Popup/FeatureInfoBox.ts
View file

@ -53,7 +53,7 @@ export default class FeatureInfoBox extends ScrollableFullScreen {
}
let questionBoxIsUsed = false;
const renderings = layerConfig.tagRenderings.map(tr => {
const renderings : BaseUIElement[] = layerConfig.tagRenderings.map(tr => {
if (tr.question === null) {
// This is the question box!
questionBoxIsUsed = true;

15
UI/ShowDataLayer.ts
View file

@ -126,22 +126,23 @@ export default class ShowDataLayer {
closeButton: false
}, leafletLayer);
leafletLayer.bindPopup(popup);
let infobox : FeatureInfoBox = undefined;
leafletLayer.bindPopup(popup);
let infobox: FeatureInfoBox = undefined;
const id = `popup-${feature.properties.id}-${this._cleanCount}`
popup.setContent(`<div style='height: 50vh' id='${id}'>Rendering</div>`)
popup.setContent(`<div style='height: 65vh' id='${id}'>Rendering</div>`)
leafletLayer.on("popupopen", () => {
State.state.selectedElement.setData(feature)
if (infobox === undefined) {
if (infobox === undefined) {
const tags = State.state.allElements.getEventSourceById(feature.properties.id);
infobox = new FeatureInfoBox(tags, layer);
infobox.isShown.addCallback(isShown => {
if (!isShown) {
State.state.selectedElement.setData(undefined);
leafletLayer.closePopup()
}
});
}
@ -162,7 +163,7 @@ export default class ShowDataLayer {
leafletLayer.openPopup()
}
})
}
private CreateGeojsonLayer(): L.Layer {