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

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

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>