mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2026-04-12 23:00:20 +00:00
update components
This commit is contained in:
vcoppe
@@ -17,7 +17,7 @@
|
||||
<div class="flex flex-col gap-3 w-full max-w-80 {props.class ?? ''}">
|
||||
<Button
|
||||
variant="outline"
|
||||
class="whitespace-normal h-fit"
|
||||
class="whitespace-normal h-fit min-h-8 py-1"
|
||||
disabled={!validSelection}
|
||||
onclick={() => fileActions.addElevationToSelection()}
|
||||
>
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
{/if}
|
||||
<Button
|
||||
variant="outline"
|
||||
class="whitespace-normal h-fit"
|
||||
class="whitespace-normal h-fit min-h-8 py-1"
|
||||
disabled={(mergeType === MergeType.TRACES && !canMergeTraces) ||
|
||||
(mergeType === MergeType.CONTENTS && !canMergeContents)}
|
||||
onclick={() => {
|
||||
|
||||
@@ -185,8 +185,8 @@
|
||||
|
||||
<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 grow">
|
||||
<div class="flex flex-row gap-1.5 justify-center">
|
||||
<div class="flex flex-col gap-1 grow">
|
||||
<Label for="speed" class="flex flex-row">
|
||||
<Zap size="16" />
|
||||
{#if $velocityUnits === 'speed'}
|
||||
@@ -239,7 +239,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 grow">
|
||||
<div class="flex flex-col gap-1 grow">
|
||||
<Label for="duration" class="flex flex-row">
|
||||
<Timer size="16" />
|
||||
{i18n._('toolbar.time.total_time')}
|
||||
@@ -253,57 +253,61 @@
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Label class="flex flex-row">
|
||||
<CirclePlay size="16" />
|
||||
{i18n._('toolbar.time.start')}
|
||||
</Label>
|
||||
<div class="flex flex-row gap-2">
|
||||
<DatePicker
|
||||
bind:value={startDate}
|
||||
disabled={!canUpdate}
|
||||
locale={i18n.lang}
|
||||
placeholder={i18n._('toolbar.time.pick_date')}
|
||||
class="w-fit grow"
|
||||
onchange={() => {
|
||||
untrack(() => updateEnd());
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
type="time"
|
||||
step={1}
|
||||
disabled={!canUpdate}
|
||||
bind:value={startTime}
|
||||
class="w-fit"
|
||||
onchange={() => {
|
||||
untrack(() => updateEnd());
|
||||
}}
|
||||
/>
|
||||
<div class="flex flex-col gap-1">
|
||||
<Label class="flex flex-row">
|
||||
<CirclePlay size="16" />
|
||||
{i18n._('toolbar.time.start')}
|
||||
</Label>
|
||||
<div class="flex flex-row gap-1.5">
|
||||
<DatePicker
|
||||
bind:value={startDate}
|
||||
disabled={!canUpdate}
|
||||
locale={i18n.lang}
|
||||
placeholder={i18n._('toolbar.time.pick_date')}
|
||||
class="w-fit grow"
|
||||
onchange={() => {
|
||||
untrack(() => updateEnd());
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
type="time"
|
||||
step={1}
|
||||
disabled={!canUpdate}
|
||||
bind:value={startTime}
|
||||
class="w-fit"
|
||||
onchange={() => {
|
||||
untrack(() => updateEnd());
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<Label class="flex flex-row">
|
||||
<CircleStop size="16" />
|
||||
{i18n._('toolbar.time.end')}
|
||||
</Label>
|
||||
<div class="flex flex-row gap-2">
|
||||
<DatePicker
|
||||
bind:value={endDate}
|
||||
disabled={!canUpdate}
|
||||
locale={i18n.lang}
|
||||
placeholder={i18n._('toolbar.time.pick_date')}
|
||||
class="w-fit grow"
|
||||
onchange={() => {
|
||||
untrack(() => updateStart());
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
type="time"
|
||||
step={1}
|
||||
disabled={!canUpdate}
|
||||
bind:value={endTime}
|
||||
class="w-fit"
|
||||
onchange={() => {
|
||||
untrack(() => updateStart());
|
||||
}}
|
||||
/>
|
||||
<div class="flex flex-col gap-1">
|
||||
<Label class="flex flex-row">
|
||||
<CircleStop size="16" />
|
||||
{i18n._('toolbar.time.end')}
|
||||
</Label>
|
||||
<div class="flex flex-row gap-1.5">
|
||||
<DatePicker
|
||||
bind:value={endDate}
|
||||
disabled={!canUpdate}
|
||||
locale={i18n.lang}
|
||||
placeholder={i18n._('toolbar.time.pick_date')}
|
||||
class="w-fit grow"
|
||||
onchange={() => {
|
||||
untrack(() => updateStart());
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
type="time"
|
||||
step={1}
|
||||
disabled={!canUpdate}
|
||||
bind:value={endTime}
|
||||
class="w-fit"
|
||||
onchange={() => {
|
||||
untrack(() => updateStart());
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{#if $gpxStatistics.global.time.moving === 0 || $gpxStatistics.global.time.moving === undefined}
|
||||
<div class="mt-0.5 flex flex-row gap-1 items-center">
|
||||
@@ -314,11 +318,11 @@
|
||||
</div>
|
||||
{/if}
|
||||
</fieldset>
|
||||
<div class="flex flex-row gap-2 items-center">
|
||||
<div class="flex flex-row gap-1.5 items-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={!canUpdate}
|
||||
class="grow shrink whitespace-normal h-fit"
|
||||
class="grow shrink whitespace-normal h-fit min-h-8 py-1"
|
||||
onclick={() => {
|
||||
let effectiveSpeed = getSpeed();
|
||||
if (
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
|
||||
let props: { class?: string } = $props();
|
||||
|
||||
let sliderValue = $state([50]);
|
||||
let sliderValue = $state(50);
|
||||
const maxTolerance = 10000;
|
||||
|
||||
let validSelection = $derived(
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
$effect(() => {
|
||||
tolerance.set(
|
||||
minTolerance * 2 ** (sliderValue[0] / (100 / Math.log2(maxTolerance / minTolerance)))
|
||||
minTolerance * 2 ** (sliderValue / (100 / Math.log2(maxTolerance / minTolerance)))
|
||||
);
|
||||
});
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
|
||||
<div class="flex flex-col gap-3 w-full max-w-80 {props.class ?? ''}">
|
||||
<div class="p-2">
|
||||
<Slider bind:value={sliderValue} min={0} max={100} step={1} type="multiple" />
|
||||
<Slider bind:value={sliderValue} min={0} max={100} step={1} type="single" />
|
||||
</div>
|
||||
<Label class="flex flex-row justify-between">
|
||||
<span>{i18n._('toolbar.reduce.tolerance')}</span>
|
||||
|
||||
@@ -191,7 +191,7 @@
|
||||
<ButtonWithTooltip
|
||||
label={i18n._('toolbar.routing.reverse.tooltip')}
|
||||
variant="outline"
|
||||
class="gap-1 text-xs"
|
||||
class="gap-1 text-xs px-1.5 py-1.5 h-fit"
|
||||
disabled={!validSelection}
|
||||
onclick={fileActions.reverseSelection}
|
||||
>
|
||||
@@ -200,7 +200,7 @@
|
||||
<ButtonWithTooltip
|
||||
label={i18n._('toolbar.routing.route_back_to_start.tooltip')}
|
||||
variant="outline"
|
||||
class="gap-1 text-xs"
|
||||
class="gap-1 text-xs px-1.5 py-1.5 h-fit"
|
||||
disabled={!validSelection}
|
||||
onclick={() => {
|
||||
const selected = selection.getOrderedSelection();
|
||||
@@ -236,14 +236,14 @@
|
||||
<ButtonWithTooltip
|
||||
label={i18n._('toolbar.routing.round_trip.tooltip')}
|
||||
variant="outline"
|
||||
class="gap-1 text-xs"
|
||||
class="gap-1 text-xs px-1.5 py-1.5 h-fit"
|
||||
disabled={!validSelection}
|
||||
onclick={fileActions.createRoundTripForSelection}
|
||||
>
|
||||
<Repeat class="size-3" />{i18n._('toolbar.routing.round_trip.button')}
|
||||
</ButtonWithTooltip>
|
||||
</div>
|
||||
<div class="w-full flex flex-row gap-2 items-end justify-between">
|
||||
<div class="w-full flex flex-row gap-1 items-end justify-between">
|
||||
<Help link={getURLForLanguage(i18n.lang, '/help/toolbar/routing')}>
|
||||
{#if !validSelection}
|
||||
{i18n._('toolbar.routing.help_no_file')}
|
||||
|
||||
@@ -161,66 +161,73 @@
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-3 w-full max-w-96 {props.class ?? ''}">
|
||||
<fieldset class="flex flex-col gap-2">
|
||||
<Label for="name">{i18n._('menu.metadata.name')}</Label>
|
||||
<Input
|
||||
bind:value={name}
|
||||
id="name"
|
||||
class="font-semibold h-8"
|
||||
disabled={!canCreate && !$selectedWaypoint}
|
||||
/>
|
||||
<Label for="description">{i18n._('menu.metadata.description')}</Label>
|
||||
<Textarea
|
||||
bind:value={description}
|
||||
id="description"
|
||||
disabled={!canCreate && !$selectedWaypoint}
|
||||
class="min-h-8 h-8 py-1 px-3 text-sm"
|
||||
/>
|
||||
<Label for="symbol">{i18n._('toolbar.waypoint.icon')}</Label>
|
||||
<Select.Root bind:value={sym} type="single">
|
||||
<Select.Trigger
|
||||
id="symbol"
|
||||
size="sm"
|
||||
class="w-full"
|
||||
<fieldset class="flex flex-col gap-1.5">
|
||||
<div class="flex flex-col gap-1">
|
||||
<Label for="name">{i18n._('menu.metadata.name')}</Label>
|
||||
<Input
|
||||
bind:value={name}
|
||||
id="name"
|
||||
class="font-semibold"
|
||||
disabled={!canCreate && !$selectedWaypoint}
|
||||
>
|
||||
<span class="flex flex-row gap-1.5 items-center">
|
||||
{#if symbolKey}
|
||||
{#if symbols[symbolKey].icon}
|
||||
{@const Component = symbols[symbolKey].icon}
|
||||
<Component size="14" />
|
||||
{/if}
|
||||
{i18n._(`gpx.symbol.${symbolKey}`)}
|
||||
{:else}
|
||||
{sym}
|
||||
{/if}
|
||||
</span>
|
||||
</Select.Trigger>
|
||||
<Select.Content class="max-h-60 overflow-y-scroll">
|
||||
{#each sortedSymbols as [key, symbol]}
|
||||
<Select.Item value={symbol.value}>
|
||||
<span>
|
||||
{#if symbol.icon}
|
||||
{@const Component = symbol.icon}
|
||||
<Component size="14" class="inline-block align-sub" />
|
||||
{:else}
|
||||
<span class="w-4 inline-block"></span>
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<Label for="description">{i18n._('menu.metadata.description')}</Label>
|
||||
<Textarea
|
||||
bind:value={description}
|
||||
id="description"
|
||||
disabled={!canCreate && !$selectedWaypoint}
|
||||
class="min-h-8 h-8 py-1 px-3 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<Label for="symbol">{i18n._('toolbar.waypoint.icon')}</Label>
|
||||
<Select.Root bind:value={sym} type="single">
|
||||
<Select.Trigger
|
||||
id="symbol"
|
||||
class="w-full"
|
||||
disabled={!canCreate && !$selectedWaypoint}
|
||||
>
|
||||
<span class="flex flex-row gap-1.5 items-center">
|
||||
{#if symbolKey}
|
||||
{#if symbols[symbolKey].icon}
|
||||
{@const Component = symbols[symbolKey].icon}
|
||||
<Component size="14" />
|
||||
{/if}
|
||||
{i18n._(`gpx.symbol.${key}`)}
|
||||
</span>
|
||||
</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
<Label for="link">{i18n._('toolbar.waypoint.link')}</Label>
|
||||
<Input
|
||||
bind:value={link}
|
||||
id="link"
|
||||
class="h-8"
|
||||
disabled={!canCreate && !$selectedWaypoint}
|
||||
/>
|
||||
<div class="flex flex-row gap-2">
|
||||
<div class="grow flex flex-col gap-2">
|
||||
{i18n._(`gpx.symbol.${symbolKey}`)}
|
||||
{:else}
|
||||
{sym}
|
||||
{/if}
|
||||
</span>
|
||||
</Select.Trigger>
|
||||
<Select.Content class="max-h-60">
|
||||
{#each sortedSymbols as [key, symbol]}
|
||||
<Select.Item value={symbol.value}>
|
||||
<span>
|
||||
{#if symbol.icon}
|
||||
{@const Component = symbol.icon}
|
||||
<Component size="14" class="inline-block align-sub" />
|
||||
{:else}
|
||||
<span class="w-4 inline-block"></span>
|
||||
{/if}
|
||||
{i18n._(`gpx.symbol.${key}`)}
|
||||
</span>
|
||||
</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
</div>
|
||||
<div class="flex flex-col gap-1">
|
||||
<Label for="link">{i18n._('toolbar.waypoint.link')}</Label>
|
||||
<Input
|
||||
bind:value={link}
|
||||
id="link"
|
||||
class="h-8"
|
||||
disabled={!canCreate && !$selectedWaypoint}
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-row gap-1.5">
|
||||
<div class="grow flex flex-col gap-1">
|
||||
<Label for="latitude">{i18n._('toolbar.waypoint.latitude')}</Label>
|
||||
<Input
|
||||
bind:value={latitude}
|
||||
@@ -233,7 +240,7 @@
|
||||
disabled={!canCreate && !$selectedWaypoint}
|
||||
/>
|
||||
</div>
|
||||
<div class="grow flex flex-col gap-2">
|
||||
<div class="grow flex flex-col gap-1">
|
||||
<Label for="longitude">{i18n._('toolbar.waypoint.longitude')}</Label>
|
||||
<Input
|
||||
bind:value={longitude}
|
||||
@@ -248,11 +255,11 @@
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div class="flex flex-row gap-2 items-center">
|
||||
<div class="flex flex-row gap-1.5 items-center">
|
||||
<Button
|
||||
variant="outline"
|
||||
disabled={!canCreate && !$selectedWaypoint}
|
||||
class="grow whitespace-normal h-fit"
|
||||
class="grow shrink h-fit min-h-8 whitespace-normal py-1"
|
||||
onclick={createOrUpdateWaypoint}
|
||||
>
|
||||
{#if $selectedWaypoint}
|
||||
|
||||
Reference in New Issue
Block a user