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

draggable splitter on mainscreen

Browse Source
This commit is contained in:
Jan Prochazka
2021-02-28 09:27:57 +01:00
parent 1c0a8cad56
commit f30bd0a894
6 changed files with 77 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
packages/web/src/Screen.svelte
View File

@@ -1,11 +1,13 @@
<script lang="ts">
<script>
import WidgetContainer from './widgets/WidgetContainer.svelte';
import WidgetIconPanel from './widgets/WidgetIconPanel.svelte';
import { currentTheme, selectedWidget, visibleCommandPalette, visibleToolbar } from './stores';
import { currentTheme, leftPanelWidth, selectedWidget, visibleCommandPalette, visibleToolbar } from './stores';
import TabsPanel from './widgets/TabsPanel.svelte';
import TabContent from './TabContent.svelte';
import CommandPalette from './commands/CommandPalette.svelte';
import Toolbar from './widgets/Toolbar.svelte';
import splitterDrag from './utility/splitterDrag';
import { update } from 'lodash';
</script>
<div class={`${$currentTheme} root`}>
@@ -24,6 +26,11 @@
<div class="content">
<TabContent />
</div>
<div
class="horizontal-split-handle splitter"
use:splitterDrag={'clientX'}
on:resizeSplitter={e => leftPanelWidth.update(x => x + e.detail)}
/>
{#if $visibleCommandPalette}
<div class="commads">
<CommandPalette />
@@ -100,4 +107,11 @@
left: 0;
right: 0;
}
.splitter {
position: absolute;
top: var(--dim-header-top);
bottom: var(--dim-statusbar-height);
left: calc(var(--dim-widget-icon-size) + var(--dim-left-panel-width));
}
</style>