chore: renamed dropdown to menu
Signed-off-by: mellobacon <mellodev@outlook.com>
mellobacon committed
Jan 19, 2024 at 17:35 UTC
4b113e6ef99b77fcc8cc0821c96242c5c870208d
3 files changed
+12
-12
src/lib/EditorTabList.svelte
+3
-3
@@ -1,6 +1,6 @@
1
<script lang="ts">
2
import VerticalDots from "carbon-icons-svelte/lib/OverflowMenuVertical.svelte";
3
- import Dropdown from "./utility/Dropdown.svelte";
3
+ import Menu from "./utility/Menu.svelte";
4
import TabList from "./Tab/TabList.svelte";
5
import NotSupported from "./utility/NotSupported.svelte";
6
import { Tab } from "./Tab/Tab";
@@ -102,9 +102,9 @@
102
<div id="editor-tabs" bind:this={tablist} class:hidden={$hidden}>
103
<TabList width={$computedWidth} tabs={tabs} on:closetab={async (e) => {await closeTab(e.detail.tabid)}} on:select={(e) => {editorTab.setActive(e.detail.tabid)}}></TabList>
104
<div class="tab-toolbar" bind:this={toolbar}>
105
- <Dropdown right menu={{icon: VerticalDots, children: [
105
+ <Menu right menu={{icon: VerticalDots, children: [
106
{name: "Close All Tabs", action: async () => {await closeAllTabs()}},
107
- ]}}></Dropdown>
107
+ ]}}></Menu>
108
</div>
109
</div>
110
src/lib/Header.svelte
+3
-3
@@ -1,5 +1,5 @@
1
<script lang="ts">
2
- import Dropdown from "./utility/Dropdown.svelte";
2
+ import Menu from "./utility/Menu.svelte";
3
import settings from "./Settings.svelte";
4
import { Settings } from "carbon-icons-svelte";
5
import { addTab, tabs, closeActiveTab } from "../lib/EditorTabList.svelte";
@@ -64,7 +64,7 @@
64
<div id="logo"></div>
65
<div id="menubar">
66
{#each items as item}
67
- <Dropdown menu={item}></Dropdown>
67
+ <Menu menu={item}></Menu>
68
{/each}
69
</div>
70
<div class="divider"></div>
@@ -75,7 +75,7 @@
75
<div class="tools">
76
77
<div class="settings-button">
78
- <Dropdown right menu={{icon: Settings, children: [
78
+ <Menu right menu={{icon: Settings, children: [
79
{name: "Settings", shortcut: "", action: () => {addTab("Settings", "Settings", new settings({target: document.getElementById("tabview")}))}},
80
{name: "Keymap", disabled: true, shortcut: "", action: () => {console.warn("Feature not implemented yet.")}}
81
]
src/lib/utility/Menu.svelte
renamed
+6
-6
@@ -30,17 +30,17 @@
30
}}></svelte:window>
31
32
<!-- svelte-ignore a11y-click-events-have-key-events -->
33
-<div bind:this={button} class="dropdown-button" class:open on:click={() => {open = !open}}>
33
+<div bind:this={button} class="menu-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}
39
{#if open}
40
- <div bind:this={dropdownList} class="dropdown-list">
40
+ <div bind:this={dropdownList} class="menu-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={() => {
43
+ <div class="menu-item" class:disabled={child.disabled} on:click={() => {
44
if (!child.disabled) {
45
child.action();
46
}
@@ -58,7 +58,7 @@
58
</div>
59
60
<style lang="scss">
61
- .dropdown-button {
61
+ .menu-button {
62
height: 100%;
63
display: flex;
64
align-items: center;
@@ -73,7 +73,7 @@
73
height: 18px;
74
}
75
}
76
- .dropdown-list {
76
+ .menu-list {
77
position: absolute;
78
display: flex;
79
flex-direction: column;
@@ -84,7 +84,7 @@
84
border-radius: 3px;
85
z-index: 9999;
86
}
87
- .dropdown-item {
87
+ .menu-item {
88
display: flex;
89
align-items: center;
90
justify-content: space-between;