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

uniformize layer control input styling

Browse Source
This commit is contained in:
vcoppe
2024-04-12 15:12:27 +02:00
parent f38d5b7a75
commit cae8cb63f9
8 changed files with 101 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
website/package-lock.json generated
View File

@@ -13,7 +13,7 @@
"@mapbox/mapbox-gl-geocoder": "^5.0.2",
"@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
"@types/mapbox-gl": "^3.1.0",
"bits-ui": "^0.21.2",
"bits-ui": "^0.21.3",
"clsx": "^2.1.0",
"gpx": "file:../gpx",
"lucide-svelte": "^0.365.0",
@@ -1830,9 +1830,9 @@
}
},
"node_modules/bits-ui": {
"version": "0.21.2",
"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.2.tgz",
"integrity": "sha512-tDOvNdJ+uC/VWlzCZ6Pwv3enQJBw1D7leUfdIqg8WvqcDHnvn3fk4V3Y9VmpMOPnl+xTaiKxSiVpO/Dh8wD6jA==",
"version": "0.21.3",
"resolved": "https://registry.npmjs.org/bits-ui/-/bits-ui-0.21.3.tgz",
"integrity": "sha512-VMQVXwYIjYmDoudIRm2ZlS2guy97lUQk73DwSfTnaS0dhldImbDFMATNxjLSLsTDj8FqJ8Dv78wSctdxcloIbQ==",
"dependencies": {
"@internationalized/date": "^3.5.1",
"@melt-ui/svelte": "0.76.2",

2
website/package.json
View File

@@ -42,7 +42,7 @@
"@mapbox/mapbox-gl-geocoder": "^5.0.2",
"@types/mapbox__mapbox-gl-geocoder": "^5.0.0",
"@types/mapbox-gl": "^3.1.0",
"bits-ui": "^0.21.2",
"bits-ui": "^0.21.3",
"clsx": "^2.1.0",
"gpx": "file:../gpx",
"lucide-svelte": "^0.365.0",

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

@@ -88,7 +88,7 @@
</Menubar.Content>
</Menubar.Menu>
</Menubar.Root>
<div class="h-fit flex flex-row items-center ml-1 space-x-1">
<div class="h-fit flex flex-row items-center ml-1 gap-1">
<Button variant="ghost" href="/about" target="_blank" class="cursor-default h-fit rounded-sm"
>About</Button
>

2
website/src/lib/components/Toolbar.svelte
View File

@@ -19,7 +19,7 @@
</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 shadow-md">
<div class="flex flex-col p-1 gap-1 bg-background rounded-md pointer-events-auto shadow-md">
<ToolbarItem>
<Fa slot="icon" icon={faPencil} />
<span slot="tooltip">Edit the track points</span>

12
website/src/lib/components/layer-control/LayerControl.svelte
View File

@@ -4,6 +4,9 @@
import CustomControl from '$lib/components/custom-control/CustomControl.svelte';
import LayerTree from './LayerTree.svelte';
import Label from '$lib/components/ui/label/label.svelte';
import { Separator } from '$lib/components/ui/separator';
import Fa from 'svelte-fa';
import { faLayerGroup } from '@fortawesome/free-solid-svg-icons';
@@ -27,7 +30,9 @@
<div class="flex flex-row justify-center items-center w-[29px] h-[29px] group-hover:hidden">
<Fa icon={faLayerGroup} size="1.4x" />
</div>
<div class="hidden group-hover:block p-2 space-y-2">
<div class="hidden group-hover:block">
<div class="p-2">
<Label>Basemaps</Label>
<LayerTree
layerTree={basemapTree}
name="basemaps"
@@ -37,6 +42,10 @@
}
}}
/>
</div>
<Separator class="w-full" />
<div class="p-2">
<Label>Overlays</Label>
<LayerTree
layerTree={overlayTree}
name="overlays"
@@ -66,4 +75,5 @@
}}
/>
</div>
</div>
</CustomControl>

21
website/src/lib/components/layer-control/LayerTreeNode.svelte
View File

@@ -19,10 +19,10 @@
}
</script>
<div class="flex flex-col">
<div class="flex flex-col gap-1">
{#if Array.isArray(node)}
{#each node as id}
<div>
<div class="flex flex-row items-center gap-2">
{#if multiple}
<Checkbox
{id}
@@ -32,6 +32,7 @@
on:click={() => {
onValueChange(id, !checked[id]);
}}
class="scale-90"
/>
{:else}
<input
@@ -49,10 +50,24 @@
{/each}
{:else}
{#each Object.keys(node) as id}
<div class="ml-2">
<div class="ml-2 flex flex-col gap-1">
<Label>{id}</Label>
<svelte:self node={node[id]} {name} {multiple} {onValueChange} />
</div>
{/each}
{/if}
</div>
<style lang="postcss">
div :global(input[type='radio']) {
@apply appearance-none;
@apply w-4 h-4;
@apply border-[1.5px] border-primary;
@apply rounded-full;
@apply ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
@apply cursor-pointer;
@apply checked:bg-primary;
@apply checked:bg-clip-content;
@apply checked:p-0.5;
}
</style>

7
website/src/lib/components/ui/separator/index.ts Normal file
View File

@@ -0,0 +1,7 @@
import Root from "./separator.svelte";
export {
Root,
//
Root as Separator,
};

22
website/src/lib/components/ui/separator/separator.svelte Normal file
View File

@@ -0,0 +1,22 @@
<script lang="ts">
import { Separator as SeparatorPrimitive } from "bits-ui";
import { cn } from "$lib/utils.js";
type $$Props = SeparatorPrimitive.Props;
let className: $$Props["class"] = undefined;
export let orientation: $$Props["orientation"] = "horizontal";
export let decorative: $$Props["decorative"] = undefined;
export { className as class };
</script>
<SeparatorPrimitive.Root
class={cn(
"shrink-0 bg-border",
orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
className
)}
{orientation}
{decorative}
{...$$restProps}
/>