mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-11-04 05:21:09 +00:00
uniformize layer control input styling
This commit is contained in:
vcoppe
8
website/package-lock.json
generated
8
website/package-lock.json
generated
@@ -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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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
|
||||
>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,43 +30,50 @@
|
||||
<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">
|
||||
<LayerTree
|
||||
layerTree={basemapTree}
|
||||
name="basemaps"
|
||||
onValueChange={(id) => {
|
||||
if (map) {
|
||||
map.setStyle(basemaps[id]);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<LayerTree
|
||||
layerTree={overlayTree}
|
||||
name="overlays"
|
||||
multiple={true}
|
||||
onValueChange={(id, checked) => {
|
||||
if (map) {
|
||||
if (checked) {
|
||||
if (!map.getSource(id)) {
|
||||
map.addSource(id, overlays[id]);
|
||||
}
|
||||
map.addLayer({
|
||||
id,
|
||||
type: overlays[id].type === 'raster' ? 'raster' : 'line',
|
||||
source: id,
|
||||
paint: {
|
||||
...(id in opacities
|
||||
? overlays[id].type === 'raster'
|
||||
? { 'raster-opacity': opacities[id] }
|
||||
: { 'line-opacity': opacities[id] }
|
||||
: {})
|
||||
}
|
||||
});
|
||||
} else {
|
||||
map.removeLayer(id);
|
||||
<div class="hidden group-hover:block">
|
||||
<div class="p-2">
|
||||
<Label>Basemaps</Label>
|
||||
<LayerTree
|
||||
layerTree={basemapTree}
|
||||
name="basemaps"
|
||||
onValueChange={(id) => {
|
||||
if (map) {
|
||||
map.setStyle(basemaps[id]);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<Separator class="w-full" />
|
||||
<div class="p-2">
|
||||
<Label>Overlays</Label>
|
||||
<LayerTree
|
||||
layerTree={overlayTree}
|
||||
name="overlays"
|
||||
multiple={true}
|
||||
onValueChange={(id, checked) => {
|
||||
if (map) {
|
||||
if (checked) {
|
||||
if (!map.getSource(id)) {
|
||||
map.addSource(id, overlays[id]);
|
||||
}
|
||||
map.addLayer({
|
||||
id,
|
||||
type: overlays[id].type === 'raster' ? 'raster' : 'line',
|
||||
source: id,
|
||||
paint: {
|
||||
...(id in opacities
|
||||
? overlays[id].type === 'raster'
|
||||
? { 'raster-opacity': opacities[id] }
|
||||
: { 'line-opacity': opacities[id] }
|
||||
: {})
|
||||
}
|
||||
});
|
||||
} else {
|
||||
map.removeLayer(id);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</CustomControl>
|
||||
|
||||
@@ -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
7
website/src/lib/components/ui/separator/index.ts
Normal 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
22
website/src/lib/components/ui/separator/separator.svelte
Normal 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}
|
||||
/>
|
||||
Reference in New Issue
Block a user