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

UX: add zoom-cursor to clickable images

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-09 16:04:35 +01:00
parent f95a1a8039
commit 6205da9d41
3 changed files with 17 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/css/index-tailwind-output.css
View file

@ -1356,6 +1356,10 @@ video {
cursor: wait;
}
.cursor-zoom-in {
cursor: zoom-in;
}
.resize {
resize: both;
}

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

@ -14,17 +14,24 @@ 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,
})
if (url.key !== undefined) {
image = new Combine([
@ -35,7 +42,7 @@ export class ImageCarousel extends Toggle {
]).SetClass("relative")
}
image
.SetClass("w-full block")
.SetClass("w-full block cursor-zoom-in")
.SetStyle("min-width: 50px; background: grey;")
.onClick(() => state.previewedImage.setData(url))
uiElements.push(image)

2
src/UI/Image/LinkableImage.svelte
View file

@ -64,7 +64,7 @@
</script>
<div class="flex w-fit shrink-0 flex-col">
<div on:click={() => state.previewedImage.setData(providedImage)}>
<div on:click={() => state.previewedImage.setData(providedImage)} class="cursor-zoom-in">
<AttributedImage image={providedImage} imgClass="max-h-64 w-auto"/>
</div>
{#if linkable}