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

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

@ -4,9 +4,18 @@
const component = getContext("component") const component = getContext("component")
const { styleable, sidePanelStore, builderStore } = getContext("sdk") const { styleable, sidePanelStore, builderStore } = getContext("sdk")
$: appOpen = $sidePanelStore.contentId === $component.id $: open = $sidePanelStore.contentId === $component.id
$: builderOpen = $component.inSelectedPath
$: open = $builderStore.inBuilder ? builderOpen : appOpen // 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 showInSidePanel = (el, visible) => {
const target = document.getElementById("side-panel-container") const target = document.getElementById("side-panel-container")