scroll in view active tab

This commit is contained in:
Jan Prochazka
2021-04-11 11:05:07 +02:00
parent d3d695ed81
commit b222b916ec

View File

@@ -101,13 +101,14 @@
<script lang="ts"> <script lang="ts">
import _ from 'lodash'; import _ from 'lodash';
import { tick } from 'svelte';
import { derived, get } from 'svelte/store'; import { derived, get } from 'svelte/store';
import registerCommand from '../commands/registerCommand'; import registerCommand from '../commands/registerCommand';
import FontIcon from '../icons/FontIcon.svelte'; import FontIcon from '../icons/FontIcon.svelte';
import FavoriteModal from '../modals/FavoriteModal.svelte'; import FavoriteModal from '../modals/FavoriteModal.svelte';
import { showModal } from '../modals/modalTools'; import { showModal } from '../modals/modalTools';
import { currentDatabase, getActiveTab, getOpenedTabs, openedTabs } from '../stores'; import { currentDatabase, getActiveTab, getOpenedTabs, openedTabs, activeTabId } from '../stores';
import tabs from '../tabs'; import tabs from '../tabs';
import { setSelectedTab } from '../utility/common'; import { setSelectedTab } from '../utility/common';
import contextMenu from '../utility/contextMenu'; import contextMenu from '../utility/contextMenu';
@@ -129,6 +130,8 @@
$: tabsByDb = _.groupBy(tabsWithDb, 'tabDbKey'); $: tabsByDb = _.groupBy(tabsWithDb, 'tabDbKey');
$: dbKeys = _.keys(tabsByDb).sort(); $: dbKeys = _.keys(tabsByDb).sort();
$: scrollInViewTab($activeTabId);
const handleTabClick = (e, tabid) => { const handleTabClick = (e, tabid) => {
if (e.target.closest('.tabCloseButton')) { if (e.target.closest('.tabCloseButton')) {
return; return;
@@ -185,6 +188,14 @@
} }
$currentDatabase = null; $currentDatabase = null;
}; };
async function scrollInViewTab(tabid) {
await tick();
const element = document.getElementById(`file-tab-item-${tabid}`);
if (element) {
element.scrollIntoView({ block: 'nearest', inline: 'nearest' });
}
}
</script> </script>
{#each dbKeys as dbKey} {#each dbKeys as dbKey}
@@ -200,6 +211,7 @@
<div class="db-group"> <div class="db-group">
{#each _.sortBy(tabsByDb[dbKey], ['title', 'tabid']) as tab} {#each _.sortBy(tabsByDb[dbKey], ['title', 'tabid']) as tab}
<div <div
id={`file-tab-item-${tab.tabid}`}
class="file-tab-item" class="file-tab-item"
class:selected={tab.selected} class:selected={tab.selected}
on:click={e => handleTabClick(e, tab.tabid)} on:click={e => handleTabClick(e, tab.tabid)}