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: wait;
} }
.cursor-zoom-in {
cursor: zoom-in;
}
.resize { .resize {
resize: both; resize: both;
} }

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

@ -14,17 +14,24 @@ import AttributedImage from "./AttributedImage.svelte"
export class ImageCarousel extends Toggle { export class ImageCarousel extends Toggle {
constructor( constructor(
images: Store<{ id:string, key: string; url: string; provider: ImageProvider }[]>, images: Store<{ id: string; key: string; url: string; provider: ImageProvider }[]>,
tags: Store<any>, 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 feature: Feature
) { ) {
const uiElements = images.map( 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[] = [] const uiElements: BaseUIElement[] = []
for (const url of imageURLS) { for (const url of imageURLS) {
try { try {
let image: BaseUIElement = new SvelteUIElement(AttributedImage, {image: url}) let image: BaseUIElement = new SvelteUIElement(AttributedImage, {
image: url,
})
if (url.key !== undefined) { if (url.key !== undefined) {
image = new Combine([ image = new Combine([
@ -35,7 +42,7 @@ export class ImageCarousel extends Toggle {
]).SetClass("relative") ]).SetClass("relative")
} }
image image
.SetClass("w-full block") .SetClass("w-full block cursor-zoom-in")
.SetStyle("min-width: 50px; background: grey;") .SetStyle("min-width: 50px; background: grey;")
.onClick(() => state.previewedImage.setData(url)) .onClick(() => state.previewedImage.setData(url))
uiElements.push(image) uiElements.push(image)

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

@ -64,7 +64,7 @@
</script> </script>
<div class="flex w-fit shrink-0 flex-col"> <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"/> <AttributedImage image={providedImage} imgClass="max-h-64 w-auto"/>
</div> </div>
{#if linkable} {#if linkable}