From 2cc74b594e00ae6b0c219a721f461db757b5072e Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sun, 28 Feb 2021 10:17:52 +0100
Subject: [PATCH] dropdown menu implementation

---
 .../web/modals/CurrentDropDownMenu.svelte     | 13 ++++
 packages/web/modals/DropDownMenu.svelte       | 77 +++++++++++++++++++
 packages/web/src/Screen.svelte                |  3 +-
 .../web/src/commands/CommandPalette.svelte    |  1 +
 packages/web/src/stores.ts                    |  1 +
 packages/web/src/utility/contextMenu.ts       | 19 +++++
 packages/web/src/widgets/TabsPanel.svelte     |  9 +++
 7 files changed, 122 insertions(+), 1 deletion(-)
 create mode 100644 packages/web/modals/CurrentDropDownMenu.svelte
 create mode 100644 packages/web/modals/DropDownMenu.svelte
 create mode 100644 packages/web/src/utility/contextMenu.ts

diff --git a/packages/web/modals/CurrentDropDownMenu.svelte b/packages/web/modals/CurrentDropDownMenu.svelte
new file mode 100644
index 000000000..dd08b9830
--- /dev/null
+++ b/packages/web/modals/CurrentDropDownMenu.svelte
@@ -0,0 +1,13 @@
+<script>
+  import { currentDropDownMenu } from '../src/stores';
+  import DropDownMenu from './DropDownMenu.svelte';
+</script>
+
+{#if $currentDropDownMenu}
+  <DropDownMenu
+    left={$currentDropDownMenu.left}
+    top={$currentDropDownMenu.top}
+    items={$currentDropDownMenu.items}
+    on:close={() => ($currentDropDownMenu = null)}
+  />
+{/if}
diff --git a/packages/web/modals/DropDownMenu.svelte b/packages/web/modals/DropDownMenu.svelte
new file mode 100644
index 000000000..4e4cb6229
--- /dev/null
+++ b/packages/web/modals/DropDownMenu.svelte
@@ -0,0 +1,77 @@
+<script>
+  import clickOutside from '../src/utility/clickOutside';
+  import { createEventDispatcher } from 'svelte';
+
+  export let items;
+  export let top;
+  export let left;
+
+  const dispatch = createEventDispatcher();
+
+  function handleClick(item) {
+    dispatch('close');
+    if (item.onClick) item.onClick();
+  }
+</script>
+
+<ul style={`left: ${left}px; top: ${top}px`} use:clickOutside on:clickOutside={() => dispatch('close')}>
+  {#each items as item}
+    {#if item.divider}
+      <li class="divider" />
+    {:else}
+      <li>
+        <a on:click={() => handleClick(item)}>
+          {item.text}
+          {#if item.keyText}
+            <span class="keyText">{item.keyText}</span>
+          {/if}
+        </a>
+      </li>
+    {/if}
+  {/each}
+</ul>
+
+<style>
+  ul {
+    position: absolute;
+    list-style: none;
+    background-color: #fff;
+    border-radius: 4px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+    padding: 5px 0;
+    margin: 2px 0 0;
+    font-size: 14px;
+    text-align: left;
+    min-width: 160px;
+    z-index: 1050;
+    cursor: default;
+  }
+
+  .keyText {
+    font-style: italic;
+    font-weight: bold;
+    text-align: right;
+    margin-left: 16px;
+  }
+
+  a {
+    padding: 3px 20px;
+    line-height: 1.42;
+    display: block;
+    white-space: nop-wrap;
+    color: #262626;
+  }
+
+  a:hover {
+    background-color: #f5f5f5;
+    text-decoration: none;
+    color: #262626;
+  }
+
+  .divider {
+    margin: 9px 0px 9px 0px;
+    border-top: 1px solid #f2f2f2;
+    border-bottom: 1px solid #fff;
+  }
+</style>
diff --git a/packages/web/src/Screen.svelte b/packages/web/src/Screen.svelte
index 8d5ae48ac..7b3f50ff2 100644
--- a/packages/web/src/Screen.svelte
+++ b/packages/web/src/Screen.svelte
@@ -7,7 +7,7 @@
   import CommandPalette from './commands/CommandPalette.svelte';
   import Toolbar from './widgets/Toolbar.svelte';
   import splitterDrag from './utility/splitterDrag';
-  import { update } from 'lodash';
+  import CurrentDropDownMenu from '../modals/CurrentDropDownMenu.svelte';
 </script>
 
 <div class={`${$currentTheme} root`}>
@@ -43,6 +43,7 @@
       <Toolbar />
     </div>
   {/if}
+  <CurrentDropDownMenu />
 </div>
 
 <style>
diff --git a/packages/web/src/commands/CommandPalette.svelte b/packages/web/src/commands/CommandPalette.svelte
index 63ac3c55b..8589ba08a 100644
--- a/packages/web/src/commands/CommandPalette.svelte
+++ b/packages/web/src/commands/CommandPalette.svelte
@@ -46,6 +46,7 @@
     if (command.getSubCommands) {
       parentCommand = command;
       domInput.focus();
+      filter = '';
       selectedIndex = 0;
     } else {
       $visibleCommandPalette = false;
diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts
index 9568d61c5..35e72e757 100644
--- a/packages/web/src/stores.ts
+++ b/packages/web/src/stores.ts
@@ -35,6 +35,7 @@ export const currentTheme = writableWithStorage('theme-light', 'currentTheme');
 export const activeTabId = derived([openedTabs], ([$openedTabs]) => $openedTabs.find(x => x.selected)?.tabid);
 export const visibleToolbar = writableWithStorage(1, 'visibleToolbar');
 export const leftPanelWidth = writable(300);
+export const currentDropDownMenu = writable(null);
 
 subscribeCssVariable(selectedWidget, x => (x ? 1 : 0), '--dim-visible-left-panel');
 subscribeCssVariable(visibleToolbar, x => (x ? 1 : 0), '--dim-visible-toolbar');
diff --git a/packages/web/src/utility/contextMenu.ts b/packages/web/src/utility/contextMenu.ts
new file mode 100644
index 000000000..45b8a5bea
--- /dev/null
+++ b/packages/web/src/utility/contextMenu.ts
@@ -0,0 +1,19 @@
+import _ from 'lodash';
+import { currentDropDownMenu } from '../stores';
+
+export default function contextMenu(node, items) {
+  const handleContextMenu = e => {
+    e.preventDefault();
+    const left = e.pageX;
+    const top = e.pageY;
+    currentDropDownMenu.set({ left, top, items: _.isFunction(items) ? items() : items });
+  };
+
+  node.addEventListener('contextmenu', handleContextMenu);
+
+  return {
+    destroy() {
+      node.removeEventListener('contextmenu', handleContextMenu);
+    },
+  };
+}
diff --git a/packages/web/src/widgets/TabsPanel.svelte b/packages/web/src/widgets/TabsPanel.svelte
index df6c58a33..f8d56f040 100644
--- a/packages/web/src/widgets/TabsPanel.svelte
+++ b/packages/web/src/widgets/TabsPanel.svelte
@@ -25,6 +25,7 @@
 
   import { currentDatabase, openedTabs } from '../stores';
   import { setSelectedTab } from '../utility/common';
+  import contextMenu from '../utility/contextMenu';
 
   $: currentDbKey =
     $currentDatabase && $currentDatabase.name && $currentDatabase.connection
@@ -100,6 +101,13 @@
       closeTab(tabid);
     }
   };
+
+  const tabContextMenu = tabid => () => [
+    {
+      text: 'Close',
+      onClick: () => closeTab(tabid),
+    },
+  ];
 </script>
 
 {#each dbKeys as dbKey}
@@ -115,6 +123,7 @@
           class:selected={tab.selected}
           on:click={e => handleTabClick(e, tab.tabid)}
           on:mouseup={e => handleMouseUp(e, tab.tabid)}
+          use:contextMenu={tabContextMenu(tab.tabid)}
         >
           <FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />
           <span class="file-name">