steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-05 18:02:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

accessibility improvements

Browse Source
This commit is contained in:
vcoppe
2024-06-27 15:50:15 +02:00
parent f08b2b094f
commit 1fdcc4289a
12 changed files with 119 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
website/src/lib/components/layer-control/LayerControl.svelte
View File

@@ -13,6 +13,8 @@
import { get, writable } from 'svelte/store';
import { getLayers } from './utils';
let container: HTMLDivElement;
const {
currentBasemap,
previousBasemap,
@@ -95,38 +97,76 @@
}
};
}
let open = false;
function openLayerControl() {
open = true;
}
function closeLayerControl() {
open = false;
}
let cancelEvents = false;
</script>
<CustomControl class="group min-w-[29px] min-h-[29px] overflow-hidden">
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
class="flex flex-row justify-center items-center w-[29px] h-[29px] delay-100 transition-[opacity height] duration-0 group-hover:opacity-0 group-hover:h-0 group-hover:delay-0"
bind:this={container}
class="h-full w-full"
on:mouseenter={openLayerControl}
on:mouseleave={closeLayerControl}
on:pointerenter={() => {
if (!open) {
cancelEvents = true;
openLayerControl();
setTimeout(() => {
cancelEvents = false;
}, 500);
}
}}
>
<Layers size="20" />
</div>
<div
class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 group-hover:grid-rows-[1fr] group-hover:grid-cols-[1fr] h-full"
>
<ScrollArea>
<div class="h-fit">
<div class="p-2">
<LayerTree
layerTree={$selectedBasemapTree}
name="basemaps"
bind:selected={$selectedBasemap}
/>
</div>
<Separator class="w-full" />
<div class="p-2">
{#if $currentOverlays}
<div
class="flex flex-row justify-center items-center delay-100 transition-[opacity] duration-0 {open
? 'opacity-0 w-0 h-0 delay-0'
: 'w-[29px] h-[29px]'}"
>
<Layers size="20" />
</div>
<div
class="transition-[grid-template-rows grid-template-cols] grid grid-rows-[0fr] grid-cols-[0fr] duration-150 h-full {open
? 'grid-rows-[1fr] grid-cols-[1fr]'
: ''} {cancelEvents ? 'pointer-events-none' : ''}"
>
<ScrollArea>
<div class="h-fit">
<div class="p-2">
<LayerTree
layerTree={$selectedOverlayTree}
name="overlays"
multiple={true}
bind:checked={$currentOverlays}
layerTree={$selectedBasemapTree}
name="basemaps"
bind:selected={$selectedBasemap}
/>
{/if}
</div>
<Separator class="w-full" />
<div class="p-2">
{#if $currentOverlays}
<LayerTree
layerTree={$selectedOverlayTree}
name="overlays"
multiple={true}
bind:checked={$currentOverlays}
/>
{/if}
</div>
</div>
</div>
</ScrollArea>
</ScrollArea>
</div>
</div>
</CustomControl>
<svelte:window
on:click={(e) => {
if (open && !cancelEvents && !container.contains(e.target)) {
closeLayerControl();
}
}}
/>

4
website/src/lib/components/layer-control/LayerControlSettings.svelte
View File

@@ -120,7 +120,7 @@
<Accordion.Item value="item-1" class="flex flex-col overflow-hidden">
<Accordion.Trigger>{$_('layers.selection')}</Accordion.Trigger>
<Accordion.Content class="grow flex flex-col border rounded">
<ScrollArea class="py-2 pr-2">
<ScrollArea class="py-2 pl-1 pr-2 min-h-9">
<LayerTree
layerTree={basemapTree}
name="basemapSettings"
@@ -129,7 +129,7 @@
/>
</ScrollArea>
<Separator />
<ScrollArea class="py-2 pr-2">
<ScrollArea class="py-2 pl-1 pr-2 min-h-9">
<LayerTree
layerTree={overlayTree}
name="overlaySettings"