tab toolbar POC

packages/web/public/dimensions.css

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

packages/web/src/datagrid/DataGridCore.svelte

@@ -43,6 +43,8 @@
     id: 'dataGrid.insertNewRow',
     category: 'Data grid',
     name: 'Insert new row',
+    toolbarName: 'New row',
+    icon: 'icon add',
     keyText: 'Insert',
     testEnabled: () => getCurrentDataGrid()?.getGrider()?.editable,
     onClick: () => getCurrentDataGrid().insertNewRow(),

packages/web/src/tabs/TableDataTab.svelte

@@ -54,6 +54,8 @@
   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';
 
   export let tabid;
   export let conid;
@@ -116,7 +118,8 @@
   $: setLocalStorage('dataGrid_collapsedLeftColumn', $collapsedLeftColumnStore);
 </script>
 
-<TableDataGrid
+<TabToolbarContainer>
+  <TableDataGrid
     {...$$props}
     config={$config}
     setConfig={config.update}
@@ -126,7 +129,14 @@
     focusOnVisible
     {changeSetStore}
     {dispatchChangeSet}
-/>
+  />
+
+  <svelte:fragment slot="toolbar">
+    <ToolbarCommandButton command="dataGrid.refresh" />
+    <ToolbarCommandButton command="tableData.save" />
+    <ToolbarCommandButton command="dataGrid.insertNewRow" />
+  </svelte:fragment>
+</TabToolbarContainer>
 
 <StatusBarTabItem
   text="Open structure"

packages/web/src/widgets/RoundToolbarButton.svelte

@@ -0,0 +1,69 @@
+<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 externalImage = null;
+
+  const dispatch = createEventDispatcher();
+
+  function handleClick(e) {
+    if (disabled) return;
+    dispatch('click');
+  }
+</script>
+
+<div class="button" on:click={handleClick} class:disabled {title}>
+  <div class="inner" class:disabled>
+    {#if externalImage}
+      <img src={externalImage} />
+    {:else}
+      <span class="icon" class:disabled><FontIcon {icon} /></span>
+      <slot />
+    {/if}
+  </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);
+  }
+  .inner:hover:not(.disabled) {
+    background: var(--theme-bg-3);
+  }
+  .inner:active:hover:not(.disabled) {
+    background: var(--theme-bg-4);
+  }
+  .icon {
+    margin-right: 5px;
+    color: var(--theme-font-link);
+  }
+  .icon.disabled {
+    color: var(--theme-font-3);
+  }
+  .inner {
+    /* position: relative;
+    top: 2px; */
+    white-space: nowrap;
+    align-self: center;
+    background: var(--theme-bg-2);
+    padding: 2px 8px;
+    border-radius: 4px;
+  }
+  img {
+    width: 20px;
+    height: 20px;
+  }
+</style>

packages/web/src/widgets/TabToolbarContainer.svelte

@@ -0,0 +1,27 @@
+<div class="toolbar">
+  <slot name="toolbar" />
+</div>
+
+<div class="content">
+  <slot />
+</div>
+
+<style>
+  .content {
+    position: absolute;
+    left: 0;
+    top: var(--dim-toolbar-height);
+    right: 0;
+    bottom: 0;
+    display: flex;
+  }
+
+  .toolbar {
+    position: absolute;
+    left: 0;
+    height: var(--dim-toolbar-height);
+    right: 0;
+    display: flex;
+    background: var(--theme-bg-0);
+  }
+</style>

packages/web/src/widgets/ToolbarButton.svelte

@@ -36,14 +36,15 @@
     border-right: 1px solid var(--theme-border);
     align-self: stretch;
     display: flex;
+    user-select: none;
   }
   .button.disabled {
     color: var(--theme-font-3);
   }
-  .button:hover {
+  .button:hover:not(.disabled) {
     background: var(--theme-bg-2);
   }
-  .button:active:hover {
+  .button:active:hover:not(.disabled) {
     background: var(--theme-bg-3);
   }
   .icon {

packages/web/src/widgets/ToolbarCommandButton.svelte

@@ -0,0 +1,29 @@
+<script context="module">
+  function getCommandTitle(command) {
+    let res = command.text;
+    if (command.keyText || command.keyTextFromGroup) res += ` (${command.keyText || command.keyTextFromGroup})`;
+    return res;
+  }
+</script>
+
+<script lang="ts">
+  import { commandsCustomized } from '../stores';
+  import RoundToolbarButton from './RoundToolbarButton.svelte';
+
+  export let command;
+  export let component = RoundToolbarButton;
+
+  $: cmd = Object.values($commandsCustomized).find((x: any) => x.id == command) as any;
+</script>
+
+{#if cmd}
+  <svelte:component
+    this={component}
+    title={getCommandTitle(cmd)}
+    icon={cmd.icon}
+    on:click={cmd.onClick}
+    disabled={!cmd.enabled}
+  >
+    {cmd.toolbarName || cmd.name}
+  </svelte:component>
+{/if}