diff --git a/packages/web/src/appobj/DatabaseObjectAppObject.svelte b/packages/web/src/appobj/DatabaseObjectAppObject.svelte index f0de19506..0465b5f35 100644 --- a/packages/web/src/appobj/DatabaseObjectAppObject.svelte +++ b/packages/web/src/appobj/DatabaseObjectAppObject.svelte @@ -701,7 +701,8 @@ forceNewTab?, initialData?, icon?, - appObjectData? + appObjectData?, + preventPreviewMode? ) { const connection = await getConnectionInfo({ conid }); const tooltip = `${getConnectionLabel(connection)}\n${database}\n${fullDisplayName({ @@ -717,6 +718,7 @@ tabComponent: scriptTemplate ? 'QueryTab' : tabComponent, appObject: 'DatabaseObjectAppObject', appObjectData, + tabPreviewMode: !preventPreviewMode, props: { schemaName, pureName, @@ -731,7 +733,7 @@ ); } - export function handleDatabaseObjectClick(data, forceNewTab = false) { + export function handleDatabaseObjectClick(data, forceNewTab = false, preventPreviewMode = false) { const { schemaName, pureName, conid, database, objectTypeField } = data; const driver = findEngineDriver(data, getExtensions()); @@ -755,7 +757,8 @@ forceNewTab, null, null, - data + data, + preventPreviewMode ); } @@ -881,8 +884,8 @@ export let data; export let passProps; - function handleClick(forceNewTab = false) { - handleDatabaseObjectClick(data, forceNewTab); + function handleClick(forceNewTab = false, preventPreviewMode = false) { + handleDatabaseObjectClick(data, forceNewTab, preventPreviewMode); } function createMenu() { @@ -917,6 +920,7 @@ extInfo={getExtInfo(data)} on:click={() => handleClick()} on:middleclick={() => handleClick(true)} + on:dblclick={() => handleClick(false, true)} on:expand on:dragstart on:dragenter diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts index 9d2ca81f6..cb2d8fabb 100644 --- a/packages/web/src/stores.ts +++ b/packages/web/src/stores.ts @@ -22,6 +22,7 @@ export interface TabDefinition { tabOrder?: number; multiTabIndex?: number; unsaved?: boolean; + tabPreviewMode?: boolean; } export function writableWithStorage(defaultValue: T, storageName) { diff --git a/packages/web/src/tabpanel/TabsPanel.svelte b/packages/web/src/tabpanel/TabsPanel.svelte index 2ab5a20be..684e7c3af 100644 --- a/packages/web/src/tabpanel/TabsPanel.svelte +++ b/packages/web/src/tabpanel/TabsPanel.svelte @@ -349,6 +349,17 @@ } }; + const handleDoubleClick = (e, tabid) => { + e.preventDefault(); + + openedTabs.update(tabs => + tabs.map(x => ({ + ...x, + tabPreviewMode: x.tabid == tabid ? false : x.tabPreviewMode, + })) + ); + }; + const getContextMenu = tab => () => { const { tabid, props, tabComponent, appObject, appObjectData } = tab; @@ -568,9 +579,11 @@ class:selected={$draggingTab || $draggingDbGroup ? tab.tabid == $draggingTabTarget?.tabid : tab.tabid == shownTab?.tabid} + class:preview={!!tab.tabPreviewMode} on:click={e => handleTabClick(e, tab.tabid)} on:mousedown={e => handleMouseDown(e, tab.tabid)} on:mouseup={e => handleMouseUp(e, tab.tabid)} + on:dblclick={e => handleDoubleClick(e, tab.tabid)} use:contextMenu={getContextMenu(tab)} draggable={true} on:dragstart={async e => { @@ -714,6 +727,9 @@ .file-tab-item.selected { background-color: var(--theme-bg-0); } + .file-tab-item.preview { + font-style: italic; + } .file-name { margin-left: 5px; white-space: nowrap; diff --git a/packages/web/src/utility/common.ts b/packages/web/src/utility/common.ts index 1d3cb7af8..08f61ca36 100644 --- a/packages/web/src/utility/common.ts +++ b/packages/web/src/utility/common.ts @@ -30,10 +30,12 @@ export function markTabSaved(tabid) { openedTabs.update(files => files.map(tab => (tab.tabid == tabid ? { ...tab, unsaved: false } : tab))); } -export function setSelectedTabFunc(files, tabid) { +export function setSelectedTabFunc(files, tabid, previewModeValue = undefined) { return [ ...(files || []).filter(x => x.tabid != tabid).map(x => ({ ...x, selected: false })), - ...(files || []).filter(x => x.tabid == tabid).map(x => ({ ...x, selected: true })), + ...(files || []) + .filter(x => x.tabid == tabid) + .map(x => ({ ...x, selected: true, tabPreviewMode: previewModeValue ?? x.tabPreviewMode })), ]; } diff --git a/packages/web/src/utility/openNewTab.ts b/packages/web/src/utility/openNewTab.ts index fd40141e9..7581ac7f9 100644 --- a/packages/web/src/utility/openNewTab.ts +++ b/packages/web/src/utility/openNewTab.ts @@ -22,6 +22,7 @@ export default async function openNewTab(newTab, initialData: any = undefined, o let existing = null; const { savedFile, savedFolder, savedFilePath } = newTab.props || {}; + const { tabPreviewMode } = newTab; if (savedFile || savedFilePath) { existing = oldTabs.find( x => @@ -49,7 +50,7 @@ export default async function openNewTab(newTab, initialData: any = undefined, o } if (existing) { - openedTabs.update(tabs => setSelectedTabFunc(tabs, existing.tabid)); + openedTabs.update(tabs => setSelectedTabFunc(tabs, existing.tabid, !tabPreviewMode ? false : undefined)); return; } @@ -92,8 +93,14 @@ export default async function openNewTab(newTab, initialData: any = undefined, o items.push(newItem); } + const filesFiltered = tabPreviewMode ? (files || []).filter(x => !x.tabPreviewMode) : files; + return [ - ...(files || []).map(x => ({ ...x, selected: false, tabOrder: _.findIndex(items, y => y.tabid == x.tabid) })), + ...(filesFiltered || []).map(x => ({ + ...x, + selected: false, + tabOrder: _.findIndex(items, y => y.tabid == x.tabid), + })), { ...newTab, tabid,