toolbar shows tab related commands aligned to right

packages/web/src/commands/registerCommand.ts

@@ -27,6 +27,7 @@ export interface GlobalCommand {
   menuName?: string;
   toolbarOrder?: number;
   disableHandleKeyText?: string;
+  isRelatedToTab?: boolean,
 }
 
 export default function registerCommand(command: GlobalCommand) {

packages/web/src/commands/stdCommands.ts

@@ -251,6 +251,7 @@ export function registerFileCommands({
       // keyText: 'Ctrl+S',
       icon: 'icon save',
       toolbar: true,
+      isRelatedToTab: true,
       testEnabled: () => getCurrentEditor() != null,
       onClick: () => saveTabFile(getCurrentEditor(), false, folder, format, fileExtension),
     });
@@ -271,6 +272,7 @@ export function registerFileCommands({
       name: 'Execute',
       icon: 'icon run',
       toolbar: true,
+      isRelatedToTab: true,
       keyText: 'F5 | Ctrl+Enter',
       testEnabled: () => getCurrentEditor() != null && !getCurrentEditor()?.isBusy(),
       onClick: () => getCurrentEditor().execute(),
@@ -281,6 +283,7 @@ export function registerFileCommands({
       name: 'Kill',
       icon: 'icon close',
       toolbar: true,
+      isRelatedToTab: true,
       testEnabled: () => getCurrentEditor()?.canKill && getCurrentEditor().canKill(),
       onClick: () => getCurrentEditor().kill(),
     });

packages/web/src/datagrid/DataGridCore.svelte

@@ -7,6 +7,7 @@
     name: 'Refresh',
     keyText: 'F5',
     toolbar: true,
+    isRelatedToTab: true,
     icon: 'icon reload',
     testEnabled: () => getCurrentDataGrid()?.getDisplay()?.supportsReload,
     onClick: () => getCurrentDataGrid().refresh(),
@@ -63,6 +64,7 @@
     group: 'undo',
     icon: 'icon undo',
     toolbar: true,
+    isRelatedToTab: true,
     testEnabled: () => getCurrentDataGrid()?.getGrider()?.canUndo,
     onClick: () => getCurrentDataGrid().undo(),
   });
@@ -74,6 +76,7 @@
     group: 'redo',
     icon: 'icon redo',
     toolbar: true,
+    isRelatedToTab: true,
     testEnabled: () => getCurrentDataGrid()?.getGrider()?.canRedo,
     onClick: () => getCurrentDataGrid().redo(),
   });

packages/web/src/formview/FormView.svelte

@@ -18,6 +18,7 @@
     name: 'Refresh',
     keyText: 'F5',
     toolbar: true,
+    isRelatedToTab: true,
     icon: 'icon reload',
     testEnabled: () => getCurrentDataForm() != null,
     onClick: () => getCurrentDataForm().refresh(),
@@ -58,6 +59,7 @@
     group: 'undo',
     icon: 'icon undo',
     toolbar: true,
+    isRelatedToTab: true,
     testEnabled: () => getCurrentDataForm()?.getFormer()?.canUndo,
     onClick: () => getCurrentDataForm().getFormer().undo(),
   });
@@ -69,6 +71,7 @@
     group: 'redo',
     icon: 'icon redo',
     toolbar: true,
+    isRelatedToTab: true,
     testEnabled: () => getCurrentDataForm()?.getFormer()?.canRedo,
     onClick: () => getCurrentDataForm().getFormer().redo(),
   });
@@ -104,6 +107,7 @@
     name: 'First',
     keyText: 'Ctrl+Home',
     toolbar: true,
+    isRelatedToTab: true,
     icon: 'icon arrow-begin',
     testEnabled: () => getCurrentDataForm() != null,
     onClick: () => getCurrentDataForm().navigate('begin'),
@@ -115,6 +119,7 @@
     name: 'Previous',
     keyText: 'Ctrl+ArrowUp',
     toolbar: true,
+    isRelatedToTab: true,
     icon: 'icon arrow-left',
     testEnabled: () => getCurrentDataForm() != null,
     onClick: () => getCurrentDataForm().navigate('previous'),
@@ -126,6 +131,7 @@
     name: 'Next',
     keyText: 'Ctrl+ArrowDown',
     toolbar: true,
+    isRelatedToTab: true,
     icon: 'icon arrow-right',
     testEnabled: () => getCurrentDataForm() != null,
     onClick: () => getCurrentDataForm().navigate('next'),
@@ -137,6 +143,7 @@
     name: 'Last',
     keyText: 'Ctrl+End',
     toolbar: true,
+    isRelatedToTab: true,
     icon: 'icon arrow-end',
     testEnabled: () => getCurrentDataForm() != null,
     onClick: () => getCurrentDataForm().navigate('end'),

packages/web/src/tabs/CollectionDataTab.svelte

@@ -11,6 +11,7 @@
     name: 'Save',
     // keyText: 'Ctrl+S',
     toolbar: true,
+    isRelatedToTab: true,
     icon: 'icon save',
     testEnabled: () => getCurrentEditor()?.canSave(),
     onClick: () => getCurrentEditor().save(),

packages/web/src/tabs/FreeTableTab.svelte

@@ -8,6 +8,7 @@
     name: 'Save',
     // keyText: 'Ctrl+S',
     toolbar: true,
+    isRelatedToTab: true,
     icon: 'icon save',
     testEnabled: () => getCurrentEditor() != null,
     onClick: () => getCurrentEditor().save(),

packages/web/src/tabs/MarkdownEditorTab.svelte

@@ -19,6 +19,7 @@
     name: 'Preview',
     icon: 'icon run',
     toolbar: true,
+    isRelatedToTab: true,
     keyText: 'F5 | Ctrl+Enter',
     testEnabled: () => getCurrentEditor() != null,
     onClick: () => getCurrentEditor().preview(),

packages/web/src/tabs/TableDataTab.svelte

@@ -8,6 +8,7 @@
     name: 'Save',
     // keyText: 'Ctrl+S',
     toolbar: true,
+    isRelatedToTab: true,
     icon: 'icon save',
     testEnabled: () => getCurrentEditor()?.canSave(),
     onClick: () => getCurrentEditor().save(),

packages/web/src/widgets/Toolbar.svelte

@@ -10,7 +10,8 @@
   import _ from 'lodash';
   import { openFavorite } from '../appobj/FavoriteFileAppObject.svelte';
   import runCommand from '../commands/runCommand';
-  import { commands, commandsCustomized } from '../stores';
+  import FontIcon from '../icons/FontIcon.svelte';
+  import { activeTab, commands, commandsCustomized } from '../stores';
   import getElectron from '../utility/getElectron';
   import { useFavorites } from '../utility/metadataLoaders';
   import ToolbarButton from './ToolbarButton.svelte';
@@ -25,7 +26,8 @@
   );
 </script>
 
-<div class="container">
+<div class="root">
+  <div class="container">
     {#if !electron}
       <ToolbarButton externalImage="logo192.png" on:click={() => runCommand('about.show')} />
     {/if}
@@ -35,7 +37,7 @@
       </ToolbarButton>
     {/each}
 
-  {#each list as command}
+    {#each list.filter(x => !x.isRelatedToTab) as command}
       <ToolbarButton
         icon={command.icon}
         on:click={command.onClick}
@@ -45,6 +47,27 @@
         {command.toolbarName || command.name}
       </ToolbarButton>
     {/each}
+  </div>
+  <div class="container">
+    {#if $activeTab && list.filter(x => x.isRelatedToTab).length > 0}
+      <div class="activeTab">
+        <div class="activeTabInner">
+          <FontIcon icon={$activeTab.icon} />
+          {$activeTab.title}:
+        </div>
+      </div>
+    {/if}
+    {#each list.filter(x => x.isRelatedToTab) as command}
+      <ToolbarButton
+        icon={command.icon}
+        on:click={command.onClick}
+        disabled={!command.enabled}
+        title={getCommandTitle(command)}
+      >
+        {command.toolbarName || command.name}
+      </ToolbarButton>
+    {/each}
+  </div>
 </div>
 
 <style>
@@ -54,4 +77,21 @@
     align-items: stretch;
     height: var(--dim-toolbar-height);
   }
+  .root {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+  }
+
+  .activeTab {
+    background-color: var(--theme-bg-2);
+    white-space: nowrap;
+    display: flex;
+    padding-left: 15px;
+    padding-right: 15px;
+  }
+
+  .activeTabInner {
+    align-self: center;
+  }
 </style>