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

layer settings in accordion

Browse Source
This commit is contained in:
vcoppe
2024-04-14 16:42:38 +02:00
parent 2631387f91
commit add887af7f
7 changed files with 132 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,11 @@
<script lang="ts">
import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
import LayerTree from './LayerTree.svelte';
import { Button } from '$lib/components/ui/button';
import Label from '$lib/components/ui/label/label.svelte';
import { Separator } from '$lib/components/ui/separator';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import * as Sheet from '$lib/components/ui/sheet';
import * as Accordion from '$lib/components/ui/accordion';
import Fa from 'svelte-fa';
import { faGear } from '@fortawesome/free-solid-svg-icons';
@@ -34,35 +33,50 @@
<Sheet.Description>
Select the map layers you want to show in the interface and adjust their settings.
</Sheet.Description>
<ScrollArea class="pr-4">
<div>
<LayerTree
layerTree={basemapTree}
label="Basemaps"
name="basemapSettings"
multiple={true}
onValueChange={(id) => {
// TODO
}}
/>
</div>
</ScrollArea>
<Separator class="my-2" />
<ScrollArea class="pr-4">
<div>
<LayerTree
layerTree={overlayTree}
label="Overlays"
name="overlaySettings"
multiple={true}
onValueChange={(id, checked) => {
// TODO
}}
/>
</div>
</ScrollArea>
<Separator class="my-2" />
<Button variant="secondary" class="w-full px-1 py-1.5">Add custom layer</Button>
<Accordion.Root class="flex flex-col overflow-hidden">
<Accordion.Item value="item-1" class="flex flex-col overflow-hidden">
<Accordion.Trigger>Layer selection</Accordion.Trigger>
<Accordion.Content class="grow flex flex-col">
<ScrollArea class="pr-4">
<LayerTree
layerTree={basemapTree}
label="Basemaps"
name="basemapSettings"
multiple={true}
onValueChange={(id) => {
// TODO
}}
/>
</ScrollArea>
<Separator class="my-2" />
<ScrollArea class="pr-4">
<LayerTree
layerTree={overlayTree}
label="Overlays"
name="overlaySettings"
multiple={true}
onValueChange={(id, checked) => {
// TODO
}}
/>
</ScrollArea>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>Custom layer</Accordion.Trigger>
<Accordion.Content>
<ScrollArea>TODO custom layer form</ScrollArea>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-3">
<Accordion.Trigger>Heatmap settings</Accordion.Trigger>
<Accordion.Content></Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-4">
<Accordion.Trigger>POIs settings</Accordion.Trigger>
<Accordion.Content></Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</Sheet.Header>
</Sheet.Content>
</Sheet.Root>