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

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

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, empty: emptyState,
selected, selected,
inSelectedPath,
name, name,
editing, editing,
type: instance._component, type: instance._component,

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

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

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

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