steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-08-31 23:53:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

floating menu

Browse Source
This commit is contained in:
vcoppe
2024-04-09 17:21:26 +02:00
parent 8c04e26c72
commit e5b2c5708d
2 changed files with 92 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -10,94 +10,96 @@
let showDirectionMarkers = false; let showDirectionMarkers = false;
</script> </script>
<div class="h-fit flex flex-row items-center mx-1"> <div class="fixed top-2 left-0 right-0 z-10 flex flex-row justify-center pointer-events-none">
<Logo class="h-5 mt-1 mx-2" /> <div class="w-fit flex flex-row items-center px-1 bg-background rounded-md pointer-events-auto">
<Menubar.Root class="border-none"> <Logo class="h-5 mt-1 mx-2" />
<Menubar.Menu> <Menubar.Root class="border-none">
<Menubar.Trigger>File</Menubar.Trigger> <Menubar.Menu>
<Menubar.Content> <Menubar.Trigger>File</Menubar.Trigger>
<Menubar.Item> <Menubar.Content>
New GPX file <Menubar.Shortcut>⌘N</Menubar.Shortcut> <Menubar.Item>
</Menubar.Item> New GPX file <Menubar.Shortcut>⌘N</Menubar.Shortcut>
<Menubar.Item> </Menubar.Item>
Load GPX file(s)... <Menubar.Shortcut>⌘O</Menubar.Shortcut> <Menubar.Item>
</Menubar.Item> Load GPX file(s)... <Menubar.Shortcut>⌘O</Menubar.Shortcut>
<Menubar.Separator /> </Menubar.Item>
<Menubar.Item> <Menubar.Separator />
Export... <Menubar.Shortcut>⌘S</Menubar.Shortcut> <Menubar.Item>
</Menubar.Item> Export... <Menubar.Shortcut>⌘S</Menubar.Shortcut>
<Menubar.Item> </Menubar.Item>
Export all... <Menubar.Shortcut>⇧⌘S</Menubar.Shortcut> <Menubar.Item>
</Menubar.Item> Export all... <Menubar.Shortcut>⇧⌘S</Menubar.Shortcut>
</Menubar.Content> </Menubar.Item>
</Menubar.Menu> </Menubar.Content>
<Menubar.Menu> </Menubar.Menu>
<Menubar.Trigger>Edit</Menubar.Trigger> <Menubar.Menu>
<Menubar.Content> <Menubar.Trigger>Edit</Menubar.Trigger>
<Menubar.Item> <Menubar.Content>
Undo <Menubar.Shortcut>⌘Z</Menubar.Shortcut> <Menubar.Item>
</Menubar.Item> Undo <Menubar.Shortcut>⌘Z</Menubar.Shortcut>
<Menubar.Item> </Menubar.Item>
Redo <Menubar.Shortcut>⇧⌘Z</Menubar.Shortcut> <Menubar.Item>
</Menubar.Item> Redo <Menubar.Shortcut>⇧⌘Z</Menubar.Shortcut>
<Menubar.Separator /> </Menubar.Item>
<Menubar.Item>Delete <Menubar.Shortcut>⌘D</Menubar.Shortcut></Menubar.Item> <Menubar.Separator />
<Menubar.Item>Delete all<Menubar.Shortcut>⇧⌘D</Menubar.Shortcut></Menubar.Item> <Menubar.Item>Delete <Menubar.Shortcut>⌘D</Menubar.Shortcut></Menubar.Item>
</Menubar.Content> <Menubar.Item>Delete all<Menubar.Shortcut>⇧⌘D</Menubar.Shortcut></Menubar.Item>
</Menubar.Menu> </Menubar.Content>
<Menubar.Menu> </Menubar.Menu>
<Menubar.Trigger>Help</Menubar.Trigger> <Menubar.Menu>
<Menubar.Content> <Menubar.Trigger>Help</Menubar.Trigger>
<Menubar.Item> <Menubar.Content>
Quick help <Menubar.Shortcut>⌘H</Menubar.Shortcut> <Menubar.Item>
</Menubar.Item> Quick help <Menubar.Shortcut>⌘H</Menubar.Shortcut>
<Menubar.Item>User guide</Menubar.Item> </Menubar.Item>
</Menubar.Content> <Menubar.Item>User guide</Menubar.Item>
</Menubar.Menu> </Menubar.Content>
<Menubar.Menu> </Menubar.Menu>
<Menubar.Trigger>Settings</Menubar.Trigger> <Menubar.Menu>
<Menubar.Content <Menubar.Trigger>Settings</Menubar.Trigger>
><Menubar.Sub> <Menubar.Content
<Menubar.SubTrigger inset>Distance units</Menubar.SubTrigger> ><Menubar.Sub>
<Menubar.SubContent> <Menubar.SubTrigger inset>Distance units</Menubar.SubTrigger>
<Menubar.RadioGroup bind:value={distanceUnits}> <Menubar.SubContent>
<Menubar.RadioItem value="metric">Metric</Menubar.RadioItem> <Menubar.RadioGroup bind:value={distanceUnits}>
<Menubar.RadioItem value="imperial">Imperial</Menubar.RadioItem> <Menubar.RadioItem value="metric">Metric</Menubar.RadioItem>
</Menubar.RadioGroup> <Menubar.RadioItem value="imperial">Imperial</Menubar.RadioItem>
</Menubar.SubContent> </Menubar.RadioGroup>
</Menubar.Sub> </Menubar.SubContent>
<Menubar.Sub> </Menubar.Sub>
<Menubar.SubTrigger inset>Velocity units</Menubar.SubTrigger> <Menubar.Sub>
<Menubar.SubContent> <Menubar.SubTrigger inset>Velocity units</Menubar.SubTrigger>
<Menubar.RadioGroup bind:value={velocityUnits}> <Menubar.SubContent>
<Menubar.RadioItem value="speed">Speed</Menubar.RadioItem> <Menubar.RadioGroup bind:value={velocityUnits}>
<Menubar.RadioItem value="pace">Pace</Menubar.RadioItem> <Menubar.RadioItem value="speed">Speed</Menubar.RadioItem>
</Menubar.RadioGroup> <Menubar.RadioItem value="pace">Pace</Menubar.RadioItem>
</Menubar.SubContent> </Menubar.RadioGroup>
</Menubar.Sub> </Menubar.SubContent>
<Menubar.Separator /> </Menubar.Sub>
<Menubar.CheckboxItem bind:checked={showDistanceMarkers}> <Menubar.Separator />
Show distance markers <Menubar.CheckboxItem bind:checked={showDistanceMarkers}>
</Menubar.CheckboxItem> Show distance markers
<Menubar.CheckboxItem bind:checked={showDirectionMarkers}> </Menubar.CheckboxItem>
Show direction markers <Menubar.CheckboxItem bind:checked={showDirectionMarkers}>
</Menubar.CheckboxItem> Show direction markers
</Menubar.Content> </Menubar.CheckboxItem>
</Menubar.Menu> </Menubar.Content>
</Menubar.Root> </Menubar.Menu>
<div class="py-1 h-10"> </Menubar.Root>
<Button <div class="py-1 h-10">
variant="ghost" <Button
href="/about" variant="ghost"
target="_blank" href="/about"
class="cursor-default py-1.5 px-3 h-fit rounded-sm">About</Button target="_blank"
> class="cursor-default py-1.5 px-3 h-fit rounded-sm">About</Button
<Button >
variant="ghost" <Button
href="https://ko-fi.com/gpxstudio" variant="ghost"
target="_blank" href="https://ko-fi.com/gpxstudio"
class="cursor-default py-1.5 px-3 h-fit rounded-sm" target="_blank"
>Donate <HeartHandshake size="18" class="ml-1" /></Button class="cursor-default py-1.5 px-3 h-fit rounded-sm"
> >Donate <HeartHandshake size="18" class="ml-1" /></Button
>
</div>
</div> </div>
</div> </div>

2
website/src/routes/+page.svelte
View File

@@ -3,8 +3,8 @@
import Menu from '$lib/components/Menu.svelte'; import Menu from '$lib/components/Menu.svelte';
</script> </script>
<Menu />
<div class="flex flex-col w-screen h-screen"> <div class="flex flex-col w-screen h-screen">
<Menu />
<Map class="grow" /> <Map class="grow" />
<div class="h-1/3">Test</div> <div class="h-1/3">Test</div>
</div> </div>