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

Stabilizing popups part 2: loading new data doesn't close the popup anymore + fix slideshow

Browse source
This commit is contained in:
Pieter Vander Vennet 2021-02-06 00:05:38 +01:00
parent b9d5a85cd0
commit d4f107c81a
7 changed files with 48 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

11
UI/Image/DeleteImage.ts
View file

@ -22,21 +22,20 @@ export default class DeleteImage extends UIElement {
this.isDeletedBadge = Translations.t.image.isDeleted;
const style = "display:block;color:white;width:100%;"
const deleteButton = Translations.t.image.doDelete.Clone()
.SetStyle(style+"background:#ff8c8c;")
.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, ""));
});
const cancelButton = Translations.t.general.cancel;
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 CheckBox(
new Combine([
deleteButton,
cancelButton
]).SetStyle("display:flex;flex-direction:column;"),
Svg.delete_icon_ui().SetStyle('width:1.5em;display:block;padding-left: calc(50% - 0.75em);')
]).SetClass("flex flex-col background-black"),
Svg.delete_icon_svg().SetStyle("width: 2em; height: 2em; display:block;")
)
}

6
UI/Image/ImageCarousel.ts
View file

@ -21,8 +21,8 @@ export class ImageCarousel extends UIElement{
if(url.key !== undefined){
image = new Combine([
image,
new DeleteImage(url.key, tags)
]);
new DeleteImage(url.key, tags).SetClass("delete-image-marker absolute top-0 left-0 pl-3")
]).SetClass("relative");
}
image
.SetClass("w-full block")
@ -32,7 +32,7 @@ export class ImageCarousel extends UIElement{
});
this.slideshow = new SlideShow(uiElements).HideOnEmpty(true);
this.SetClass("block image-carousel-marker");
this.SetClass("block w-full");
}
/***

2
UI/Image/SlideShow.ts
View file

@ -41,7 +41,7 @@ export class SlideShow extends UIElement {
return;
}
$('.slick-carousel').not('.slick-initialized').slick({
// autoplay: true,
autoplay: true,
arrows: true,
dots: true,
lazyLoad: 'progressive',