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

UX: show 'upload image from device' on desktop, add icon, attempt to fix "open camera" on ddg-browser, see #2406

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-05-04 01:10:16 +02:00
parent c8d39f466e
commit 1b64774b3b
2 changed files with 50 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8781,6 +8781,11 @@ svg.apply-fill path {
padding-right: 0.5rem;
}
.md\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.md\:text-6xl {
font-size: 3.75rem;
line-height: 1;

59
src/UI/Image/UploadImage.svelte
View file

@ -15,6 +15,7 @@
import { Translation } from "../i18n/Translation"
import type { Feature } from "geojson"
import Camera from "@babeard/svelte-heroicons/mini/Camera"
import ArrowUpTray from "@babeard/svelte-heroicons/solid/ArrowUpTray"
export let state: SpecialVisualizationState
@ -79,10 +80,11 @@
{#each $errors as error}
<Tr t={error} cls="alert" />
{/each}
<!-- Take picture selector. Must have image/*, capture=environment to work on DDG-browser/chromium based browsers -->
<FileSelector
accept=".jpg,.jpeg,image/jpeg"
accept="image/*"
capture="environment"
cls="button border-2 flex flex-col"
cls="button border-2 flex flex-col md:hidden"
multiple={true}
on:submit={(e) => {
handleFiles(e.detail)
@ -92,27 +94,28 @@
>
<div class="flex w-full items-center justify-center text-2xl">
{#if image !== undefined}
<img src={image} aria-hidden="true" />
<img src={image} alt="" aria-hidden="true" />
{:else}
<Camera class="h-12 w-12 p-1" aria-hidden="true" />
{/if}
{#if labelText}
{labelText}
{:else}
<div class="flex flex-col">
<div class="flex flex-col">
{#if labelText}
{labelText}
{:else}
<Tr t={t.addPicture} />
{#if noBlur}
{/if}
{#if noBlur}
<span class="subtle text-sm">
<Tr t={t.upload.noBlur} />
</span>
{/if}
</div>
{/if}
{/if}
</div>
</div>
</FileSelector>
<!-- "Select images from device" - shown on desktop -->
<FileSelector
accept=".jpg, .jpeg"
cls="flex justify-center md:hidden button"
accept=".jpg, .jpeg, image/jpeg"
cls="flex justify-center button"
multiple={true}
on:submit={(e) => {
e.preventDefault()
@ -120,8 +123,36 @@
return handleFiles(e.detail, true)
}}
>
<Tr t={t.selectFile} />
<div class="hidden md:block">
<div class="flex w-full">
{#if image !== undefined}
<img alt="" src={image} aria-hidden="true" />
{:else}
<Camera class="h-12 w-12 p-1" aria-hidden="true" />
{/if}
<ArrowUpTray class="w-6 h-6 p-0.5 bg-white rounded-full self-end" style="margin-left: -1rem" />
</div>
</div>
<div class="flex flex-col ">
{#if labelText}
<div class="md:text-2xl text-center ">
{labelText}
</div>
<Tr t={t.selectFile} />
{:else}
<Tr cls="md:text-2xl text-center" t={t.selectFile} />
{/if}
{#if noBlur}
<span class="subtle text-sm">
<Tr t={t.upload.noBlur} />
</span>
{/if}
</div>
</FileSelector>
<div class="subtle text-xs italic">
<Tr t={Translations.t.general.attribution.panoramaxLicenseCCBYSA} />
<span class="mx-1">—</span>