From 852f77cf7c345e695905002949ba7be39e4b2cad Mon Sep 17 00:00:00 2001 From: vcoppe Date: Tue, 25 Jun 2024 16:06:11 +0200 Subject: [PATCH] resize panels --- website/src/lib/components/App.svelte | 14 +++-- .../lib/components/ElevationProfile.svelte | 21 +++++--- .../src/lib/components/GPXStatistics.svelte | 54 ++++++++++--------- website/src/lib/components/Map.svelte | 8 ++- website/src/lib/components/Resizer.svelte | 40 ++++++++++++++ .../lib/components/file-list/FileList.svelte | 1 + website/src/lib/db.ts | 12 ++++- 7 files changed, 111 insertions(+), 39 deletions(-) create mode 100644 website/src/lib/components/Resizer.svelte diff --git a/website/src/lib/components/App.svelte b/website/src/lib/components/App.svelte index 68d74cf5..82020dcf 100644 --- a/website/src/lib/components/App.svelte +++ b/website/src/lib/components/App.svelte @@ -8,11 +8,12 @@ import Toolbar from '$lib/components/toolbar/Toolbar.svelte'; import StreetViewControl from '$lib/components/street-view-control/StreetViewControl.svelte'; import LayerControl from '$lib/components/layer-control/LayerControl.svelte'; + import Resizer from '$lib/components/Resizer.svelte'; import { Toaster } from '$lib/components/ui/sonner'; import { settings } from '$lib/db'; - const { verticalFileView, elevationProfile } = settings; + const { verticalFileView, elevationProfile, bottomPanelSize, rightPanelSize } = settings;
@@ -31,7 +32,13 @@
{/if} -
+ {#if $elevationProfile} + + {/if} +
{#if $elevationProfile} @@ -39,7 +46,8 @@
{#if $verticalFileView} - + + {/if} diff --git a/website/src/lib/components/ElevationProfile.svelte b/website/src/lib/components/ElevationProfile.svelte index cdbf55fc..9fbbd359 100644 --- a/website/src/lib/components/ElevationProfile.svelte +++ b/website/src/lib/components/ElevationProfile.svelte @@ -57,7 +57,7 @@ let marker: mapboxgl.Marker | null = null; let dragging = false; - let { distanceUnits, velocityUnits, temperatureUnits } = settings; + let { distanceUnits, velocityUnits, temperatureUnits, bottomPanelSize } = settings; let options = { animation: false, @@ -116,8 +116,8 @@ if (dragging) { marker.remove(); } else { - marker.addTo($map); marker.setLngLat(point.coordinates); + marker.addTo($map); } } return `${$_('quantities.elevation')}: ${getElevationWithUnits(point.y, false)}`; @@ -520,12 +520,16 @@
-
+
-
- +
+ @@ -539,8 +543,11 @@ - - + diff --git a/website/src/lib/components/GPXStatistics.svelte b/website/src/lib/components/GPXStatistics.svelte index 942c334a..b4fb984a 100644 --- a/website/src/lib/components/GPXStatistics.svelte +++ b/website/src/lib/components/GPXStatistics.svelte @@ -11,7 +11,7 @@ import { _ } from 'svelte-i18n'; import type { GPXStatistics } from 'gpx'; - const { velocityUnits, elevationProfile } = settings; + const { velocityUnits, elevationProfile, bottomPanelSize } = settings; let statistics: GPXStatistics; @@ -48,29 +48,33 @@ {$_('quantities.elevation')} - - - - - / - - - {$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_( - 'quantities.moving' - )} / {$_('quantities.total')}) - - - - - - / - - - {$_('quantities.time')} ({$_('quantities.moving')} / {$_('quantities.total')}) - + {#if $bottomPanelSize > 120 || !$elevationProfile} + + + + + / + + + {$velocityUnits === 'speed' ? $_('quantities.speed') : $_('quantities.pace')} ({$_( + 'quantities.moving' + )} / {$_('quantities.total')}) + + {/if} + {#if $bottomPanelSize > 160 || !$elevationProfile} + + + + + / + + + {$_('quantities.time')} ({$_('quantities.moving')} / {$_('quantities.total')}) + + {/if} diff --git a/website/src/lib/components/Map.svelte b/website/src/lib/components/Map.svelte index 80c51000..8dc9230b 100644 --- a/website/src/lib/components/Map.svelte +++ b/website/src/lib/components/Map.svelte @@ -21,7 +21,8 @@ easing: () => 1 }; - const { distanceUnits, elevationProfile, verticalFileView } = settings; + const { distanceUnits, elevationProfile, verticalFileView, bottomPanelSize, rightPanelSize } = + settings; let scaleControl = new mapboxgl.ScaleControl({ unit: $distanceUnits }); @@ -117,7 +118,10 @@ scaleControl.setUnit($distanceUnits); } - $: if ($map && (!$verticalFileView || !$elevationProfile)) { + $: if ( + $map && + (!$verticalFileView || !$elevationProfile || $bottomPanelSize || $rightPanelSize) + ) { $map.resize(); } diff --git a/website/src/lib/components/Resizer.svelte b/website/src/lib/components/Resizer.svelte new file mode 100644 index 00000000..9e3494ee --- /dev/null +++ b/website/src/lib/components/Resizer.svelte @@ -0,0 +1,40 @@ + + +
diff --git a/website/src/lib/components/file-list/FileList.svelte b/website/src/lib/components/file-list/FileList.svelte index 30f9751e..46549f95 100644 --- a/website/src/lib/components/file-list/FileList.svelte +++ b/website/src/lib/components/file-list/FileList.svelte @@ -53,6 +53,7 @@ class="flex {orientation === 'vertical' ? 'flex-col py-1 pl-1 min-h-screen' : 'flex-row'} {$$props.class ?? ''}" + {...$$restProps} > {#if orientation === 'vertical'} diff --git a/website/src/lib/db.ts b/website/src/lib/db.ts index 8af0bd54..c2ea20d5 100644 --- a/website/src/lib/db.ts +++ b/website/src/lib/db.ts @@ -47,10 +47,16 @@ function dexieSettingStore(setting: string, initial: T): Writable { }); return { subscribe: store.subscribe, - set: (value: any) => db.settings.put(value, setting), + set: (value: any) => { + if (value !== get(store)) { + db.settings.put(value, setting); + } + }, update: (callback: (value: any) => any) => { let newValue = callback(get(store)); - db.settings.put(newValue, setting); + if (newValue !== get(store)) { + db.settings.put(newValue, setting); + } } }; } @@ -105,6 +111,8 @@ export const settings = { fileOrder: dexieSettingStore('fileOrder', []), defaultOpacity: dexieSettingStore('defaultOpacity', 0.7), defaultWeight: dexieSettingStore('defaultWeight', 5), + bottomPanelSize: dexieSettingStore('bottomPanelSize', 192), + rightPanelSize: dexieSettingStore('rightPanelSize', 240), }; // Wrap Dexie live queries in a Svelte store to avoid triggering the query for every subscriber