panel should autoresize on window resize
mellbacon committed
Apr 28, 2023 at 18:39 UTC
1e33d91ee787830b794c0bb8cfcb6cb4ed031f45
1 file changed
+41
-3
src/App.svelte
+41
-3
@@ -5,20 +5,58 @@
5
import SidebarView from "./lib/SidebarView.svelte";
6
import Statusbar from "./lib/Statusbar.svelte";
7
import EditorTabList from "./lib/EditorTabList.svelte";
8
- import { onMount } from "svelte";
8
+ import { afterUpdate, onMount } from "svelte";
9
import { loadTheme } from "./config/themehandler";
10
+ import { appWindow } from '@tauri-apps/api/window';
11
+ import { writable } from "svelte/store";
12
+ let resolution = writable(0);
13
+
14
+ let minPanelSize = 10;
15
+ let panelSize = 15;
16
17
onMount(async () => {
18
await loadTheme("dark");
19
+ let size = await appWindow.innerSize();
20
+ resolution.set(size.width);
21
+ updateMinPanelSize();
22
+ appWindow.onResized((e) => {
23
+ resolution.set(e.payload.width);
24
+ updateMinPanelSize();
25
+ })
26
})
27
+
28
+ function updatePanelSize(e) {
29
+ if ($showsidebarview) {
30
+ panelSize = e.detail[0].size
31
+ }
32
+ }
33
+
34
+ function updateMinPanelSize() {
35
+ // TODO: make this better
36
+ if ($resolution <= 900) {
37
+ minPanelSize = 30;
38
+ }
39
+ else if ($resolution <= 1040) {
40
+ minPanelSize = 20;
41
+ }
42
+ else if ($resolution <= 1120) {
43
+ minPanelSize = 17;
44
+ }
45
+ else if ($resolution <= 1300) {
46
+ minPanelSize = 14;
47
+ }
48
+ else if ($resolution > 1300) {
49
+ minPanelSize = 10;
50
+ }
51
+ }
52
</script>
53
54
<Header />
55
<div id="main">
56
<Sidebar />
19
- <Splitpanes theme="editor-panes">
57
+ <Splitpanes on:resized={updatePanelSize} on:resize={updateMinPanelSize} theme="editor-panes">
58
{#if $showsidebarview}
21
- <Pane size={25} minSize={10} maxSize={60}>
59
+ <Pane bind:size={panelSize} bind:minSize={minPanelSize} maxSize={60}>
60
<SidebarView content={$tool.content}></SidebarView>
61
</Pane>
62
{/if}