fix: dropdown menu positions correctly
mellbacon committed
Jun 2, 2023 at 12:55 UTC
d5457fe1edb33bf6d790c8dd5558ef5e24562656
2 files changed
+30
-28
src/lib/EditorTabList.svelte
+5
-5
@@ -43,6 +43,9 @@
43
export function closeTab(tabid: number) {
44
editorTab.closeTab(tabid);
45
}
46
+ function closeAllTabs() {
47
+ editorTab.closeAllTabs();
48
+ }
49
50
export let hidden = editorTab.hidden;
51
export let isfile = editorTab.isfile;
@@ -51,12 +54,9 @@
54
<div id="editor-tabs" class:hidden={$hidden}>
55
<TabList tabs={tabs} on:closetab={(e) => {closeTab(e.detail.tabid)}} on:select={(e) => {editorTab.setActive(e.detail.tabid)}}></TabList>
56
<div class="tab-toolbar">
54
- <!-- TODO: Fix dropdown position
55
- <Dropdown right menu={{icon: VerticalDots, children: [
56
- {name: "Close All Tabs", action: () => {editorTab.CloseAllTabs()}},
57
- {name: "Close Saved Tabs", disabled: true}
57
+ <Dropdown right menu={{icon: VerticalDots, children: [
58
+ {name: "Close All Tabs", action: () => {closeAllTabs()}},
59
]}}></Dropdown>
59
- -->
60
</div>
61
</div>
62
src/lib/utility/Dropdown.svelte
+25
-23
@@ -11,13 +11,13 @@
11
afterUpdate(() => {
12
if (open && dropdownList) {
13
const { height , left, width, top } = button.getBoundingClientRect();
14
- dropdownList.style.top = `${height + top}px`;
14
+ dropdownList.style.top = `${height}px`;
15
if (right) {
16
- dropdownList.style.right = `calc(100% - ${left + width}px`;
16
+ dropdownList.style.right = `0px`;
17
dropdownList.style.left = `auto`;
18
}
19
else {
20
- dropdownList.style.left = `${left}px`;
20
+ dropdownList.style.left = `${0}px`;
21
}
22
}
23
})
@@ -36,28 +36,27 @@
36
{:else}
37
{menu.menuname}
38
{/if}
39
+ {#if open}
40
+ <div bind:this={dropdownList} class="dropdown-list">
41
+ {#each menu.children as child}
42
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
43
+ <div class="dropdown-item" class:disabled={child.disabled} on:click={() => {
44
+ if (!child.disabled) {
45
+ child.action();
46
+ }
47
+ }}>
48
+ <span class="item-name">
49
+ {child.name}
50
+ </span>
51
+ {#if child.shortcut}
52
+ <span class="shortcut">{child.shortcut}</span>
53
+ {/if}
54
+ </div>
55
+ {/each}
56
+ </div>
57
+ {/if}
58
</div>
59
41
-{#if open}
42
- <div bind:this={dropdownList} class="dropdown-list">
43
- {#each menu.children as child}
44
- <!-- svelte-ignore a11y-click-events-have-key-events -->
45
- <div class="dropdown-item" class:disabled={child.disabled} on:click={() => {
46
- if (!child.disabled) {
47
- child.action();
48
- }
49
- }}>
50
- <span class="item-name">
51
- {child.name}
52
- </span>
53
- {#if child.shortcut}
54
- <span class="shortcut">{child.shortcut}</span>
55
- {/if}
56
- </div>
57
- {/each}
58
- </div>
59
-{/if}
60
-
60
<style lang="scss">
61
.dropdown-button {
62
height: 100%;
@@ -67,6 +66,7 @@
66
font-size: 0.875rem;
67
min-width: 2.2rem;
68
padding: 0 5px;
69
+ position: relative;
70
:global(svg) {
71
width: 18px;
72
height: 18px;
@@ -78,10 +78,12 @@
78
flex-direction: column;
79
justify-content: center;
80
min-width: 11.5rem;
81
+ width: max-content;
82
align-items: center;
83
padding: 3px 0;
84
box-shadow: rgb(0 0 0 / 10%) 0px 0px 4px 2px;
85
border-radius: 3px;
86
+ z-index: 9999;
87
}
88
.dropdown-item {
89
display: flex;