Revert "Switching of menus on hover when there is any menu open"
mellobacon committed
Jul 17, 2023 at 13:55 UTC
75eaad9082444de745818377b3e4ce9e3f4ea874
2 files changed
+6
-15
src/lib/Header.svelte
+2
-7
@@ -6,12 +6,7 @@
6
import { addTab, tabs, closeActiveTab } from "../lib/EditorTabList.svelte";
7
import { workspaceName } from "./File";
8
import { commands } from "../config/commands";
9
-
10
- let menuOpen = false;
11
- const toggleMenu = () => {
12
- menuOpen = !menuOpen;
13
- }
14
-
9
+
10
const items = [
11
{menuname: "File", children: [
12
{name: "New File", shortcut: commands.addEditorTab.keybind, action: commands.addEditorTab.command},
@@ -70,7 +65,7 @@
65
<div id="logo"></div>
66
<div id="menubar">
67
{#each items as item}
73
- <Dropdown menu={item} getState={() => menuOpen} onClick={toggleMenu}></Dropdown>
68
+ <Dropdown menu={item}></Dropdown>
69
{/each}
70
</div>
71
<div class="divider"></div>
src/lib/utility/Dropdown.svelte
+4
-8
@@ -1,9 +1,6 @@
1
<script lang="ts">
2
import { afterUpdate } from 'svelte';
3
export let menu;
4
-
5
- export let getState = () => open;
6
- export let onClick = () => {open=true};
4
5
export let right = false;
6
@@ -12,7 +9,7 @@
9
let open = false;
10
11
afterUpdate(() => {
15
- if (open && getState() && dropdownList) {
12
+ if (open && dropdownList) {
13
const { height , left, width, top } = button.getBoundingClientRect();
14
dropdownList.style.top = `${height}px`;
15
if (right) {
@@ -27,20 +24,19 @@
24
</script>
25
26
<svelte:window on:click={(e) => {
30
- if (open && getState() && !button.contains(e.target)) {
27
+ if (open && !button.contains(e.target)) {
28
open = false;
32
- onClick();
29
}
30
}}></svelte:window>
31
32
<!-- svelte-ignore a11y-click-events-have-key-events -->
37
-<div bind:this={button} class="dropdown-button" class:open on:click={() => {onClick(); open=true}} on:mouseenter={() => open = true} on:mouseleave={() => open=false}>
33
+<div bind:this={button} class="dropdown-button" class:open on:click={() => {open = !open}}>
34
{#if menu.icon}
35
<svelte:component this={menu.icon}></svelte:component>
36
{:else}
37
{menu.menuname}
38
{/if}
43
- {#if open && getState()}
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 -->