dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-22 15:46:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

better tab reoder UX

Browse Source
This commit is contained in:
Jan Prochazka
2021-12-30 13:53:20 +01:00
parent 3f0e6591fb
commit df4c8d2698
1 changed files with 17 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/web/src/widgets/TabsPanel.svelte
View File

@@ -165,7 +165,9 @@
$: scrollInViewTab($activeTabId); $: scrollInViewTab($activeTabId);
let draggingTab = null; let draggingTab = null;
let draggingTabTarget = null;
let draggingDbKey = null; let draggingDbKey = null;
let draggingDbKeyTarget = null;
const connectionColorFactory = useConnectionColorFactory(3, null, true); const connectionColorFactory = useConnectionColorFactory(3, null, true);
@@ -260,15 +262,22 @@
<div class="db-wrapper"> <div class="db-wrapper">
<div <div
class="db-name" class="db-name"
class:selected={tabsByDb[dbKey][0].tabDbKey == currentDbKey} class:selected={draggingDbKey ? dbKey == draggingDbKeyTarget : tabsByDb[dbKey][0].tabDbKey == currentDbKey}
on:click={() => handleSetDb(tabsByDb[dbKey][0].props)} on:click={() => handleSetDb(tabsByDb[dbKey][0].props)}
use:contextMenu={getDatabaseContextMenu(tabsByDb[dbKey])} use:contextMenu={getDatabaseContextMenu(tabsByDb[dbKey])}
style={$connectionColorFactory(tabsByDb[dbKey][0].props, tabsByDb[dbKey][0].tabDbKey == currentDbKey ? 2 : 3)} style={$connectionColorFactory(
tabsByDb[dbKey][0].props,
(draggingDbKey ? dbKey == draggingDbKeyTarget : tabsByDb[dbKey][0].tabDbKey == currentDbKey) ? 2 : 3
)}
draggable={true} draggable={true}
on:dragstart={e => { on:dragstart={e => {
draggingDbKey = dbKey; draggingDbKey = dbKey;
}} }}
on:dragenter={e => { on:dragenter={e => {
draggingDbKeyTarget = dbKey;
}}
on:drop={e => {
if (!draggingDbKey) return;
if (dbKey != draggingDbKey) { if (dbKey != draggingDbKey) {
const groupOrderFiltered = _.pickBy($tabDatabaseGroupOrder, (v, k) => const groupOrderFiltered = _.pickBy($tabDatabaseGroupOrder, (v, k) =>
$openedTabs.filter(x => x.closedTime == null).find(x => getTabDbKey(x) == k) $openedTabs.filter(x => x.closedTime == null).find(x => getTabDbKey(x) == k)
@@ -302,6 +311,7 @@
}} }}
on:dragend={e => { on:dragend={e => {
draggingDbKey = null; draggingDbKey = null;
draggingDbKeyTarget = null;
}} }}
> >
<FontIcon icon={getDbIcon(dbKey)} /> <FontIcon icon={getDbIcon(dbKey)} />
@@ -318,7 +328,7 @@
<div <div
id={`file-tab-item-${tab.tabid}`} id={`file-tab-item-${tab.tabid}`}
class="file-tab-item" class="file-tab-item"
class:selected={tab.selected} class:selected={draggingTab ? tab.tabid == draggingTabTarget?.tabid : tab.selected}
on:click={e => handleTabClick(e, tab.tabid)} on:click={e => handleTabClick(e, tab.tabid)}
on:mouseup={e => handleMouseUp(e, tab.tabid)} on:mouseup={e => handleMouseUp(e, tab.tabid)}
use:contextMenu={getContextMenu(tab)} use:contextMenu={getContextMenu(tab)}
@@ -329,8 +339,9 @@
// e.dataTransfer.setData('tab_drag_data', tab.tabid); // e.dataTransfer.setData('tab_drag_data', tab.tabid);
}} }}
on:dragenter={e => { on:dragenter={e => {
// const tabid = e.dataTransfer.getData('tab_drag_data'); draggingTabTarget = tab;
// e.preventDefault(); }}
on:drop={e => {
if (draggingTab.tabid != tab.tabid) { if (draggingTab.tabid != tab.tabid) {
if (getTabDbKey(draggingTab) == getTabDbKey(tab)) { if (getTabDbKey(draggingTab) == getTabDbKey(tab)) {
const dbKey = getTabDbKey(draggingTab); const dbKey = getTabDbKey(draggingTab);
@@ -341,10 +352,6 @@
console.warn('Drag tab index not found'); console.warn('Drag tab index not found');
return; return;
} }
// console.log(
// 'items',
// items.map(x => x.title)
// );
const newItems = const newItems =
dstIndex < srcIndex dstIndex < srcIndex
? [ ? [
@@ -358,11 +365,6 @@
...items.slice(dstIndex + 1), ...items.slice(dstIndex + 1),
]; ];
// console.log(
// 'newItems',
// newItems.map(x => x.title)
// );
openedTabs.update(tabs => openedTabs.update(tabs =>
tabs.map(x => { tabs.map(x => {
const index = _.findIndex(newItems, y => y.tabid == x.tabid); const index = _.findIndex(newItems, y => y.tabid == x.tabid);
@@ -380,6 +382,7 @@
}} }}
on:dragend={e => { on:dragend={e => {
draggingTab = null; draggingTab = null;
draggingTabTarget = null;
}} }}
> >
<FontIcon icon={tab.busy ? 'icon loading' : tab.icon} /> <FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />