chore: idk
mellbacon committed
Feb 2, 2024 at 23:47 UTC
f82aa22459ad89c2e3683e015d1bdc60623b3927
2 files changed
+33
-3
src/lib/ToolView.svelte
+26
-2
@@ -1,15 +1,24 @@
1
<script lang="ts">
2
import { showBottomPanel } from "./Statusbar.svelte";
3
+ import Ellipsis from "carbon-icons-svelte/lib/OverflowMenuHorizontal.svelte";
4
+ import Menu from "./utility/Menu.svelte";
5
6
export let content = null;
7
export let name = "Tool";
8
7
- function closePanel() {
9
+ function hidePanel() {
10
showBottomPanel.set(false);
11
}
12
</script>
13
<div id="toolview">
12
- <div class="header">{name} <span class="close" on:click={closePanel}></span></div>
14
+ <div class="header">{name}
15
+ <div class="header-tools">
16
+ <div class="tool-buttons">
17
+ <Menu right menu={{icon: Ellipsis, children: [{name: "Kill Terminal", action: () => {}},]}}></Menu>
18
+ </div>
19
+ <span class="close" on:click={hidePanel}></span>
20
+ </div>
21
+ </div>
22
<div class="toolview-container">
23
<svelte:component this={content}></svelte:component>
24
</div>
@@ -32,6 +41,21 @@
41
align-items: center;
42
justify-content: space-between;
43
padding: 0 8px;
44
+ .header-tools {
45
+ display: flex;
46
+ justify-content: center;
47
+ align-items: center;
48
+ gap: 5px;
49
+ flex-direction: row;
50
+ .tool-buttons {
51
+ height: 24px;
52
+ }
53
+ :global(.menu-button) {
54
+ min-width: unset;
55
+ padding: 0 7px;
56
+ border-radius: 3px;
57
+ }
58
+ }
59
.close {
60
font-size: 12px;
61
padding: 0 7px;
src/theme.scss
+7
-1
@@ -308,8 +308,14 @@ button:focus {
308
#toolview {
309
.header {
310
border-bottom: solid 1px var(--window-borderColor);
311
+ color: var(--statusbar-foreground);
312
+ .tool-buttons > div {
313
+ &:hover {
314
+ background-color: var(--statusbar-buttonBackgroundHover);
315
+ color: var(--statusbar-buttonForegroundHover);
316
+ }
317
+ }
318
.close {
312
- color: var(--statusbar-foreground);
319
&:hover {
320
background-color: var(--statusbar-buttonBackgroundHover);
321
color: var(--statusbar-buttonForegroundHover);