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

Move bindings panel into left panel

This commit is contained in:
Andrew Kingston 2025-01-20 12:02:06 +00:00
parent 74701fecf4
commit 8bf6b6c4d8
No known key found for this signature in database
5 changed files with 32 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_layout.svelte
View File

@ -30,7 +30,7 @@
if (id === `${$screenStore.selectedScreenId}-screen`) return true
if (id === `${$screenStore.selectedScreenId}-navigation`) return true
return !!findComponent($selectedScreen.props, id)
return !!findComponent($selectedScreen?.props, id)
}
// Keep URL and state in sync for selected component ID

3
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
View File

@ -3,8 +3,6 @@
import AppPreview from "./AppPreview.svelte"
import { screenStore, appStore } from "@/stores/builder"
import UndoRedoControl from "@/components/common/UndoRedoControl.svelte"
import { ActionButton } from "@budibase/bbui"
import BindingsPanel from "./BindingsPanel.svelte"
import StatePanel from "./StatePanel.svelte"
</script>
@ -18,7 +16,6 @@
{/if}
</div>
<div class="header-right">
<BindingsPanel />
<StatePanel />
</div>
</div>

4
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingExplorer/BindingNode.svelte
View File

@ -156,8 +156,8 @@
overflow: hidden;
}
.binding-arrow {
margin: -3px 2px -2px 0;
flex: 0 0 18px;
margin: -3px 6px -2px 4px;
flex: 0 0 9px;
transition: transform 130ms ease-out;
}
.binding-arrow :global(svg) {

48
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/BindingsPanel.svelte
View File

@ -1,5 +1,5 @@
<script lang="ts">
import { ActionButton, Helpers, PopoverAlignment } from "@budibase/bbui"
import { Link, Body, Helpers, Layout } from "@budibase/bbui"
import {
previewStore,
selectedScreen,
@ -9,7 +9,7 @@
import { getBindableProperties } from "@/dataBinding"
import BindingNode from "./BindingExplorer/BindingNode.svelte"
import { processObjectSync } from "@budibase/string-templates"
import DetailPopover from "@/components/common/DetailPopover.svelte"
import { onMount } from "svelte"
// Minimal typing for the real data binding structure, as none exists
type DataBinding = {
@ -69,34 +69,32 @@
}
return context
}
onMount(previewStore.requestComponentContext)
</script>
<DetailPopover
title="Data context"
subtitle="Showing all bindable data context available on the /employees screen."
align={PopoverAlignment.Right}
>
<svelte:fragment slot="anchor" let:open>
<ActionButton
icon="Code"
quiet
selected={open}
on:click={previewStore.requestComponentContext}
>
Data context
</ActionButton>
</svelte:fragment>
<div class="bindings">
<div class="bindings-panel">
<Layout noPadding gap="S">
<div class="text">
<Body size="S">Showing all available bindings.</Body>
<Link href="/">Learn more.</Link>
</div>
<BindingNode value={context} />
</div>
</DetailPopover>
</Layout>
</div>
<style>
.bindings {
margin: calc(-1 * var(--spacing-xl));
padding: 20px 12px;
background: var(--spectrum-global-color-gray-50);
.bindings-panel {
flex: 1 1 auto;
height: 0;
overflow-y: auto;
max-height: 600px;
overflow-x: hidden;
padding: var(--spacing-l);
}
.text {
display: flex;
flex-direction: row;
gap: 4px;
flex-wrap: wrap;
}
</style>

7
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/LeftPanel.svelte
View File

@ -3,6 +3,7 @@
import ComponentList from "./ComponentList/index.svelte"
import { getHorizontalResizeActions } from "@/components/common/resizable"
import { ActionButton } from "@budibase/bbui"
import BindingsPanel from "./BindingsPanel.svelte"
const [resizable, resizableHandle] = getHorizontalResizeActions()
@ -32,7 +33,7 @@
{#if activeTab === Tabs.Components}
<ComponentList />
{:else if activeTab === Tabs.Bindings}
<div class="tab-content">Bindings</div>
<BindingsPanel />
{:else if activeTab === Tabs.State}
<div class="tab-content">State</div>
{/if}
@ -68,6 +69,10 @@
border-bottom: var(--border-light);
}
.tab-content {
flex: 1 1 auto;
height: 0;
overflow-y: auto;
overflow-x: hidden;
padding: var(--spacing-l);
}