fix: tablist no longer overflowing container
mellbacon committed
Aug 29, 2023 at 21:48 UTC
0448131ec21616824552b44945d3be01855f5660
4 files changed
+33
-11
src/App.svelte
+3
-1
@@ -4,7 +4,7 @@
4
import { Pane, Splitpanes } from 'svelte-splitpanes';
5
import SidebarView from "./lib/SidebarView.svelte";
6
import Statusbar from "./lib/Statusbar.svelte";
7
- import EditorTabList, {hidden} from "./lib/EditorTabList.svelte";
7
+ import EditorTabList, {hidden, updateTablistWidth} from "./lib/EditorTabList.svelte";
8
import { onMount } from "svelte";
9
import { appWindow } from '@tauri-apps/api/window';
10
import { writable } from "svelte/store";
@@ -35,6 +35,8 @@
35
}
36
37
async function updateMinPanelSize() {
38
+
39
+ updateTablistWidth();
40
if (!await appWindow.isFocused()) {
41
return;
42
}
src/lib/EditorTabList.svelte
+19
-9
@@ -3,19 +3,29 @@
3
import Dropdown from "./utility/Dropdown.svelte";
4
import TabList from "./Tab/TabList.svelte";
5
import { Tab } from "./Tab/Tab";
6
- import { afterUpdate } from "svelte";
6
+ import { afterUpdate, onMount } from "svelte";
7
+ import { appWindow } from "@tauri-apps/api/window";
8
+ import { writable } from "svelte/store";
9
8
- let toolbar: HTMLElement = null;
9
- let tablist: HTMLElement = null;
10
-
11
- $: width = "";
10
+ onMount(() => {
11
+ appWindow.onResized(() => {
12
+ updateTablistWidth();
13
+ })
14
+ })
15
16
afterUpdate(() => {
14
- let tablistwidth = tablist.parentElement.parentElement.parentElement.clientWidth;
15
- width = `${tablistwidth - toolbar.clientWidth}px`;
17
+ updateTablistWidth();
18
})
19
</script>
20
<script lang="ts" context="module">
21
+
22
+ let computedWidth = writable("");
23
+ let toolbar: HTMLElement = null;
24
+ let tablist: HTMLElement = null;
25
+ export function updateTablistWidth() {
26
+ let tablistwidth = tablist.nextElementSibling.clientWidth;
27
+ computedWidth.set(`${tablistwidth - toolbar.clientWidth}px`);
28
+ }
29
let activetabid = null;
30
class EditorTab {
31
id: number;
@@ -84,7 +94,7 @@
94
export let tabs = editorTab.tabs;
95
</script>
96
<div id="editor-tabs" bind:this={tablist} class:hidden={$hidden}>
87
- <TabList tabs={tabs} {width} on:closetab={async (e) => {await closeTab(e.detail.tabid)}} on:select={(e) => {editorTab.setActive(e.detail.tabid)}}></TabList>
97
+ <TabList width={$computedWidth} tabs={tabs} on:closetab={async (e) => {await closeTab(e.detail.tabid)}} on:select={(e) => {editorTab.setActive(e.detail.tabid)}}></TabList>
98
<div class="tab-toolbar" bind:this={toolbar}>
99
<Dropdown right menu={{icon: VerticalDots, children: [
100
{name: "Close All Tabs", action: async () => {await closeAllTabs()}},
@@ -97,7 +107,7 @@
107
visibility: hidden;
108
}
109
#editor-tabs {
100
- width: -webkit-fill-available;
110
+ width: 100%;
111
display: flex;
112
justify-content: space-between;
113
}
src/lib/SidebarView.svelte
+10
@@ -1,8 +1,18 @@
1
<script lang="ts">
2
+ import { onDestroy, onMount } from "svelte";
3
import { treeLoading, dirToLoad, dirLoadFail } from "./File";
4
import ProgressBar from "./utility/ProgressBar.svelte";
5
+ import { updateTablistWidth } from "./EditorTabList.svelte";
6
7
export let content = null;
8
+
9
+ onMount(() => {
10
+ updateTablistWidth();
11
+ })
12
+
13
+ onDestroy(() => {
14
+ updateTablistWidth();
15
+ })
16
</script>
17
<div id="sidebarview">
18
{#if content}
src/lib/Tab/TabList.svelte
+1
-1
@@ -38,7 +38,7 @@
38
}
39
})
40
</script>
41
-<div bind:this={tabcontainer} id="tablist" style="max-width: {width};">
41
+<div bind:this={tabcontainer} id="tablist" style="max-width: {width}">
42
{#each $tabs as tab}
43
<Tab on:closetab on:select id={tab.id} label={tab.label} path={tab.path} active={tab.active} saved={tab.saved} />
44
{/each}