Merge branch 'master' into sqlite

packages/web/src/widgets/SqlObjectList.svelte

@@ -42,7 +42,7 @@
     <ErrorInfo message={$status.message} icon="img error" />
     <InlineButton on:click={handleRefreshDatabase}>Refresh</InlineButton>
   </WidgetsInnerContainer>
-{:else if objectList.length == 0 && $status && $status.name != 'pending' && $objects}
+{:else if objectList.length == 0 && $status && $status.name != 'pending' && $status.name != 'checkStructure' && $status.name != 'loadStructure' && $objects}
   <WidgetsInnerContainer>
     <ErrorInfo
       message={`Database ${database} is empty or structure is not loaded, press Refresh button to reload structure`}
@@ -56,7 +56,7 @@
     <InlineButton on:click={handleRefreshDatabase}>Refresh</InlineButton>
   </SearchBoxWrapper>
   <WidgetsInnerContainer>
-    {#if ($status && $status.name == 'pending' && $objects) || !$objects}
+    {#if ($status && ($status.name == 'pending' || $status.name == 'checkStructure' || $status.name == 'loadStructure') && $objects) || !$objects}
       <LoadingInfo message="Loading database structure" />
     {:else}
       <AppObjectList

packages/web/src/widgets/StatusBar.svelte

@@ -49,6 +49,10 @@
       <div class="item">
         {#if $status.name == 'pending'}
           <FontIcon icon="icon loading" /> Loading
+        {:else if $status.name == 'checkStructure'}
+          <FontIcon icon="icon loading" /> Checking model
+        {:else if $status.name == 'loadStructure'}
+          <FontIcon icon="icon loading" /> Loading model
         {:else if $status.name == 'ok'}
           <FontIcon icon="img ok-inv" /> Connected
         {:else if $status.name == 'error'}

packages/web/src/widgets/TabsPanel.svelte

@@ -87,9 +87,9 @@
   registerCommand({
     id: 'tabs.addToFavorites',
     category: 'Tabs',
-    name: 'Favorites',
-    icon: 'icon favorite',
-    toolbar: true,
+    name: 'Add current tab to favorites',
+    // icon: 'icon favorite',
+    // toolbar: true,
     testEnabled: () =>
       getActiveTab()?.tabComponent &&
       tabs[getActiveTab()?.tabComponent] &&
@@ -113,6 +113,7 @@
   import { setSelectedTab } from '../utility/common';
   import contextMenu from '../utility/contextMenu';
   import { getConnectionInfo } from '../utility/metadataLoaders';
+  import { duplicateTab } from '../utility/openNewTab';
 
   $: currentDbKey =
     $currentDatabase && $currentDatabase.name && $currentDatabase.connection
@@ -146,9 +147,10 @@
     }
   };
 
-  const getContextMenu = (tabid, props) => () => {
+  const getContextMenu = tab => () => {
+    const { tabid, props, tabComponent } = tab;
     const { conid, database } = props || {};
-    const res = [
+    return [
       {
         text: 'Close',
         onClick: () => closeTab(tabid),
@@ -161,20 +163,33 @@
         text: 'Close others',
         onClick: () => closeOthers(tabid),
       },
+      {
+        text: 'Duplicate',
+        onClick: () => duplicateTab(tab),
+      },
+      tabComponent &&
+        tabs[tabComponent] &&
+        tabs[tabComponent].allowAddToFavorites &&
+        tabs[tabComponent].allowAddToFavorites(props) && [
+          { divider: true },
+          {
+            text: 'Add to favorites',
+            onClick: () => showModal(FavoriteModal, { savingTab: tab }),
+          },
+        ],
+      conid &&
+        database && [
+          { divider: true },
+          {
+            text: `Close with same DB - ${database}`,
+            onClick: () => closeWithSameDb(tabid),
+          },
+          {
+            text: `Close with other DB than ${database}`,
+            onClick: () => closeWithOtherDb(tabid),
+          },
+        ],
     ];
-    if (conid && database) {
-      res.push(
-        {
-          text: `Close with same DB - ${database}`,
-          onClick: () => closeWithSameDb(tabid),
-        },
-        {
-          text: `Close with other DB than ${database}`,
-          onClick: () => closeWithOtherDb(tabid),
-        }
-      );
-    }
-    return res;
   };
 
   const handleSetDb = async props => {
@@ -216,7 +231,7 @@
           class:selected={tab.selected}
           on:click={e => handleTabClick(e, tab.tabid)}
           on:mouseup={e => handleMouseUp(e, tab.tabid)}
-          use:contextMenu={getContextMenu(tab.tabid, tab.props)}
+          use:contextMenu={getContextMenu(tab)}
         >
           <FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />
           <span class="file-name">

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,26 +26,48 @@
   );
 </script>
 
-<div class="container">
-  {#if !electron}
-    <ToolbarButton externalImage="logo192.png" on:click={() => runCommand('about.show')} />
-  {/if}
-  {#each ($favorites || []).filter(x => x.showInToolbar) as item}
-    <ToolbarButton on:click={() => openFavorite(item)} icon={item.icon || 'icon favorite'}>
-      {item.title}
-    </ToolbarButton>
-  {/each}
+<div class="root">
+  <div class="container">
+    {#if !electron}
+      <ToolbarButton externalImage="logo192.png" on:click={() => runCommand('about.show')} />
+    {/if}
+    {#each ($favorites || []).filter(x => x.showInToolbar) as item}
+      <ToolbarButton on:click={() => openFavorite(item)} icon={item.icon || 'icon favorite'}>
+        {item.title}
+      </ToolbarButton>
+    {/each}
 
-  {#each list as command}
-    <ToolbarButton
-      icon={command.icon}
-      on:click={command.onClick}
-      disabled={!command.enabled}
-      title={getCommandTitle(command)}
-    >
-      {command.toolbarName || command.name}
-    </ToolbarButton>
-  {/each}
+    {#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 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>