MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix side panel messing up builder preview scrolling and properly show/hide side panel when inside builder

This commit is contained in:
Andrew Kingston 2022-11-22 16:00:17 +00:00
parent a4d377acf1
commit 29cf6e2130
2 changed files with 22 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/client/src/components/app/Layout.svelte
View File

@ -251,6 +251,7 @@
id="side-panel-container"
class:open={$sidePanelStore.open}
use:clickOutside={sidePanelStore.actions.close}
class:builder={$builderStore.inBuilder}
>
<div class="side-panel-header">
<Icon
@ -361,10 +362,19 @@
margin-right: -400px;
height: 100%;
}
#side-panel-container.builder {
margin-right: 0;
opacity: 0;
pointer-events: none;
}
#side-panel-container.open {
box-shadow: 0 0 40px 10px rgba(0, 0, 0, 0.1);
margin-right: 0;
}
#side-panel-container.builder.open {
opacity: 1;
pointer-events: all;
}
.side-panel-header {
display: flex;
flex-direction: row;

15
packages/client/src/components/app/SidePanel.svelte
View File

@ -4,9 +4,18 @@
const component = getContext("component")
const { styleable, sidePanelStore, builderStore } = getContext("sdk")
$: appOpen = $sidePanelStore.contentId === $component.id
$: builderOpen = $component.inSelectedPath
$: open = $builderStore.inBuilder ? builderOpen : appOpen
$: open = $sidePanelStore.contentId === $component.id
// Automatically show and hide the side panel when inside the builder
$: {
if ($builderStore.inBuilder) {
if ($component.inSelectedPath && !open) {
sidePanelStore.actions.open($component.id)
} else if (!$component.inSelectedPath && open) {
sidePanelStore.actions.close()
}
}
}
const showInSidePanel = (el, visible) => {
const target = document.getElementById("side-panel-container")