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

Adjust design section page layouts to stop remounting left nav on screen change

This commit is contained in:
Andrew Kingston 2023-08-22 17:51:47 +01:00
parent a4a639c2ba
commit d0414812cf
3 changed files with 8 additions and 13 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]/_layout.svelte
View File

@ -4,6 +4,7 @@
import { syncURLToState } from "helpers/urlStateSync" import { syncURLToState } from "helpers/urlStateSync"
import { store } from "builderStore" import { store } from "builderStore"
import { onDestroy } from "svelte" import { onDestroy } from "svelte"
import LeftPanel from "./components/[componentId]/_components/LeftPanel/index.svelte"
$: screenId = $store.selectedScreenId $: screenId = $store.selectedScreenId
$: store.actions.websocket.selectResource(screenId) $: store.actions.websocket.selectResource(screenId)
@ -23,6 +24,7 @@
<div class="design"> <div class="design">
<div class="content"> <div class="content">
<LeftPanel />
<AppPanel /> <AppPanel />
<slot /> <slot />
</div> </div>

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

@ -1,25 +1,28 @@
<script> <script>
import Screens from "./Screens/index.svelte" import Screens from "./Screens/index.svelte"
import Components from "./Components/index.svelte" import Components from "./Components/index.svelte"
import { selectedScreen } from "builderStore"
</script> </script>
<div class="panel"> <div class="panel">
<Screens /> <Screens />
<div class="divider" /> <div class="divider" />
{#if $selectedScreen}
<Components /> <Components />
{/if}
</div> </div>
<style> <style>
.panel { .panel {
width: 310px; width: 310px;
height: 100%; height: 100%;
border-right: 2px solid var(--grey-2); border-right: var(--border-light);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--background); background: var(--background);
} }
.divider { .divider {
border-bottom: 2px solid var(--grey-2); border-bottom: var(--border-light);
} }
</style> </style>

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

@ -1,5 +1,4 @@
<script> <script>
import LeftPanel from "./_components/LeftPanel/index.svelte"
import { syncURLToState } from "helpers/urlStateSync" import { syncURLToState } from "helpers/urlStateSync"
import { store, selectedScreen } from "builderStore" import { store, selectedScreen } from "builderStore"
import * as routify from "@roxi/routify" import * as routify from "@roxi/routify"
@ -47,9 +46,6 @@
onDestroy(stopSyncing) onDestroy(stopSyncing)
</script> </script>
<div class="left">
<LeftPanel />
</div>
{#if routeComponentId === "screen"} {#if routeComponentId === "screen"}
<ScreenSettingsPanel /> <ScreenSettingsPanel />
{:else if routeComponentId === "navigation"} {:else if routeComponentId === "navigation"}
@ -58,9 +54,3 @@
<ComponentSettingsPanel /> <ComponentSettingsPanel />
{/if} {/if}
<slot /> <slot />
<style>
.left {
order: -1;
}
</style>