CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-11 23:16:00 +12:00
Code Issues Projects Releases Wiki Activity

Update side panel styles and ensure side panel properly reveals itself in the builder

Browse source
This commit is contained in:
Andrew Kingston 2022-11-10 14:34:23 +00:00
parent ce4f8ef5f9
commit fb9dd20c11
3 changed files with 16 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/client/src/components/Component.svelte
View file

@ -188,6 +188,7 @@
},
empty: emptyState,
selected,
inSelectedPath,
name,
editing,
type: instance._component,

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

@ -336,16 +336,18 @@
}
#side-panel-container {
flex: 0 0 360px;
background: var(--background);
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
flex: 0 0 400px;
max-width: calc(100vw - 40px);
background: var(--spectrum-global-color-gray-50);
transition: margin-right 130ms ease-out;
z-index: 3;
padding: var(--spacing-xl);
margin-right: -370px;
margin-right: -410px;
display: flex;
flex-direction: column;
gap: var(--spacing-xl);
overflow-y: auto;
border-left: 1px solid var(--spectrum-global-color-gray-300);
}
#side-panel-container.open {
margin-right: 0;

14
packages/client/src/components/app/SidePanel.svelte
View file

@ -2,9 +2,11 @@
import { getContext } from "svelte"
const component = getContext("component")
const { styleable, sidePanelStore } = getContext("sdk")
const { styleable, sidePanelStore, builderStore } = getContext("sdk")
$: open = $sidePanelStore.contentId === $component.id
$: appOpen = $sidePanelStore.contentId === $component.id
$: builderOpen = $component.inSelectedPath
$: open = $builderStore.inBuilder ? builderOpen : appOpen
const showInSidePanel = (el, visible) => {
const target = document.getElementById("side-panel-container")
@ -13,9 +15,11 @@
}
const update = visible => {
if (visible) {
sidePanelStore.actions.open($component.id)
target.appendChild(el)
el.hidden = false
} else {
sidePanelStore.actions.close()
destroy()
el.hidden = true
}
@ -40,9 +44,9 @@
<slot />
</div>
<div>
<button on:click={() => sidePanelStore.actions.open($component.id)}
>open</button
>
<button on:click={() => sidePanelStore.actions.open($component.id)}>
open
</button>
<button on:click={sidePanelStore.actions.close}>close</button>
</div>