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

splitter doesn't recreate children on collapse

Browse Source
This commit is contained in:
Jan Prochazka
2022-09-01 16:20:35 +02:00
parent 61f82be9f3
commit 1e91097bf2
2 changed files with 50 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/web/src/elements/HorizontalSplitter.svelte
View File

@@ -32,29 +32,36 @@
</script>
<div class="container" bind:clientWidth>
{#if collapsed1}
<div class="child1" style={`flex:1`}>
<slot name="2" />
</div>
{:else if collapsed2}
<div class="child1" style={`flex:1`}>
<slot name="1" />
</div>
{:else}
{#if !hideFirst}
<div class="child1" style={isSplitter ? `width:${size}px; min-width:${size}px; max-width:${size}px}` : `flex:1`}>
<div
class="child1"
style={isSplitter
? collapsed1
? 'display:none'
: collapsed2
? 'flex:1'
: `width:${size}px; min-width:${size}px; max-width:${size}px}`
: `flex:1`}
>
<slot name="1" />
</div>
{/if}
{#if isSplitter}
{#if !hideFirst}
<div class="horizontal-split-handle" use:splitterDrag={'clientX'} on:resizeSplitter={e => (size += e.detail)} />
<div
class="horizontal-split-handle"
style={collapsed1 || collapsed2 ? 'display:none' : ''}
use:splitterDrag={'clientX'}
on:resizeSplitter={e => (size += e.detail)}
/>
{/if}
<div class="child2">
<div
class={collapsed1 ? 'child1' : 'child2'}
style={collapsed2 ? 'display:none' : collapsed1 ? 'flex:1' : 'child2'}
>
<slot name="2" />
</div>
{/if}
{/if}
{#if allowCollapseChild1 && !collapsed2 && isSplitter}
{#if collapsed1}
@@ -138,6 +145,7 @@
display: flex;
flex-direction: column;
justify-content: center;
z-index: 100;
}
.collapse:hover {

34
packages/web/src/elements/VerticalSplitter.svelte
View File

@@ -21,25 +21,32 @@
</script>
<div class="container" bind:clientHeight>
{#if collapsed1}
<div class="child1" style={`flex:1`}>
<slot name="2" />
</div>
{:else if collapsed2}
<div class="child1" style={`flex:1`}>
<slot name="1" />
</div>
{:else}
<div class="child1" style={isSplitter ? `height:${size}px; min-height:${size}px; max-height:${size}px}` : `flex:1`}>
<div
class="child1"
style={isSplitter
? collapsed1
? 'display:none'
: collapsed2
? 'flex:1'
: `height:${size}px; min-height:${size}px; max-height:${size}px}`
: `flex:1`}
>
<slot name="1" />
</div>
{#if isSplitter}
<div class="vertical-split-handle" use:splitterDrag={'clientY'} on:resizeSplitter={e => (size += e.detail)} />
<div class="child2">
<div
class={'vertical-split-handle'}
style={collapsed1 || collapsed2 ? 'display:none' : ''}
use:splitterDrag={'clientY'}
on:resizeSplitter={e => (size += e.detail)}
/>
<div
class={collapsed1 ? 'child1' : 'child2'}
style={collapsed2 ? 'display:none' : collapsed1 ? 'flex:1' : 'child2'}
>
<slot name="2" />
</div>
{/if}
{/if}
{#if allowCollapseChild1 && !collapsed2 && isSplitter}
{#if collapsed1}
@@ -123,6 +130,7 @@
background: var(--theme-bg-2);
display: flex;
justify-content: center;
z-index: 100;
}
.collapse:hover {