+
{#if $selectedWidget && $visibleWidgetSideBar}
diff --git a/packages/web/src/appobj/ConnectionAppObject.svelte b/packages/web/src/appobj/ConnectionAppObject.svelte
index 5c6c94dfb..100211744 100644
--- a/packages/web/src/appobj/ConnectionAppObject.svelte
+++ b/packages/web/src/appobj/ConnectionAppObject.svelte
@@ -103,7 +103,7 @@
import { getLocalStorage } from '../utility/storageCache';
import { apiCall, removeVolatileMapping } from '../utility/api';
import ImportDatabaseDumpModal from '../modals/ImportDatabaseDumpModal.svelte';
- import { closeMultipleTabs } from '../widgets/TabsPanel.svelte';
+ import { closeMultipleTabs } from '../tabpanel/TabsPanel.svelte';
import AboutModal from '../modals/AboutModal.svelte';
import { tick } from 'svelte';
diff --git a/packages/web/src/appobj/DatabaseAppObject.svelte b/packages/web/src/appobj/DatabaseAppObject.svelte
index d1baed29a..978d8a5db 100644
--- a/packages/web/src/appobj/DatabaseAppObject.svelte
+++ b/packages/web/src/appobj/DatabaseAppObject.svelte
@@ -371,7 +371,7 @@
import ImportDatabaseDumpModal from '../modals/ImportDatabaseDumpModal.svelte';
import ExportDatabaseDumpModal from '../modals/ExportDatabaseDumpModal.svelte';
import ConfirmModal from '../modals/ConfirmModal.svelte';
- import { closeMultipleTabs } from '../widgets/TabsPanel.svelte';
+ import { closeMultipleTabs } from '../tabpanel/TabsPanel.svelte';
export let data;
export let passProps;
diff --git a/packages/web/src/buttons/ToolStripButton.svelte b/packages/web/src/buttons/ToolStripButton.svelte
index 1623ccf37..bc52c596f 100644
--- a/packages/web/src/buttons/ToolStripButton.svelte
+++ b/packages/web/src/buttons/ToolStripButton.svelte
@@ -31,6 +31,7 @@
align-self: stretch;
display: flex;
user-select: none;
+ margin: 2px 0px;
}
.button.disabled {
color: var(--theme-font-3);
diff --git a/packages/web/src/buttons/ToolStripContainer.svelte b/packages/web/src/buttons/ToolStripContainer.svelte
index 1ba966899..56e72bb6f 100644
--- a/packages/web/src/buttons/ToolStripContainer.svelte
+++ b/packages/web/src/buttons/ToolStripContainer.svelte
@@ -1,29 +1,29 @@
-
-
+
+
+
-
-
diff --git a/packages/web/src/buttons/ToolStripSplitButton.svelte b/packages/web/src/buttons/ToolStripSplitButton.svelte
index c3cd29888..007ca44cd 100644
--- a/packages/web/src/buttons/ToolStripSplitButton.svelte
+++ b/packages/web/src/buttons/ToolStripSplitButton.svelte
@@ -39,6 +39,7 @@
align-self: stretch;
display: flex;
user-select: none;
+ margin: 2px 0px;
}
.button.disabled {
color: var(--theme-font-3);
diff --git a/packages/web/src/elements/HorizontalSplitter.svelte b/packages/web/src/elements/HorizontalSplitter.svelte
index e2c9ec2f5..d6dfac72b 100644
--- a/packages/web/src/elements/HorizontalSplitter.svelte
+++ b/packages/web/src/elements/HorizontalSplitter.svelte
@@ -1,5 +1,8 @@
+
@@ -52,7 +56,10 @@
class="horizontal-split-handle"
style={collapsed1 || collapsed2 ? 'display:none' : ''}
use:splitterDrag={'clientX'}
- on:resizeSplitter={e => (size += e.detail)}
+ on:resizeSplitter={e => {
+ size += e.detail;
+ if (clientWidth > 0) customRatio = size / clientWidth;
+ }}
/>
{/if}
@@ -38,7 +39,10 @@
class={'vertical-split-handle'}
style={collapsed1 || collapsed2 ? 'display:none' : ''}
use:splitterDrag={'clientY'}
- on:resizeSplitter={e => (size += e.detail)}
+ on:resizeSplitter={e => {
+ size += e.detail;
+ if (clientHeight > 0) customRatio = size / clientHeight;
+ }}
/>
(defaultValue: T, storageName) {
@@ -28,6 +30,27 @@ export function writableWithStorage(defaultValue: T, storageName) {
return res;
}
+export function writableWithForage(defaultValue: T, storageName) {
+ const res = writable(defaultValue);
+ res.subscribe(value => {
+ localforage.setItem(storageName, value);
+ });
+ localforage.getItem(storageName).then(value => {
+ if (value == null) {
+ const migrated = localStorage.getItem(storageName);
+ if (migrated) {
+ localStorage.removeItem(storageName);
+ const parsed = safeJsonParse(migrated, defaultValue, true);
+ localforage.setItem(storageName, parsed);
+ res.set(parsed as T);
+ }
+ } else {
+ res.set(value as T);
+ }
+ });
+ return res;
+}
+
export function writableSettingsValue(defaultValue: T, storageName) {
const res = derived(useSettings(), $settings => {
const obj = $settings || {};
@@ -62,7 +85,7 @@ export const openedConnections = writable([]);
export const openedSingleDatabaseConnections = writable([]);
export const expandedConnections = writable([]);
export const currentDatabase = writable(null);
-export const openedTabs = writableWithStorage([], 'openedTabs');
+export const openedTabs = writableWithForage([], 'openedTabs');
export const copyRowsFormat = writableWithStorage('textWithoutHeaders', 'copyRowsFormat');
export const extensions = writable(null);
export const visibleCommandPalette = writable(null);
@@ -92,6 +115,11 @@ export const commandsCustomized = derived([commands, commandsSettings], ([$comma
}))
);
+export const draggingTab = writable(null);
+export const draggingTabTarget = writable(null);
+export const draggingDbGroup = writable(null);
+export const draggingDbGroupTarget = writable(null);
+
// export const visibleToolbar = writableWithStorage(true, 'visibleToolbar');
export const visibleToolbar = writable(false);
export const leftPanelWidth = writableWithStorage(300, 'leftPanelWidth');
diff --git a/packages/web/src/tabpanel/MultiTabsContainer.svelte b/packages/web/src/tabpanel/MultiTabsContainer.svelte
new file mode 100644
index 000000000..5e0f47ede
--- /dev/null
+++ b/packages/web/src/tabpanel/MultiTabsContainer.svelte
@@ -0,0 +1,19 @@
+
+
+
+
diff --git a/packages/web/src/TabContent.svelte b/packages/web/src/tabpanel/TabContent.svelte
similarity index 100%
rename from packages/web/src/TabContent.svelte
rename to packages/web/src/tabpanel/TabContent.svelte
diff --git a/packages/web/src/TabRegister.svelte b/packages/web/src/tabpanel/TabRegister.svelte
similarity index 57%
rename from packages/web/src/TabRegister.svelte
rename to packages/web/src/tabpanel/TabRegister.svelte
index 3f3f3966d..4027e3bb3 100644
--- a/packages/web/src/TabRegister.svelte
+++ b/packages/web/src/tabpanel/TabRegister.svelte
@@ -1,11 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/web/src/widgets/TabsPanel.svelte b/packages/web/src/tabpanel/TabsPanel.svelte
similarity index 81%
rename from packages/web/src/widgets/TabsPanel.svelte
rename to packages/web/src/tabpanel/TabsPanel.svelte
index 8c54dec3e..b3e8537c2 100644
--- a/packages/web/src/widgets/TabsPanel.svelte
+++ b/packages/web/src/tabpanel/TabsPanel.svelte
@@ -43,6 +43,7 @@
const newFiles = files.map(x => ({
...x,
closedTime: shouldShowTab(x) && closeCondition(x, active) ? new Date().getTime() : x.closedTime,
+ selected: false,
}));
if (newFiles.find(x => x.selected && shouldShowTab(x))) {
@@ -72,6 +73,7 @@
: files.map(x => ({
...x,
closedTime: shouldShowTab(x) && closeCondition(x) ? new Date().getTime() : x.closedTime,
+ selected: false,
}));
if (newFiles.find(x => x.selected && shouldShowTab(x))) {
@@ -87,8 +89,26 @@
});
};
+ function splitTab(multiTabIndex) {
+ openedTabs.update(tabs =>
+ tabs.map(x => ({
+ ...x,
+ multiTabIndex: x.selected ? 1 - multiTabIndex : x.multiTabIndex,
+ }))
+ );
+ }
+
+ function splitTabGroup(tabGroupTabs, multiTabIndex) {
+ openedTabs.update(tabs =>
+ tabs.map(x => ({
+ ...x,
+ multiTabIndex: tabGroupTabs.find(y => x.tabid == y.tabid) ? 1 - multiTabIndex : x.multiTabIndex,
+ }))
+ );
+ }
+
const closeTab = closeTabFunc((x, active) => x.tabid == active.tabid);
- const closeAll = async () => {
+ const closeAll = async multiTabIndex => {
const closeCandidates = getOpenedTabs()
.filter(x => x.unsaved)
.filter(x => shouldShowTab(x));
@@ -99,8 +119,12 @@
openedTabs.update(tabs =>
tabs.map(tab => ({
...tab,
- closedTime: shouldShowTab(tab) ? closedTime : tab.closedTime,
+ closedTime:
+ shouldShowTab(tab) && (multiTabIndex == null || multiTabIndex == (tab.multiTabIndex || 0))
+ ? closedTime
+ : tab.closedTime,
selected: false,
+ visibleSecondary: false,
}))
);
};
@@ -129,7 +153,8 @@
_.get(x, 'props.conid') != _.get(active, 'props.conid') ||
_.get(x, 'props.database') != _.get(active, 'props.database')
);
- const closeOthers = closeTabFunc((x, active) => x.tabid != active.tabid);
+ const closeOthersInMultiTab = multiTabIndex =>
+ closeTabFunc((x, active) => x.tabid != active.tabid && (x.multiTabIndex || 0) == multiTabIndex);
function getTabDbName(tab, connectionList) {
if (tab.tabComponent == 'ConnectionTab') return 'Connections';
@@ -252,6 +277,10 @@
getCurrentDatabase,
lockedDatabaseMode,
getLockedDatabaseMode,
+ draggingDbGroup,
+ draggingDbGroupTarget,
+ draggingTab,
+ draggingTabTarget,
} from '../stores';
import tabs from '../tabs';
import { setSelectedTab } from '../utility/common';
@@ -264,7 +293,11 @@
import TabCloseButton from '../elements/TabCloseButton.svelte';
import CloseTabModal from '../modals/CloseTabModal.svelte';
- $: showTabFilterFunc = tab => shouldShowTab(tab, $lockedDatabaseMode, $currentDatabase);
+ export let multiTabIndex;
+ export let shownTab;
+
+ $: showTabFilterFunc = tab =>
+ shouldShowTab(tab, $lockedDatabaseMode, $currentDatabase) && (tab.multiTabIndex || 0) == multiTabIndex;
$: connectionList = useConnectionList();
$: currentDbKey =
@@ -287,10 +320,9 @@
$: scrollInViewTab($activeTabId);
- let draggingTab = null;
- let draggingTabTarget = null;
- let draggingDbGroup = null;
- let draggingDbGroupTarget = null;
+ $: filteredTabsFromAllParts = $openedTabs.filter(x => shouldShowTab(x, $lockedDatabaseMode, $currentDatabase));
+ $: allowSplitTab =
+ _.uniq(filteredTabsFromAllParts.map(x => x.multiTabIndex || 0)).length == 1 && filteredTabsFromAllParts.length >= 2;
const connectionColorFactory = useConnectionColorFactory(3, null, true);
@@ -320,11 +352,11 @@
},
{
text: 'Close all',
- onClick: closeAll,
+ onClick: () => closeAll(multiTabIndex),
},
{
text: 'Close others',
- onClick: () => closeOthers(tabid),
+ onClick: () => closeOthersInMultiTab(multiTabIndex)(tabid),
},
{
text: 'Duplicate',
@@ -390,7 +422,7 @@
}
}
- function dragDropTabs(draggingTabs, targetTabs) {
+ function dragDropTabs(draggingTabs, targetTabs, multiTabIndex) {
if (draggingTabs.find(x => targetTabs.find(y => x.tabid == y.tabid))) return;
const items = sortTabs($openedTabs.filter(x => x.closedTime == null));
@@ -422,11 +454,17 @@
return {
...x,
tabOrder: index + 1,
+ multiTabIndex: draggingTabs.find(y => y.tabid == x.tabid) ? multiTabIndex : x.multiTabIndex,
};
}
return x;
})
);
+
+ draggingDbGroup.set(null);
+ draggingDbGroupTarget.set(null);
+ draggingTab.set(null);
+ draggingTabTarget.set(null);
}
let domTabs;
@@ -440,14 +478,14 @@
-
+
{#each groupedTabs as tabGroup}
{
+ openNewTab({
+ title: pureName,
+ icon: 'img table-structure',
+ tabComponent: 'TableStructureTab',
+ props: {
+ schemaName,
+ pureName,
+ conid,
+ database,
+ objectTypeField: 'tables',
+ },
+ });
+ }}>Open structure
+
+ collapsedLeftColumnStore.update(x => !x)}>View columns
-
- {
- openNewTab({
- title: pureName,
- icon: 'img table-structure',
- tabComponent: 'TableStructureTab',
- props: {
- schemaName,
- pureName,
- conid,
- database,
- objectTypeField: 'tables',
- },
- });
- }}
-/>
-
- collapsedLeftColumnStore.update(x => !x)}
-/>
diff --git a/packages/web/src/tabs/TableStructureTab.svelte b/packages/web/src/tabs/TableStructureTab.svelte
index 5dbe2db2b..a2237d0fc 100644
--- a/packages/web/src/tabs/TableStructureTab.svelte
+++ b/packages/web/src/tabs/TableStructureTab.svelte
@@ -60,6 +60,7 @@
import { apiCall } from '../utility/api';
import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+ import ToolStripButton from '../buttons/ToolStripButton.svelte';
export let tabid;
export let conid;
@@ -190,27 +191,25 @@
{
+ openNewTab({
+ title: pureName,
+ icon: 'img table',
+ tabComponent: 'TableDataTab',
+ props: {
+ schemaName,
+ pureName,
+ conid,
+ database,
+ objectTypeField: 'tables',
+ },
+ });
+ }}>Open data
+ {/if}
-
-{#if objectTypeField == 'tables'}
- {
- openNewTab({
- title: pureName,
- icon: 'img table',
- tabComponent: 'TableDataTab',
- props: {
- schemaName,
- pureName,
- conid,
- database,
- objectTypeField: 'tables',
- },
- });
- }}
- />
-{/if}
diff --git a/packages/web/src/utility/ErrorHandler.svelte b/packages/web/src/utility/ErrorHandler.svelte
index f71949ee0..18e65cf0e 100644
--- a/packages/web/src/utility/ErrorHandler.svelte
+++ b/packages/web/src/utility/ErrorHandler.svelte
@@ -1,8 +1,8 @@
diff --git a/packages/web/src/widgets/WidgetColumnBarItem.svelte b/packages/web/src/widgets/WidgetColumnBarItem.svelte
index 55861682a..47c6828c8 100644
--- a/packages/web/src/widgets/WidgetColumnBarItem.svelte
+++ b/packages/web/src/widgets/WidgetColumnBarItem.svelte
@@ -22,6 +22,7 @@
const dynamicProps = writable({
splitterVisible: false,
+ visibleItemsCount: 0,
});
const pushWidgetItemDefinition = getContext('pushWidgetItemDefinition') as any;
@@ -62,10 +63,12 @@
storageName && getLocalStorage(storageName) && getLocalStorage(storageName).visible != null
? getLocalStorage(storageName).visible
: !collapsed;
+
+ $: collapsible = $dynamicProps.visibleItemsCount != 1 || !visible;
{#if !skip && show}
- (visible = !visible)}>{title}
+ (visible = !visible) : null}>{title}
{#if visible}
{#if !$lockedDatabaseMode}
diff --git a/packages/web/src/tabs/ConnectionTab.svelte b/packages/web/src/tabs/ConnectionTab.svelte
index 8473f17ad..deff1d03c 100644
--- a/packages/web/src/tabs/ConnectionTab.svelte
+++ b/packages/web/src/tabs/ConnectionTab.svelte
@@ -31,7 +31,6 @@
import getConnectionLabel from '../utility/getConnectionLabel';
import { onMount } from 'svelte';
import { disconnectServerConnection, openConnection } from '../appobj/ConnectionAppObject.svelte';
- import { closeMultipleTabs } from '../widgets/TabsPanel.svelte';
import { disconnectDatabaseConnection } from '../appobj/DatabaseAppObject.svelte';
export let connection;
diff --git a/packages/web/src/tabs/TableDataTab.svelte b/packages/web/src/tabs/TableDataTab.svelte
index 83e0ae912..b6150b723 100644
--- a/packages/web/src/tabs/TableDataTab.svelte
+++ b/packages/web/src/tabs/TableDataTab.svelte
@@ -101,6 +101,7 @@
import { getBoolSettingsValue, getIntSettingsValue } from '../settings/settingsTools';
import useEditorData from '../query/useEditorData';
import { markTabSaved, markTabUnsaved } from '../utility/common';
+ import ToolStripButton from '../buttons/ToolStripButton.svelte';
export let tabid;
export let conid;
@@ -281,32 +282,28 @@
{
if (e.button == 1) {
@@ -459,23 +497,23 @@
use:contextMenu={getDatabaseContextMenu(tabGroup.tabs)}
style={$connectionColorFactory(
tabGroup.tabs[0].props,
- (draggingDbGroup ? tabGroup.grpid == draggingDbGroupTarget?.grpid : tabGroup.tabDbKey == currentDbKey)
+ ($draggingDbGroup ? tabGroup.grpid == $draggingDbGroupTarget?.grpid : tabGroup.tabDbKey == currentDbKey)
? 2
: 3
)}
draggable={true}
on:dragstart={e => {
- draggingDbGroup = tabGroup;
+ $draggingDbGroup = tabGroup;
}}
on:dragenter={e => {
- draggingDbGroupTarget = tabGroup;
+ $draggingDbGroupTarget = tabGroup;
}}
on:drop={e => {
- dragDropTabs(draggingDbGroup.tabs, tabGroup.tabs);
+ dragDropTabs($draggingDbGroup.tabs, tabGroup.tabs, multiTabIndex);
}}
on:dragend={e => {
- draggingDbGroup = null;
- draggingDbGroupTarget = null;
+ $draggingDbGroup = null;
+ $draggingDbGroupTarget = null;
}}
>
-
+
@@ -485,11 +523,21 @@
-
{/if}
@@ -498,32 +546,34 @@
handleTabClick(e, tab.tabid)}
on:mouseup={e => handleMouseUp(e, tab.tabid)}
use:contextMenu={getContextMenu(tab)}
draggable={true}
on:dragstart={async e => {
- draggingTab = tab;
+ $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;
+ $draggingTabTarget = tab;
}}
on:drop={e => {
- if (draggingTab) {
- dragDropTabs([draggingTab], [tab]);
+ if ($draggingTab) {
+ dragDropTabs([$draggingTab], [tab], multiTabIndex);
}
- if (draggingDbGroup) {
- dragDropTabs(draggingDbGroup.tabs, [tab]);
+ if ($draggingDbGroup) {
+ dragDropTabs($draggingDbGroup.tabs, [tab], multiTabIndex);
}
}}
on:dragend={e => {
- draggingTab = null;
- draggingTabTarget = null;
+ $draggingTab = null;
+ $draggingTabTarget = null;
}}
>
{/each}
+ {#if allowSplitTab}
+
+ {/if}
+
+
diff --git a/packages/web/src/widgets/WidgetTitle.svelte b/packages/web/src/widgets/WidgetTitle.svelte
index dbc127d33..fe57f1e66 100644
--- a/packages/web/src/widgets/WidgetTitle.svelte
+++ b/packages/web/src/widgets/WidgetTitle.svelte
@@ -1,4 +1,8 @@
-
+
+
+