toolbar => toolstrip

packages/web/public/dimensions.css

@@ -15,7 +15,8 @@
   --dim-visible-toolbar: 0; /* set from JS */
   --dim-visible-titlebar: 0; /* set from JS */
 
-  --dim-toolbar-height: 25px;
+  --dim-toolbar-height: 30px;
+  --dim-toolstrip-height: 28px;
   --dim-titlebar-height: 30px;
   --dim-toolbar-top: calc(var(--dim-titlebar-height) * var(--dim-visible-titlebar));
   --dim-header-top: calc(

packages/web/src/tabs/TableDataTab.svelte

@@ -53,9 +53,9 @@
   import { getBoolSettingsValue } from '../settings/settingsTools';
   import { setContext } from 'svelte';
   import { apiCall } from '../utility/api';
-  import { getLocalStorage, setLocalStorage, setLocalStorage } from '../utility/storageCache';
-  import TabToolbarContainer from '../widgets/TabToolbarContainer.svelte';
-  import ToolbarCommandButton from '../widgets/ToolbarCommandButton.svelte';
+  import { getLocalStorage, setLocalStorage } from '../utility/storageCache';
+  import ToolStripContainer from '../widgets/ToolStripContainer.svelte';
+  import ToolbarCommandButton from '../widgets/ToolStripCommandButton.svelte';
 
   export let tabid;
   export let conid;
@@ -118,7 +118,7 @@
   $: setLocalStorage('dataGrid_collapsedLeftColumn', $collapsedLeftColumnStore);
 </script>
 
-<TabToolbarContainer>
+<ToolStripContainer>
   <TableDataGrid
     {...$$props}
     config={$config}
@@ -131,12 +131,12 @@
     {dispatchChangeSet}
   />
 
-  <svelte:fragment slot="toolbar">
+  <svelte:fragment slot="toolstrip">
     <ToolbarCommandButton command="dataGrid.refresh" />
     <ToolbarCommandButton command="tableData.save" />
     <ToolbarCommandButton command="dataGrid.insertNewRow" />
   </svelte:fragment>
-</TabToolbarContainer>
+</ToolStripContainer>
 
 <StatusBarTabItem
   text="Open structure"

packages/web/src/widgets/ToolStripButton.svelte

@@ -15,8 +15,8 @@
   }
 </script>
 
-<div class="button" on:click={handleClick} class:disabled {title}>
-  <div class="inner" class:disabled>
+<div class="button" class:disabled {title}>
+  <div class="inner" class:disabled on:click={handleClick}>
     {#if externalImage}
       <img src={externalImage} />
     {:else}
@@ -36,7 +36,7 @@
     align-self: stretch;
     display: flex;
     user-select: none;
-}
+  }
   .button.disabled {
     color: var(--theme-font-3);
   }
@@ -59,8 +59,9 @@
     white-space: nowrap;
     align-self: center;
     background: var(--theme-bg-2);
-    padding: 2px 8px;
+    padding: 3px 8px;
     border-radius: 4px;
+    cursor: pointer;
   }
   img {
     width: 20px;

packages/web/src/widgets/ToolStripCommandButton.svelte

@@ -8,10 +8,10 @@
 
 <script lang="ts">
   import { commandsCustomized } from '../stores';
-  import RoundToolbarButton from './RoundToolbarButton.svelte';
+  import ToolStripButton from './ToolStripButton.svelte';
 
   export let command;
-  export let component = RoundToolbarButton;
+  export let component = ToolStripButton;
 
   $: cmd = Object.values($commandsCustomized).find((x: any) => x.id == command) as any;
 </script>

packages/web/src/widgets/ToolStripContainer.svelte

@@ -1,5 +1,5 @@
-<div class="toolbar">
-  <slot name="toolbar" />
+<div class="toolstrip">
+  <slot name="toolstrip" />
 </div>
 
 <div class="content">
@@ -16,7 +16,7 @@
     display: flex;
   }
 
-  .toolbar {
+  .toolstrip {
     position: absolute;
     left: 0;
     height: var(--dim-toolbar-height);

packages/web/src/widgets/ToolbarDropDownButton.svelte

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