steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-04 17:32:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

lucide icons

Browse Source
This commit is contained in:
vcoppe
2024-04-15 10:33:47 +02:00
parent add887af7f
commit 87c62544bd
7 changed files with 82 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,8 +8,7 @@
import { Separator } from '$lib/components/ui/separator';
import { ScrollArea } from '$lib/components/ui/scroll-area/index.js';
import Fa from 'svelte-fa';
import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
import { Layers } from 'lucide-svelte';
import {
basemaps,
@@ -31,7 +30,7 @@
<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"
>
<Fa icon={faLayerGroup} size="1.4x" />
<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]"

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

@@ -7,8 +7,7 @@
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';
import { Settings } from 'lucide-svelte';
import {
basemaps,
@@ -22,8 +21,8 @@
<Sheet.Root>
<Sheet.Trigger class="w-full">
<Button variant="secondary" class="w-full px-1 py-1.5">
<Fa icon={faGear} class="mr-2" />
<Button variant="ghost" class="w-full px-1 py-1.5">
<Settings size="18" class="mr-2" />
Manage layers
</Button>
</Sheet.Trigger>
@@ -31,13 +30,14 @@
<Sheet.Header class="h-full">
<Sheet.Title>Layer settings</Sheet.Title>
<Sheet.Description>
Select the map layers you want to show in the interface and adjust their settings.
Select the map layers you want to show in the interface, add custom ones, and adjust their
settings.
</Sheet.Description>
<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">
<Accordion.Content class="grow flex flex-col border rounded">
<ScrollArea class="py-2 pr-2">
<LayerTree
layerTree={basemapTree}
label="Basemaps"
@@ -48,8 +48,8 @@
}}
/>
</ScrollArea>
<Separator class="my-2" />
<ScrollArea class="pr-4">
<Separator />
<ScrollArea class="py-2 pr-2">
<LayerTree
layerTree={overlayTree}
label="Overlays"
@@ -63,17 +63,17 @@
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-2">
<Accordion.Trigger>Custom layer</Accordion.Trigger>
<Accordion.Trigger>Custom layers</Accordion.Trigger>
<Accordion.Content>
<ScrollArea>TODO custom layer form</ScrollArea>
<ScrollArea>TODO custom layer list + new custom layer form</ScrollArea>
</Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-3">
<Accordion.Trigger>Heatmap settings</Accordion.Trigger>
<Accordion.Trigger>Heatmap</Accordion.Trigger>
<Accordion.Content></Accordion.Content>
</Accordion.Item>
<Accordion.Item value="item-4">
<Accordion.Trigger>POIs settings</Accordion.Trigger>
<Accordion.Trigger>Points of interest</Accordion.Trigger>
<Accordion.Content></Accordion.Content>
</Accordion.Item>
</Accordion.Root>

7
website/src/lib/components/layer-control/LayerTree.svelte
View File

@@ -5,8 +5,7 @@
import * as Collapsible from '$lib/components/ui/collapsible';
import { Button } from '$lib/components/ui/button';
import Fa from 'svelte-fa';
import { faChevronDown, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
import { ChevronDown, ChevronUp } from 'lucide-svelte';
export let layerTree: LayerTreeType;
export let label: string;
@@ -27,9 +26,9 @@
>
<span class="mr-2">{label}</span>
{#if open}
<Fa icon={faChevronDown} size="xs" />
<ChevronDown size="16" />
{:else}
<Fa icon={faChevronLeft} size="xs" />
<ChevronUp size="16" />
{/if}
</Button></Collapsible.Trigger
>

7
website/src/lib/components/layer-control/LayerTreeNode.svelte
View File

@@ -4,8 +4,7 @@
import { Button } from '$lib/components/ui/button';
import * as Collapsible from '$lib/components/ui/collapsible';
import Fa from 'svelte-fa';
import { faChevronDown, faChevronUp } from '@fortawesome/free-solid-svg-icons';
import { ChevronDown, ChevronUp } from 'lucide-svelte';
import { type LayerTreeType } from '$lib/assets/layers';
@@ -71,9 +70,9 @@
>
<span class="mr-2">{id}</span>
{#if open[id]}
<Fa icon={faChevronUp} size="xs" />
<ChevronUp size="16" />
{:else}
<Fa icon={faChevronDown} size="xs" />
<ChevronDown size="16" />
{/if}
</Button></Collapsible.Trigger
>