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

toolbar

Browse Source
This commit is contained in:
vcoppe
2024-04-09 18:46:01 +02:00
parent fb343cbbf0
commit 588175d30c
8 changed files with 204 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
website/package-lock.json generated
View File

@@ -8,12 +8,15 @@
"name": "website",
"version": "0.0.1",
"dependencies": {
"@fortawesome/free-brands-svg-icons": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@maplibre/maplibre-gl-geocoder": "^1.5.0",
"bits-ui": "^0.21.2",
"clsx": "^2.1.0",
"gpx": "file:../gpx",
"lucide-svelte": "^0.365.0",
"maplibre-gl": "^4.1.2",
"svelte-fa": "^4.0.2",
"tailwind-merge": "^2.2.2",
"tailwind-variants": "^0.2.1"
},
@@ -544,6 +547,39 @@
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
},
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.2.tgz",
"integrity": "sha512-gBxPg3aVO6J0kpfHNILc+NMhXnqHumFxOmjYCFfOiLZfwhnnfhtsdA2hfJlDnj+8PjAs6kKQPenOTKj3Rf7zHw==",
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-brands-svg-icons": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.5.2.tgz",
"integrity": "sha512-zi5FNYdmKLnEc0jc0uuHH17kz/hfYTg4Uei0wMGzcoCL/4d3WM3u1VMc0iGGa31HuhV5i7ZK8ZlTCQrHqRHSGQ==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.5.2"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.5.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.2.tgz",
"integrity": "sha512-QWFZYXFE7O1Gr1dTIp+D6UcFUF0qElOnZptpi7PBUMylJh+vFmIedVe1Ir6RM1t2tEQLLSV1k7bR4o92M+uqlw==",
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.5.2"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@humanwhocodes/config-array": {
"version": "0.11.14",
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz",
@@ -4352,6 +4388,14 @@
}
}
},
"node_modules/svelte-fa": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/svelte-fa/-/svelte-fa-4.0.2.tgz",
"integrity": "sha512-lza8Jfii6jcpMQB73mBStONxaLfZsUS+rKJ/hH6WxsHUd+g68+oHIL9yQTk4a0uY9HQk78T/CPvQnED0msqJfg==",
"peerDependencies": {
"svelte": "^4.0.0"
}
},
"node_modules/svelte-hmr": {
"version": "0.15.3",
"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",

3
website/package.json
View File

@@ -37,12 +37,15 @@
},
"type": "module",
"dependencies": {
"@fortawesome/free-brands-svg-icons": "^6.5.2",
"@fortawesome/free-solid-svg-icons": "^6.5.2",
"@maplibre/maplibre-gl-geocoder": "^1.5.0",
"bits-ui": "^0.21.2",
"clsx": "^2.1.0",
"gpx": "file:../gpx",
"lucide-svelte": "^0.365.0",
"maplibre-gl": "^4.1.2",
"svelte-fa": "^4.0.2",
"tailwind-merge": "^2.2.2",
"tailwind-variants": "^0.2.1"
}

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

@@ -11,9 +11,9 @@
</script>
<div class="absolute top-2 left-0 right-0 z-10 flex flex-row justify-center pointer-events-none">
<div class="w-fit flex flex-row items-center px-1 bg-background rounded-md pointer-events-auto">
<Logo class="h-5 mt-1 mx-2" />
<Menubar.Root class="border-none">
<div class="w-fit flex flex-row items-center p-1 bg-background rounded-md pointer-events-auto">
<Logo class="h-5 mt-0.5 mx-2" />
<Menubar.Root class="border-none h-fit p-0">
<Menubar.Menu>
<Menubar.Trigger>File</Menubar.Trigger>
<Menubar.Content>
@@ -86,20 +86,31 @@
</Menubar.Content>
</Menubar.Menu>
</Menubar.Root>
<div class="py-1 h-10">
<Button
variant="ghost"
href="/about"
target="_blank"
class="cursor-default py-1.5 px-3 h-fit rounded-sm">About</Button
<div class="h-fit flex flex-row items-center">
<Button variant="ghost" href="/about" target="_blank" class="cursor-default h-fit rounded-sm"
>About</Button
>
<Button
variant="ghost"
href="https://ko-fi.com/gpxstudio"
target="_blank"
class="cursor-default py-1.5 px-3 h-fit rounded-sm"
class="cursor-default h-fit rounded-sm"
>Donate <HeartHandshake size="18" class="ml-1" /></Button
>
</div>
</div>
</div>
<style lang="postcss">
div :global(button) {
@apply hover:bg-accent;
@apply px-3;
@apply py-0.5;
}
div :global(a) {
@apply hover:bg-accent;
@apply px-3;
@apply py-0.5;
}
</style>

76
website/src/lib/components/Toolbar.svelte Normal file
View File

@@ -0,0 +1,76 @@
<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';
</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 space-y-1 bg-background rounded-md pointer-events-auto">
<ToolbarItem>
<Fa slot="icon" icon={faPencil} />
<span slot="tooltip">Edit the track points</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faStopwatch} />
<span slot="tooltip">Change time and speed data</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faExchange} />
<span slot="tooltip">Reverse the order of the track points</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faPlusCircle} />
<span slot="tooltip">Merge with another file</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faListUl} />
<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} />
<span slot="tooltip">Create a new point of interest</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faCompressAlt} />
<span slot="tooltip">Reduce the number of track points</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faVectorSquare} />
<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} />
<span slot="tooltip">Change the styling of the trace</span>
</ToolbarItem>
<ToolbarItem>
<Fa slot="icon" icon={faFolderTree} />
<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>

15
website/src/lib/components/ToolbarItem.svelte Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts">
import { Button } from '$lib/components/ui/button';
import * as Tooltip from '$lib/components/ui/tooltip/index.js';
</script>
<Tooltip.Root openDelay="300">
<Tooltip.Trigger asChild let:builder>
<Button builders={[builder]} variant="ghost" class="h-fit px-1 py-1.5">
<slot name="icon" />
</Button>
</Tooltip.Trigger>
<Tooltip.Content side="right">
<slot name="tooltip" />
</Tooltip.Content>
</Tooltip.Root>

15
website/src/lib/components/ui/tooltip/index.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Tooltip as TooltipPrimitive } from "bits-ui";
import Content from "./tooltip-content.svelte";
const Root = TooltipPrimitive.Root;
const Trigger = TooltipPrimitive.Trigger;
export {
Root,
Trigger,
Content,
//
Root as Tooltip,
Content as TooltipContent,
Trigger as TooltipTrigger,
};

28
website/src/lib/components/ui/tooltip/tooltip-content.svelte Normal file
View File

@@ -0,0 +1,28 @@
<script lang="ts">
import { Tooltip as TooltipPrimitive } from "bits-ui";
import { cn, flyAndScale } from "$lib/utils.js";
type $$Props = TooltipPrimitive.ContentProps;
let className: $$Props["class"] = undefined;
export let sideOffset: $$Props["sideOffset"] = 4;
export let transition: $$Props["transition"] = flyAndScale;
export let transitionConfig: $$Props["transitionConfig"] = {
y: 8,
duration: 150,
};
export { className as class };
</script>
<TooltipPrimitive.Content
{transition}
{transitionConfig}
{sideOffset}
class={cn(
"z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
className
)}
{...$$restProps}
>
<slot />
</TooltipPrimitive.Content>

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

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