new query button

packages/web/src/Screen.svelte

@@ -25,18 +25,9 @@
   import TitleBar from './widgets/TitleBar.svelte';
   import { onMount } from 'svelte';
   import { getTitleBarVisibility } from './utility/common';
-  
+
   $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
 
-  let domTabs;
-
-  function handleTabsWheel(e) {
-    if (!e.shiftKey) {
-      e.preventDefault();
-      domTabs.scrollBy({ top: 0, left: e.deltaY < 0 ? -150 : 150, behavior: 'smooth' });
-    }
-  }
-
   $: themeStyle = `<style id="themePlugin">${$currentThemeDefinition?.themeCss}</style>`;
 </script>
 
@@ -67,7 +58,7 @@
       <WidgetContainer />
     </div>
   {/if}
-  <div class="tabs" on:wheel={handleTabsWheel} bind:this={domTabs}>
+  <div class="tabs">
     <TabsPanel />
   </div>
   <div class="content">
@@ -134,7 +125,6 @@
     display: flex;
   }
   .tabs {
-    display: flex;
     position: fixed;
     top: var(--dim-header-top);
     left: var(--dim-content-left);
@@ -142,8 +132,6 @@
     right: 0;
     background-color: var(--theme-bg-1);
     border-top: 1px solid var(--theme-border);
-
-    overflow-x: auto;
   }
   .tabs::-webkit-scrollbar {
     height: 7px;

packages/web/src/widgets/TabsPanel.svelte

@@ -141,6 +141,7 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import FavoriteModal from '../modals/FavoriteModal.svelte';
   import { showModal } from '../modals/modalTools';
+  import newQuery from '../query/newQuery';
 
   import { currentDatabase, getActiveTab, getOpenedTabs, openedTabs, activeTabId, getActiveTabId } from '../stores';
   import tabs from '../tabs';
@@ -307,95 +308,142 @@
       })
     );
   }
+
+  let domTabs;
+
+  function handleTabsWheel(e) {
+    if (!e.shiftKey) {
+      e.preventDefault();
+      domTabs.scrollBy({ top: 0, left: e.deltaY < 0 ? -150 : 150, behavior: 'smooth' });
+    }
+  }
 </script>
 
-{#each groupedTabs as tabGroup}
+<div class="root">
-  <div class="db-wrapper">
+  <div class="tabs" on:wheel={handleTabsWheel} bind:this={domTabs}>
-    <div
+    {#each groupedTabs as tabGroup}
-      class="db-name"
+      <div class="db-wrapper">
-      class:selected={draggingDbGroup
-        ? tabGroup.grpid == draggingDbGroupTarget?.grpid
-        : tabGroup.tabDbKey == currentDbKey}
-      on:click={() => handleSetDb(tabGroup.tabs[0].props)}
-      use:contextMenu={getDatabaseContextMenu(tabGroup.tabs)}
-      style={$connectionColorFactory(
-        tabGroup.tabs[0].props,
-        (draggingDbGroup ? tabGroup.grpid == draggingDbGroupTarget?.grpid : tabGroup.tabDbKey == currentDbKey) ? 2 : 3
-      )}
-      draggable={true}
-      on:dragstart={e => {
-        draggingDbGroup = tabGroup;
-      }}
-      on:dragenter={e => {
-        draggingDbGroupTarget = tabGroup;
-      }}
-      on:drop={e => {
-        dragDropTabs(draggingDbGroup.tabs, tabGroup.tabs);
-      }}
-      on:dragend={e => {
-        draggingDbGroup = null;
-        draggingDbGroupTarget = null;
-      }}
-    >
-      <FontIcon icon={getDbIcon(tabGroup.tabDbKey)} />
-      {tabGroup.tabDbName}
-
-      {#if tabGroup.tabs.length > 1}
-        <span
-          class="close-button-right tabCloseButton"
-          on:click={e => closeMultipleTabs(tab => tabGroup.tabs.find(x => x.tabid == tab.tabid))}
-        >
-          <FontIcon icon="icon close" />
-        </span>
-      {/if}
-    </div>
-    <div class="db-group">
-      {#each tabGroup.tabs as tab}
         <div
-          id={`file-tab-item-${tab.tabid}`}
+          class="db-name"
-          class="file-tab-item"
+          class:selected={draggingDbGroup
-          class:selected={draggingTab || draggingDbGroup ? tab.tabid == draggingTabTarget?.tabid : tab.selected}
+            ? tabGroup.grpid == draggingDbGroupTarget?.grpid
-          on:click={e => handleTabClick(e, tab.tabid)}
+            : tabGroup.tabDbKey == currentDbKey}
-          on:mouseup={e => handleMouseUp(e, tab.tabid)}
+          on:click={() => handleSetDb(tabGroup.tabs[0].props)}
-          use:contextMenu={getContextMenu(tab)}
+          use:contextMenu={getDatabaseContextMenu(tabGroup.tabs)}
+          style={$connectionColorFactory(
+            tabGroup.tabs[0].props,
+            (draggingDbGroup ? tabGroup.grpid == draggingDbGroupTarget?.grpid : tabGroup.tabDbKey == currentDbKey)
+              ? 2
+              : 3
+          )}
           draggable={true}
-          on:dragstart={async e => {
+          on:dragstart={e => {
-            draggingTab = tab;
+            draggingDbGroup = tabGroup;
-            await tick();
-            setSelectedTab(tab.tabid);
-            // console.log('START', tab.tabid);
-            // e.dataTransfer.setData('tab_drag_data', tab.tabid);
           }}
           on:dragenter={e => {
-            draggingTabTarget = tab;
+            draggingDbGroupTarget = tabGroup;
           }}
           on:drop={e => {
-            if (draggingTab) {
+            dragDropTabs(draggingDbGroup.tabs, tabGroup.tabs);
-              dragDropTabs([draggingTab], [tab]);
-            }
-            if (draggingDbGroup) {
-              dragDropTabs(draggingDbGroup.tabs, [tab]);
-            }
           }}
           on:dragend={e => {
-            draggingTab = null;
+            draggingDbGroup = null;
-            draggingTabTarget = null;
+            draggingDbGroupTarget = null;
           }}
         >
-          <FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />
+          <FontIcon icon={getDbIcon(tabGroup.tabDbKey)} />
-          <span class="file-name">
+          {tabGroup.tabDbName}
-            {tab.title}
+
-          </span>
+          {#if tabGroup.tabs.length > 1}
-          <span class="close-button tabCloseButton" on:click={e => closeTab(tab.tabid)}>
+            <span
-            <FontIcon icon="icon close" />
+              class="close-button-right tabCloseButton"
-          </span>
+              on:click={e => closeMultipleTabs(tab => tabGroup.tabs.find(x => x.tabid == tab.tabid))}
+            >
+              <FontIcon icon="icon close" />
+            </span>
+          {/if}
         </div>
-      {/each}
+        <div class="db-group">
-    </div>
+          {#each tabGroup.tabs as tab}
+            <div
+              id={`file-tab-item-${tab.tabid}`}
+              class="file-tab-item"
+              class:selected={draggingTab || draggingDbGroup ? tab.tabid == draggingTabTarget?.tabid : tab.selected}
+              on:click={e => handleTabClick(e, tab.tabid)}
+              on:mouseup={e => handleMouseUp(e, tab.tabid)}
+              use:contextMenu={getContextMenu(tab)}
+              draggable={true}
+              on:dragstart={async e => {
+                draggingTab = tab;
+                await tick();
+                setSelectedTab(tab.tabid);
+                // console.log('START', tab.tabid);
+                // e.dataTransfer.setData('tab_drag_data', tab.tabid);
+              }}
+              on:dragenter={e => {
+                draggingTabTarget = tab;
+              }}
+              on:drop={e => {
+                if (draggingTab) {
+                  dragDropTabs([draggingTab], [tab]);
+                }
+                if (draggingDbGroup) {
+                  dragDropTabs(draggingDbGroup.tabs, [tab]);
+                }
+              }}
+              on:dragend={e => {
+                draggingTab = null;
+                draggingTabTarget = null;
+              }}
+            >
+              <FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />
+              <span class="file-name">
+                {tab.title}
+              </span>
+              <span class="close-button tabCloseButton" on:click={e => closeTab(tab.tabid)}>
+                <FontIcon icon="icon close" />
+              </span>
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/each}
   </div>
-{/each}
+  <div class="add-icon" on:click={() => newQuery({})} title="New query"><FontIcon icon="icon add" /></div>
+</div>
 
 <style>
+  .root {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .add-icon {
+    position: absolute;
+    right: 5px;
+    font-size: 20pt;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    color: var(--theme-font-2);
+    cursor: pointer;
+  }
+  .add-icon:hover {
+    color: var(--theme-font-1);
+  }
+  .tabs {
+    height: var(--dim-tabs-panel-height);
+    display: flex;
+    overflow-x: auto;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 35px;
+    bottom: 0;
+  }
   .db-group {
     display: flex;
     flex: 1;
@@ -428,6 +476,7 @@
   }
   .file-tab-item {
     border-right: 1px solid var(--theme-border);
+    border-bottom: 2px solid var(--theme-border);
     padding-left: 15px;
     padding-right: 15px;
     flex-shrink: 1;