added css trick to fix tabs going over sidebar border
mellbacon committed
May 8, 2023 at 18:50 UTC
6beb5a6937be4c555dea0821618ab5db5df995cf
2 files changed
+20
-1
src/config/themehandler.ts
+7
@@ -31,3 +31,10 @@ export async function loadTheme(name: string) {
31
}
32
}
33
}
34
+export function getThemeProperty(styleName: string) {
35
+ for (const style of stylesheet.style) {
36
+ if (style === `--${styleName}`) {
37
+ return stylesheet.style.getPropertyValue(style);
38
+ }
39
+ }
40
+}
src/lib/EditorTabList.svelte
+13
-1
@@ -1,10 +1,12 @@
1
<script lang="ts">
2
- import { onMount } from "svelte";
2
+ import { afterUpdate, onMount } from "svelte";
3
import Tab from "./Tab.svelte";
4
import { tabs, hidden, CloseAllTabs } from "./scripts/Tab";
5
import Sortable from 'sortablejs';
6
import VerticalDots from "carbon-icons-svelte/lib/OverflowMenuVertical.svelte";
7
import Dropdown from "./utility/Dropdown.svelte";
8
+ import { showsidebarview } from "./Sidebar.svelte";
9
+ import { getThemeProperty } from "../config/themehandler";
10
11
let tabcontainer = null;
12
@@ -17,6 +19,16 @@
19
sort: true
20
})
21
})
22
+
23
+ afterUpdate(() => {
24
+ // css trick to take care of the tabs overlapping the sidebar border for some reason
25
+ if (!$showsidebarview) {
26
+ tabcontainer.style.borderLeft = `1px solid ${getThemeProperty("window-borderColor")}`;
27
+ }
28
+ else {
29
+ tabcontainer.style.borderLeft = "";
30
+ }
31
+ })
32
</script>
33
<div id="editor-tabs" class:hidden={$hidden}>
34
<div bind:this={tabcontainer} id="editor-tablist">