toolbar => toolstrip

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>