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

finish tools docs

Browse Source
This commit is contained in:
vcoppe
2024-07-10 15:09:52 +02:00
parent cb4abedc16
commit 7daf26aa5f
17 changed files with 133 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
website/src/lib/components/toolbar/Toolbar.svelte
View File

@@ -18,7 +18,8 @@
<div class="flex flex-row w-full items-center pr-12">
<div
class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-r-md pointer-events-auto shadow-md"
class="h-fit flex flex-col p-1 gap-1.5 bg-background rounded-r-md pointer-events-auto shadow-md {$$props.class ??
''}"
>
<ToolbarItem tool={Tool.ROUTING}>
<Pencil slot="icon" size="18" class="h-" />
@@ -53,5 +54,5 @@
<span slot="tooltip">{$_('toolbar.clean.tooltip')}</span>
</ToolbarItem>
</div>
<ToolbarItemMenu />
<ToolbarItemMenu class={$$props.class ?? ''} />
</div>

25
website/src/lib/components/toolbar/tools/Scissors.svelte
View File

@@ -33,13 +33,19 @@
function updateSlicedGPXStatistics() {
if (validSelection && canCrop) {
slicedGPXStatistics.set([
$slicedGPXStatistics = [
get(gpxStatistics).slice(sliderValues[0], sliderValues[1]),
sliderValues[0],
sliderValues[1]
]);
];
} else {
slicedGPXStatistics.set(undefined);
$slicedGPXStatistics = undefined;
}
}
function updateSliderValues() {
if ($slicedGPXStatistics !== undefined) {
sliderValues = [$slicedGPXStatistics[1], $slicedGPXStatistics[2]];
}
}
@@ -61,6 +67,13 @@
updateSlicedGPXStatistics();
}
$: if (
$slicedGPXStatistics !== undefined &&
($slicedGPXStatistics[1] !== sliderValues[0] || $slicedGPXStatistics[2] !== sliderValues[1])
) {
updateSliderValues();
}
const splitTypes = [
{ value: SplitType.FILES, label: $_('gpx.files') },
{ value: SplitType.TRACKS, label: $_('gpx.tracks') },
@@ -72,7 +85,7 @@
$: splitAs.set(splitType.value);
onDestroy(() => {
slicedGPXStatistics.set(undefined);
$slicedGPXStatistics = undefined;
});
</script>
@@ -88,12 +101,12 @@
<Crop size="16" class="mr-1" />{$_('toolbar.scissors.crop')}
</Button>
<Separator />
<Label class="flex flex-row gap-3 items-center">
<Label class="flex flex-row flex-wrap gap-3 items-center">
<span class="shrink-0">
{$_('toolbar.scissors.split_as')}
</span>
<Select.Root bind:selected={splitType}>
<Select.Trigger class="h-8">
<Select.Trigger class="h-8 w-fit grow">
<Select.Value />
</Select.Trigger>
<Select.Content>

14
website/src/lib/components/toolbar/tools/Time.svelte
View File

@@ -160,10 +160,10 @@
$selection.size === 1 && $selection.hasAnyChildren(new ListRootItem(), true, ['waypoints']);
</script>
<div class="flex flex-col gap-3 w-96 {$$props.class ?? ''}">
<div class="flex flex-col gap-3 w-full max-w-80 {$$props.class ?? ''}">
<fieldset class="flex flex-col gap-2">
<div class="flex flex-row gap-2 justify-center">
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-2 grow">
<Label for="speed" class="flex flex-row">
<Zap size="16" class="mr-1" />
{#if $velocityUnits === 'speed'}
@@ -207,7 +207,7 @@
{/if}
</div>
</div>
<div class="flex flex-col gap-2">
<div class="flex flex-col gap-2 grow">
<Label for="duration" class="flex flex-row">
<Timer size="16" class="mr-1" />
{$_('toolbar.time.total_time')}
@@ -229,7 +229,7 @@
disabled={!canUpdate}
locale={get(locale) ?? 'en'}
placeholder={$_('toolbar.time.pick_date')}
class="w-[211px]"
class="w-fit grow"
onValueChange={async () => {
await tick();
updateEnd();
@@ -240,7 +240,7 @@
step={1}
disabled={!canUpdate}
bind:value={startTime}
class="w-[100px]"
class="w-fit"
on:input={updateEnd}
/>
</div>
@@ -254,7 +254,7 @@
disabled={!canUpdate}
locale={get(locale) ?? 'en'}
placeholder={$_('toolbar.time.pick_date')}
class="w-[211px]"
class="w-fit grow"
onValueChange={async () => {
await tick();
updateStart();
@@ -265,7 +265,7 @@
step={1}
disabled={!canUpdate}
bind:value={endTime}
class="w-[100px]"
class="w-fit"
on:change={updateStart}
/>
</div>

3
website/src/lib/components/toolbar/tools/Waypoint.svelte
View File

@@ -195,7 +195,7 @@
</div>
</div>
</fieldset>
<div class="flex flex-row gap-2">
<div class="flex flex-row flex-wrap gap-2">
<Button
variant="outline"
disabled={!canCreate && !$selectedWaypoint}
@@ -212,6 +212,7 @@
</Button>
<Button
variant="outline"
class="ml-auto"
on:click={() => {
selectedWaypoint.set(undefined);
resetWaypointData();