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

polish toolbar and routing menu

Browse Source
This commit is contained in:
vcoppe
2024-06-10 12:06:32 +02:00
parent 5b167b09db
commit 9190d85bcd
7 changed files with 150 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,9 +23,9 @@
Thermometer,
Sun,
Moon,
Rows3,
Layers3,
MountainSnow
MountainSnow,
GalleryVertical
} from 'lucide-svelte';
import {
@@ -181,7 +181,7 @@
<MountainSnow size="16" class="mr-1" />{$_('menu.elevation_profile')}
</Menubar.CheckboxItem>
<Menubar.CheckboxItem bind:checked={$verticalFileView}>
<Rows3 size="16" class="mr-1" />{$_('menu.vertical_file_view')}
<GalleryVertical size="16" class="mr-1" />{$_('menu.vertical_file_view')}
</Menubar.CheckboxItem>
<Menubar.Separator />
<Menubar.Item inset on:click={switchBasemaps}

4
website/src/lib/components/toolbar/Toolbar.svelte
View File

@@ -20,10 +20,10 @@
<div class="absolute top-0 bottom-0 left-0 z-20 flex flex-col justify-center pointer-events-none">
<div class="flex flex-row w-screen items-center">
<div
class="h-fit flex flex-col p-1 gap-1 bg-background rounded-md pointer-events-auto shadow-md"
class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-md pointer-events-auto shadow-md"
>
<ToolbarItem tool={Tool.ROUTING}>
<Pencil slot="icon" size="18" />
<Pencil slot="icon" size="18" class="h-" />
<span slot="tooltip">{$_('toolbar.routing.tooltip')}</span>
</ToolbarItem>
<ToolbarItem tool={Tool.SCISSORS}>

2
website/src/lib/components/toolbar/ToolbarItem.svelte
View File

@@ -15,7 +15,7 @@
<Button
builders={[builder]}
variant="ghost"
class="h-fit px-1 py-1.5 {$currentTool === tool ? 'bg-accent' : ''}"
class="h-[26px] px-1 py-1.5 {$currentTool === tool ? 'bg-accent' : ''}"
on:click={toggleTool}
>
<slot name="icon" />

4
website/src/lib/components/toolbar/ToolbarItemMenu.svelte
View File

@@ -29,8 +29,8 @@
class="translate-x-1 h-full {$$props.class ?? ''}"
>
<div class="rounded-md shadow-md pointer-events-auto">
<Card.Root class="border-none">
<Card.Content class="p-3">
<Card.Root class="rounded-md border-none">
<Card.Content class="p-2.5">
{#if $currentTool === Tool.ROUTING}
<Routing {popup} {popupElement} />
{:else if $currentTool === Tool.SCISSORS}

230
website/src/lib/components/toolbar/tools/routing/Routing.svelte
View File

@@ -14,7 +14,10 @@
TriangleAlert,
ArrowRightLeft,
Home,
RouteOff
RouteOff,
Repeat,
Maximize2,
Minimize2
} from 'lucide-svelte';
import { map, routingControls } from '$lib/stores';
@@ -29,12 +32,13 @@
import { slide } from 'svelte/transition';
import { selection } from '$lib/components/file-list/Selection';
import { ListRootItem, type ListItem } from '$lib/components/file-list/FileList';
import { flyAndScale } from '$lib/utils';
export let popup: mapboxgl.Popup;
export let popupElement: HTMLElement;
let selectedItem: ListItem | null = null;
const { privateRoads, routing } = settings;
const { minimizeRoutingMenu, privateRoads, routing } = settings;
$: if ($map) {
// remove controls for deleted files
@@ -62,106 +66,124 @@
$: validSelection = $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
</script>
<div class=" flex flex-col gap-3">
<Tooltip>
<div slot="data" class="w-full flex flex-row justify-between items-center gap-2">
<Label for="routing" class="flex flex-row gap-1">
{#if $routing}
<Route size="16" />
{:else}
<RouteOff size="16" />
{/if}
{$_('toolbar.routing.use_routing')}</Label
>
<Switch id="routing" class="scale-90" bind:checked={$routing} />
</div>
<span slot="tooltip">{$_('toolbar.routing.use_routing_tooltip')}</span>
</Tooltip>
{#if $routing}
<div class="flex flex-col gap-3" in:slide>
<div class="w-full flex flex-row justify-between items-center gap-2">
<Label class="flex flex-row gap-1">
{#if $routingProfileSelectItem.value.includes('bike') || $routingProfileSelectItem.value.includes('motorcycle')}
<Bike size="16" />
{:else if $routingProfileSelectItem.value.includes('foot')}
<Footprints size="16" />
{:else if $routingProfileSelectItem.value.includes('water')}
<Waves size="16" />
{:else if $routingProfileSelectItem.value.includes('railway')}
<TrainFront size="16" />
{/if}
{$_('toolbar.routing.activity')}
</Label>
<Select.Root bind:selected={$routingProfileSelectItem}>
<Select.Trigger class="h-8 w-full">
<Select.Value />
</Select.Trigger>
<Select.Content>
{#each Object.keys(brouterProfiles) as profile}
<Select.Item value={profile}
>{$_(`toolbar.routing.activities.${profile}`)}</Select.Item
>
{/each}
</Select.Content>
</Select.Root>
</div>
<div class="w-full flex flex-row justify-between items-center gap-2">
<Label for="private" class="flex flex-row gap-1"
><TriangleAlert size="16" />{$_('toolbar.routing.allow_private')}</Label
>
<Switch id="private" class="scale-90" bind:checked={$privateRoads} />
</div>
</div>
{/if}
<div class="flex flex-row justify-center gap-2">
<Tooltip>
<Button
slot="data"
variant="outline"
disabled={!validSelection}
on:click={dbUtils.reverseSelection}
>
<ArrowRightLeft size="16" />
</Button>
<span slot="tooltip">{$_('toolbar.routing.reverse_tooltip')}</span>
</Tooltip>
<Tooltip>
<Button
slot="data"
variant="outline"
disabled={$selection.size != 1 || !validSelection}
on:click={() => {
const fileId = get(selection).getSelected()[0].getFileId();
routingControls.get(fileId)?.routeToStart();
}}
>
<Home size="16" />
</Button>
<span slot="tooltip">{$_('toolbar.routing.route_back_to_start_tooltip')}</span>
</Tooltip>
<Tooltip>
<Button
slot="data"
variant="outline"
disabled={$selection.size != 1 || !validSelection}
on:click={() => {
const fileId = get(selection).getSelected()[0].getFileId();
routingControls.get(fileId)?.createRoundTrip();
}}
>
<Home size="16" />
</Button>
<span slot="tooltip">{$_('toolbar.routing.round_trip_tooltip')}</span>
</Tooltip>
{#if $minimizeRoutingMenu}
<div class="-m-1.5 -mb-2">
<Button variant="ghost" class="px-1 h-[26px]" on:click={() => ($minimizeRoutingMenu = false)}>
<Maximize2 size="18" />
</Button>
</div>
<Help class="max-w-60">
{#if $selection.size > 1}
<div>{$_('toolbar.routing.help_multiple_files')}</div>
{:else if $selection.size == 0 || !validSelection}
<div>{$_('toolbar.routing.help_no_file')}</div>
{:else}
<div>{$_('toolbar.routing.help')}</div>
{/if}
</Help>
</div>
{:else}
<div class="flex flex-col gap-3 max-w-80" in:flyAndScale={{ x: -2, y: 0, duration: 50 }}>
<div class="w-full flex flex-row gap-2 justify-between">
<div class="grow flex flex-col gap-3">
<Tooltip>
<Label slot="data" class="w-full flex flex-row justify-between items-center gap-2">
<span class="flex flex-row gap-1">
{#if $routing}
<Route size="16" />
{:else}
<RouteOff size="16" />
{/if}
{$_('toolbar.routing.use_routing')}
</span>
<Switch class="scale-90" bind:checked={$routing} />
</Label>
<span slot="tooltip">{$_('toolbar.routing.use_routing_tooltip')}</span>
</Tooltip>
{#if $routing}
<div class="flex flex-col gap-3" in:slide>
<Label class="w-full flex flex-row justify-between items-center gap-2">
<span class="shrink-0 flex flex-row items-center gap-1">
{#if $routingProfileSelectItem.value.includes('bike') || $routingProfileSelectItem.value.includes('motorcycle')}
<Bike size="16" />
{:else if $routingProfileSelectItem.value.includes('foot')}
<Footprints size="16" />
{:else if $routingProfileSelectItem.value.includes('water')}
<Waves size="16" />
{:else if $routingProfileSelectItem.value.includes('railway')}
<TrainFront size="16" />
{/if}
{$_('toolbar.routing.activity')}
</span>
<Select.Root bind:selected={$routingProfileSelectItem}>
<Select.Trigger class="h-8 grow">
<Select.Value />
</Select.Trigger>
<Select.Content>
{#each Object.keys(brouterProfiles) as profile}
<Select.Item value={profile}
>{$_(`toolbar.routing.activities.${profile}`)}</Select.Item
>
{/each}
</Select.Content>
</Select.Root>
</Label>
<Label class="w-full flex flex-row justify-between items-center gap-2">
<span class="flex flex-row gap-1"
><TriangleAlert size="16" />{$_('toolbar.routing.allow_private')}</span
>
<Switch class="scale-90" bind:checked={$privateRoads} />
</Label>
</div>
{/if}
</div>
<Button variant="ghost" class="px-1 h-6" on:click={() => ($minimizeRoutingMenu = true)}>
<Minimize2 size="14" />
</Button>
</div>
<div class="flex flex-row flex-wrap justify-center gap-1">
<Tooltip>
<Button
slot="data"
variant="outline"
class="flex flex-row gap-1 text-xs px-2"
disabled={!validSelection}
on:click={dbUtils.reverseSelection}
>
<ArrowRightLeft size="12" />{$_('toolbar.routing.reverse.button')}
</Button>
<span slot="tooltip">{$_('toolbar.routing.reverse.tooltip')}</span>
</Tooltip>
<Tooltip>
<Button
slot="data"
variant="outline"
class="flex flex-row gap-1 text-xs px-2"
disabled={$selection.size != 1 || !validSelection}
on:click={() => {
const fileId = get(selection).getSelected()[0].getFileId();
routingControls.get(fileId)?.routeToStart();
}}
>
<Home size="12" />{$_('toolbar.routing.route_back_to_start.button')}
</Button>
<span slot="tooltip">{$_('toolbar.routing.route_back_to_start.tooltip')}</span>
</Tooltip>
<Tooltip>
<Button
slot="data"
variant="outline"
class="flex flex-row gap-1 text-xs px-2"
disabled={$selection.size != 1 || !validSelection}
on:click={() => {
const fileId = get(selection).getSelected()[0].getFileId();
routingControls.get(fileId)?.createRoundTrip();
}}
>
<Repeat size="12" />{$_('toolbar.routing.round_trip.button')}
</Button>
<span slot="tooltip">{$_('toolbar.routing.round_trip.tooltip')}</span>
</Tooltip>
</div>
<Help>
{#if $selection.size > 1}
<div>{$_('toolbar.routing.help_multiple_files')}</div>
{:else if $selection.size == 0 || !validSelection}
<div>{$_('toolbar.routing.help_no_file')}</div>
{:else}
<div>{$_('toolbar.routing.help')}</div>
{/if}
</Help>
</div>
{/if}

1
website/src/lib/db.ts
View File

@@ -87,6 +87,7 @@ export const settings = {
}
return currentMode;
})()),
minimizeRoutingMenu: dexieSettingStore('minimizeRoutingMenu', false),
routing: dexieSettingStore('routing', true),
routingProfile: dexieSettingStore('routingProfile', 'bike'),
privateRoads: dexieSettingStore('privateRoads', false),