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

Accessibility: improve keyboard only flow (see #1181); remove some legacy use of Svelte

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-06 17:27:30 +01:00
parent d1a6c11513
commit 4ee83cfe5c
35 changed files with 613 additions and 683 deletions
Download patch file Download diff file Expand all files Collapse all files

81
src/UI/Image/NearbyImagesCollapsed.svelte
View file

@ -1,52 +1,49 @@
<script lang="ts">
import { Store } from "../../Logic/UIEventSource"
import type { OsmTags } from "../../Models/OsmFeature"
import type { SpecialVisualizationState } from "../SpecialVisualization"
import type { Feature } from "geojson"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import Translations from "../i18n/Translations"
import Tr from "../Base/Tr.svelte"
import NearbyImages from "./NearbyImages.svelte"
import Svg from "../../Svg"
import ToSvelte from "../Base/ToSvelte.svelte"
import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
import exp from "constants"
import Camera_plus from "../../assets/svg/Camera_plus.svelte"
import LoginToggle from "../Base/LoginToggle.svelte"
import { Store } from "../../Logic/UIEventSource";
import type { OsmTags } from "../../Models/OsmFeature";
import type { SpecialVisualizationState } from "../SpecialVisualization";
import type { Feature } from "geojson";
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
import Translations from "../i18n/Translations";
import Tr from "../Base/Tr.svelte";
import NearbyImages from "./NearbyImages.svelte";
import { XCircleIcon } from "@babeard/svelte-heroicons/solid";
import Camera_plus from "../../assets/svg/Camera_plus.svelte";
import LoginToggle from "../Base/LoginToggle.svelte";
export let tags: Store<OsmTags>
export let state: SpecialVisualizationState
export let lon: number
export let lat: number
export let feature: Feature
export let tags: Store<OsmTags>;
export let state: SpecialVisualizationState;
export let lon: number;
export let lat: number;
export let feature: Feature;
export let linkable: boolean = true
export let layer: LayerConfig
const t = Translations.t.image.nearby
export let linkable: boolean = true;
export let layer: LayerConfig;
const t = Translations.t.image.nearby;
let expanded = false
let expanded = false;
</script>
<LoginToggle {state}>
{#if expanded}
<NearbyImages {tags} {state} {lon} {lat} {feature} {linkable}>
<XCircleIcon
slot="corner"
class="h-6 w-6 cursor-pointer"
on:click={() => {
{#if expanded}
<NearbyImages {tags} {state} {lon} {lat} {feature} {linkable}>
<button slot="corner"
class="h-6 w-6 cursor-pointer no-image-background p-0 border-none"
on:click={() => {
expanded = false
}}
/>
</NearbyImages>
{:else}
<button
class="flex w-full items-center"
on:click={() => {
}}>
<XCircleIcon />
</button>
</NearbyImages>
{:else}
<button
class="flex w-full items-center"
on:click={() => {
expanded = true
}}
>
<Camera_plus class="mr-2 block h-8 w-8 p-1" />
<Tr t={t.seeNearby} />
</button>
{/if}
>
<Camera_plus class="mr-2 block h-8 w-8 p-1" />
<Tr t={t.seeNearby} />
</button>
{/if}
</LoginToggle>