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

change routing menu minimize

Browse Source
This commit is contained in:
vcoppe
2024-06-10 16:56:50 +02:00
parent 69a945aa4d
commit 093032cc26
1 changed files with 67 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,8 +16,8 @@
Home, Home,
RouteOff, RouteOff,
Repeat, Repeat,
Maximize2, SquareArrowUpLeft,
Minimize2 SquareArrowOutDownRight
} from 'lucide-svelte'; } from 'lucide-svelte';
import { map, routingControls } from '$lib/stores'; import { map, routingControls } from '$lib/stores';
@@ -69,68 +69,63 @@
{#if $minimizeRoutingMenu} {#if $minimizeRoutingMenu}
<div class="-m-1.5 -mb-2"> <div class="-m-1.5 -mb-2">
<Button variant="ghost" class="px-1 h-[26px]" on:click={() => ($minimizeRoutingMenu = false)}> <Button variant="ghost" class="px-1 h-[26px]" on:click={() => ($minimizeRoutingMenu = false)}>
<Maximize2 size="18" /> <SquareArrowOutDownRight size="18" />
</Button> </Button>
</div> </div>
{:else} {:else}
<div class="flex flex-col gap-3 max-w-80" in:flyAndScale={{ x: -2, y: 0, duration: 50 }}> <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">
<div class="grow flex flex-col gap-3"> <Tooltip>
<Tooltip> <Label slot="data" class="w-full flex flex-row justify-between items-center gap-2">
<Label slot="data" class="w-full flex flex-row justify-between items-center gap-2"> <span class="flex flex-row gap-1">
<span class="flex flex-row gap-1"> {#if $routing}
{#if $routing} <Route size="16" />
<Route size="16" /> {:else}
{:else} <RouteOff size="16" />
<RouteOff size="16" /> {/if}
{/if} {$_('toolbar.routing.use_routing')}
{$_('toolbar.routing.use_routing')} </span>
</span>
<Switch class="scale-90" bind:checked={$routing} /> <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>
<span slot="tooltip">{$_('toolbar.routing.use_routing_tooltip')}</span> <Label class="w-full flex flex-row justify-between items-center gap-2">
</Tooltip> <span class="flex flex-row gap-1"
{#if $routing} ><TriangleAlert size="16" />{$_('toolbar.routing.allow_private')}</span
<div class="flex flex-col gap-3" in:slide> >
<Label class="w-full flex flex-row justify-between items-center gap-2"> <Switch class="scale-90" bind:checked={$privateRoads} />
<span class="shrink-0 flex flex-row items-center gap-1"> </Label>
{#if $routingProfileSelectItem.value.includes('bike') || $routingProfileSelectItem.value.includes('motorcycle')} </div>
<Bike size="16" /> {/if}
{: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>
<div class="flex flex-row flex-wrap justify-center gap-1"> <div class="flex flex-row flex-wrap justify-center gap-1">
<Tooltip> <Tooltip>
@@ -176,14 +171,19 @@
<span slot="tooltip">{$_('toolbar.routing.round_trip.tooltip')}</span> <span slot="tooltip">{$_('toolbar.routing.round_trip.tooltip')}</span>
</Tooltip> </Tooltip>
</div> </div>
<Help> <div class="w-full flex flex-row gap-2 items-end justify-between">
{#if $selection.size > 1} <Help>
<div>{$_('toolbar.routing.help_multiple_files')}</div> {#if $selection.size > 1}
{:else if $selection.size == 0 || !validSelection} <div>{$_('toolbar.routing.help_multiple_files')}</div>
<div>{$_('toolbar.routing.help_no_file')}</div> {:else if $selection.size == 0 || !validSelection}
{:else} <div>{$_('toolbar.routing.help_no_file')}</div>
<div>{$_('toolbar.routing.help')}</div> {:else}
{/if} <div>{$_('toolbar.routing.help')}</div>
</Help> {/if}
</Help>
<Button variant="ghost" class="px-1 h-6" on:click={() => ($minimizeRoutingMenu = true)}>
<SquareArrowUpLeft size="18" />
</Button>
</div>
</div> </div>
{/if} {/if}