tool strip button, execute current command

packages/web/src/buttons/ToolStripButton.svelte

@@ -5,7 +5,6 @@
   export let disabled = false;
   export let icon = null;
   export let title = null;
-  export let externalImage = null;
 
   const dispatch = createEventDispatcher();
 
@@ -17,12 +16,8 @@
 
 <div class="button" class:disabled {title}>
   <div class="inner" class:disabled on:click={handleClick}>
-    {#if externalImage}
-      <img src={externalImage} />
-    {:else}
-      <span class="icon" class:disabled><FontIcon {icon} /></span>
-      <slot />
-    {/if}
+    <span class="icon" class:disabled><FontIcon {icon} /></span>
+    <slot />
   </div>
 </div>
 
@@ -63,8 +58,4 @@
     border-radius: 4px;
     cursor: pointer;
   }
-  img {
-    width: 20px;
-    height: 20px;
-  }
 </style>

packages/web/src/buttons/ToolStripCommandButton.svelte

@@ -24,6 +24,7 @@
     icon={cmd.icon}
     on:click={cmd.onClick}
     disabled={!cmd.enabled}
+    {...$$restProps}
   >
     {cmd.toolbarName || cmd.name}
   </svelte:component>

packages/web/src/buttons/ToolStripSplitButton.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import FontIcon from '../icons/FontIcon.svelte';
+
+  export let disabled = false;
+  export let icon = null;
+  export let title = null;
+  export let splitIcon = 'icon chevron-down';
+
+  const dispatch = createEventDispatcher();
+
+  function handleClick(e) {
+    if (disabled) return;
+    dispatch('click', { target: e.target });
+  }
+  function handleSplitClick(e) {
+    if (disabled) return;
+    dispatch('splitclick', { target: e.target });
+  }
+</script>
+
+<div class="button" class:disabled {title}>
+  <div class="inner" class:disabled>
+    <div class="main" class:disabled on:click={handleClick}>
+      <span class="icon" class:disabled><FontIcon {icon} /></span>
+      <slot />
+    </div>
+    <span class="split-icon" class:disabled on:click={handleSplitClick}><FontIcon icon={splitIcon} /></span>
+  </div>
+</div>
+
+<style>
+  .button {
+    /* padding: 5px 15px; */
+    padding-left: 5px;
+    padding-right: 5px;
+    color: var(--theme-font-1);
+    border: 0;
+    align-self: stretch;
+    display: flex;
+    user-select: none;
+  }
+  .button.disabled {
+    color: var(--theme-font-3);
+  }
+  .main {
+    background: var(--theme-bg-2);
+    padding: 3px 0px 3px 8px;
+    border-radius: 4px 0px 0px 4px;
+  }
+  .main:hover:not(.disabled) {
+    background: var(--theme-bg-3);
+  }
+  .main:active:hover:not(.disabled) {
+    background: var(--theme-bg-4);
+  }
+  .split-icon:hover:not(.disabled) {
+    background: var(--theme-bg-3);
+  }
+  .split-icon:active:hover:not(.disabled) {
+    background: var(--theme-bg-4);
+  }
+  .split-icon {
+    background: var(--theme-bg-2);
+    padding: 3px 8px 3px 0px;
+    border-radius: 0px 4px 4px 0px;
+  }
+  .icon {
+    margin-right: 5px;
+    color: var(--theme-font-link);
+  }
+  .icon.disabled {
+    color: var(--theme-font-3);
+  }
+  .inner {
+    white-space: nowrap;
+    align-self: center;
+    cursor: pointer;
+    display: flex;
+  }
+  .main {
+    display: flex;
+    padding-right: 5px;
+  }
+  .split-icon {
+    padding-left: 5px;
+    color: var(--theme-font-link);
+    border-left: 1px solid var(--theme-bg-4);
+  }
+</style>

packages/web/src/buttons/ToolStripSplitDropDownButton.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { currentDropDownMenu } from '../stores';
+
+  import ToolStripButton from './ToolStripButton.svelte';
+  import ToolStripSplitButton from './ToolStripSplitButton.svelte';
+
+  export let menu;
+  export let title = undefined;
+  export let label;
+  export let icon;
+  export let component = ToolStripButton;
+
+  function handleClick(e) {
+    const rect = e.detail.target.getBoundingClientRect();
+    const left = rect.left;
+    const top = rect.bottom;
+    currentDropDownMenu.set({ left, top, items: menu });
+  }
+</script>
+
+<ToolStripSplitButton {title} {icon} on:splitclick={handleClick} on:click>
+  <slot />
+</ToolStripSplitButton>

packages/web/src/tabs/QueryTab.svelte

@@ -71,6 +71,8 @@
   import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
   import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
   import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/ToolStripExportButton.svelte';
+  import ToolStripSplitButton from '../buttons/ToolStripSplitButton.svelte';
+  import ToolStripSplitDropDownButton from '../buttons/ToolStripSplitDropDownButton.svelte';
 
   export let tabid;
   export let conid;
@@ -324,7 +326,12 @@
     </svelte:fragment>
   </VerticalSplitter>
   <svelte:fragment slot="toolstrip">
-    <ToolStripCommandButton command="query.execute" />
+    <ToolStripCommandButton
+      command="query.execute"
+      component={ToolStripSplitDropDownButton}
+      menu={[{ command: 'query.execute' }, { command: 'query.executeCurrent' }]}
+    />
+    <!-- <ToolStripCommandButton command="query.execute" /> -->
     <ToolStripCommandButton command="query.kill" />
     <ToolStripCommandButton command="query.save" />
     <ToolStripCommandButton command="query.formatCode" />