fix: #96 when any menu is open, hovering over other menus should switch the active menu
Billy committed
Jul 17, 2023 at 23:22 UTC
5a82490d5a0536e5745ba169b3d1cae211eebaf7
2 files changed
+15
-6
src/lib/Header.svelte
+7
-2
@@ -6,7 +6,12 @@
6
import { addTab, tabs, closeActiveTab } from "../lib/EditorTabList.svelte";
7
import { workspaceName } from "./File";
8
import { commands } from "../config/commands";
9
-
9
+
10
+ let menuOpen = false;
11
+ const toggleMenu = () => {
12
+ menuOpen = !menuOpen;
13
+ }
14
+
15
const items = [
16
{menuname: "File", children: [
17
{name: "New File", shortcut: commands.addEditorTab.keybind, action: commands.addEditorTab.command},
@@ -65,7 +70,7 @@
70
<div id="logo"></div>
71
<div id="menubar">
72
{#each items as item}
68
- <Dropdown menu={item}></Dropdown>
73
+ <Dropdown menu={item} getState={() => menuOpen} onClick={toggleMenu}></Dropdown>
74
{/each}
75
</div>
76
<div class="divider"></div>
src/lib/utility/Dropdown.svelte
+8
-4
@@ -1,6 +1,9 @@
1
<script lang="ts">
2
import { afterUpdate } from 'svelte';
3
export let menu;
4
+
5
+ export let getState = () => open;
6
+ export let onClick = () => {open=!open};
7
8
export let right = false;
9
@@ -9,7 +12,7 @@
12
let open = false;
13
14
afterUpdate(() => {
12
- if (open && dropdownList) {
15
+ if (open && getState() && dropdownList) {
16
const { height , left, width, top } = button.getBoundingClientRect();
17
dropdownList.style.top = `${height}px`;
18
if (right) {
@@ -24,19 +27,20 @@
27
</script>
28
29
<svelte:window on:click={(e) => {
27
- if (open && !button.contains(e.target)) {
30
+ if (open && getState() && !button.contains(e.target)) {
31
open = false;
32
+ onClick();
33
}
34
}}></svelte:window>
35
36
<!-- svelte-ignore a11y-click-events-have-key-events -->
33
-<div bind:this={button} class="dropdown-button" class:open on:click={() => {open = !open}}>
37
+<div bind:this={button} class="dropdown-button" class:open on:click={() => {onClick(); open=true}} on:mouseenter={() => open = true} on:mouseleave={() => open=false}>
38
{#if menu.icon}
39
<svelte:component this={menu.icon}></svelte:component>
40
{:else}
41
{menu.menuname}
42
{/if}
39
- {#if open}
43
+ {#if open && getState()}
44
<div bind:this={dropdownList} class="dropdown-list">
45
{#each menu.children as child}
46
<!-- svelte-ignore a11y-click-events-have-key-events -->