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

UX: improve styling of image attribution

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-16 01:39:10 +01:00
parent 7a3cb9fbdd
commit 2580a67e1f
4 changed files with 51 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/UI/Image/ImageCarousel.ts
View file

@ -14,17 +14,25 @@ import AttributedImage from "./AttributedImage.svelte"
export class ImageCarousel extends Toggle {
constructor(
images: Store<{ id:string, key: string; url: string; provider: ImageProvider }[]>,
images: Store<{ id: string; key: string; url: string; provider: ImageProvider }[]>,
tags: Store<any>,
state: { osmConnection?: OsmConnection; changes?: Changes; layout: LayoutConfig, previewedImage?: UIEventSource<ProvidedImage> },
state: {
osmConnection?: OsmConnection
changes?: Changes
layout: LayoutConfig
previewedImage?: UIEventSource<ProvidedImage>
},
feature: Feature
) {
const uiElements = images.map(
(imageURLS: { key: string; url: string; provider: ImageProvider, id: string }[]) => {
(imageURLS: { key: string; url: string; provider: ImageProvider; id: string }[]) => {
const uiElements: BaseUIElement[] = []
for (const url of imageURLS) {
try {
let image: BaseUIElement = new SvelteUIElement(AttributedImage, {image: url})
let image: BaseUIElement = new SvelteUIElement(AttributedImage, {
image: url,
previewedImage: state.previewedImage,
})
if (url.key !== undefined) {
image = new Combine([
@ -37,7 +45,6 @@ export class ImageCarousel extends Toggle {
image
.SetClass("w-full block")
.SetStyle("min-width: 50px; background: grey;")
.onClick(() => state.previewedImage.setData(url))
uiElements.push(image)
} catch (e) {
console.error("Could not generate image element for", url.url, "due to", e)