steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-30 23:30:04 +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

49
website/src/lib/components/Menu.svelte
View File

@@ -2,7 +2,18 @@
import * as Menubar from '$lib/components/ui/menubar/index.js';
import { Button } from '$lib/components/ui/button';
import Logo from './Logo.svelte';
import { HeartHandshake } from 'lucide-svelte';
import {
Plus,
Upload,
Copy,
Download,
Undo2,
Redo2,
Trash2,
HeartHandshake
} from 'lucide-svelte';
import Fa from 'svelte-fa';
import { faGoogleDrive } from '@fortawesome/free-brands-svg-icons';
let distanceUnits = 'metric';
let velocityUnits = 'speed';
@@ -20,17 +31,29 @@
<Menubar.Trigger>File</Menubar.Trigger>
<Menubar.Content>
<Menubar.Item>
New GPX file <Menubar.Shortcut>⌘N</Menubar.Shortcut>
<Plus size="16" class="mr-1" /> New <Menubar.Shortcut>⌘N</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item>
Load GPX file(s)... <Menubar.Shortcut>⌘O</Menubar.Shortcut>
<Upload size="16" class="mr-1" /> Load from desktop... <Menubar.Shortcut
>⌘O</Menubar.Shortcut
>
</Menubar.Item>
<Menubar.Item>
<Fa icon={faGoogleDrive} class="h-4 w-4 mr-1" />
Load from Google Drive...</Menubar.Item
>
<Menubar.Separator />
<Menubar.Item>
<Copy size="16" class="mr-1" /> Duplicate <Menubar.Shortcut>⌘D</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Separator />
<Menubar.Item>
Export... <Menubar.Shortcut>⌘S</Menubar.Shortcut>
<Download size="16" class="mr-1" /> Export... <Menubar.Shortcut>⌘S</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item>
Export all... <Menubar.Shortcut>⇧⌘S</Menubar.Shortcut>
<Download size="16" class="mr-1" /> Export all... <Menubar.Shortcut
>⇧⌘S</Menubar.Shortcut
>
</Menubar.Item>
</Menubar.Content>
</Menubar.Menu>
@@ -38,14 +61,20 @@
<Menubar.Trigger>Edit</Menubar.Trigger>
<Menubar.Content>
<Menubar.Item>
Undo <Menubar.Shortcut>⌘Z</Menubar.Shortcut>
<Undo2 size="16" class="mr-1" /> Undo <Menubar.Shortcut>⌘Z</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Item>
Redo <Menubar.Shortcut>⇧⌘Z</Menubar.Shortcut>
<Redo2 size="16" class="mr-1" /> Redo <Menubar.Shortcut>⇧⌘Z</Menubar.Shortcut>
</Menubar.Item>
<Menubar.Separator />
<Menubar.Item>Delete <Menubar.Shortcut>⌘D</Menubar.Shortcut></Menubar.Item>
<Menubar.Item>Delete all<Menubar.Shortcut>⇧⌘D</Menubar.Shortcut></Menubar.Item>
<Menubar.Item
><Trash2 size="16" class="mr-1" /> Delete <Menubar.Shortcut>⌘K</Menubar.Shortcut
></Menubar.Item
>
<Menubar.Item class="text-destructive data-[highlighted]:text-destructive"
><Trash2 size="16" class="mr-1" /> Delete all<Menubar.Shortcut>⇧⌘K</Menubar.Shortcut
></Menubar.Item
>
</Menubar.Content>
</Menubar.Menu>
<Menubar.Menu>
@@ -97,7 +126,7 @@
href="https://ko-fi.com/gpxstudio"
target="_blank"
class="cursor-default h-fit rounded-sm"
>Donate <HeartHandshake size="18" class="ml-1" /></Button
>Donate <HeartHandshake size="16" class="ml-1" /></Button
>
</div>
</div>

58
website/src/lib/components/Toolbar.svelte
View File

@@ -1,76 +1,60 @@
<script lang="ts">
import ToolbarItem from './ToolbarItem.svelte';
import Fa from 'svelte-fa';
import {
faPencil,
faStopwatch,
faExchange,
faPlusCircle,
faListUl,
faCopy,
faMapMarkerAlt,
faCompressAlt,
faVectorSquare,
faEyeSlash,
faPalette,
faFolderTree,
faTrashAlt
} from '@fortawesome/free-solid-svg-icons';
ArrowRightLeft,
Group,
CalendarClock,
Pencil,
SquareDashedMousePointer,
Ungroup,
MapPin,
Shrink,
Palette,
FolderTree
} from 'lucide-svelte';
</script>
<div class="absolute top-0 bottom-0 left-0 z-10 flex flex-col justify-center pointer-events-none">
<div class="flex flex-col p-1 gap-1 bg-background rounded-md pointer-events-auto shadow-md">
<ToolbarItem>
<Fa slot="icon" icon={faPencil} />
<Pencil slot="icon" size="18" />
<span slot="tooltip">Edit the track points</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faStopwatch} />
<CalendarClock slot="icon" size="18" />
<span slot="tooltip">Change time and speed data</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faExchange} />
<ArrowRightLeft slot="icon" size="18" />
<span slot="tooltip">Reverse the order of the track points</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faPlusCircle} />
<Group slot="icon" size="18" />
<span slot="tooltip">Merge with another file</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faListUl} />
<Ungroup slot="icon" size="18" />
<span slot="tooltip">Extract the tracks or track segments to new files</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faCopy} />
<span slot="tooltip">Duplicate the file</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faMapMarkerAlt} />
<MapPin slot="icon" size="18" />
<span slot="tooltip">Create a new point of interest</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faCompressAlt} />
<Shrink slot="icon" size="18" />
<span slot="tooltip">Reduce the number of track points</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faVectorSquare} />
<SquareDashedMousePointer slot="icon" size="18" />
<span slot="tooltip">Clean track points and POIs with a rectangle selection</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faEyeSlash} />
<span slot="tooltip">Hide/unhide the trace</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faPalette} />
<Palette slot="icon" size="18" />
<span slot="tooltip">Change the styling of the trace</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faFolderTree} />
<FolderTree slot="icon" size="18" />
<span slot="tooltip">Manage the file structure</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faTrashAlt} />
<span slot="tooltip">Delete the file</span>
</ToolbarItem>
</div>
</div>

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
>

2
website/src/lib/components/ui/accordion/accordion-content.svelte
View File

@@ -14,7 +14,7 @@
</script>
<AccordionPrimitive.Content
class={cn('overflow-hidden text-sm transition-all pb-4', className)}
class={cn('overflow-hidden text-sm transition-all mb-4', className)}
{transition}
{transitionConfig}
{...$$restProps}