CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-14 18:55:45 +12:00
Code Issues Projects Releases Wiki Activity

Stop preview remounting

Browse source
This commit is contained in:
Gerard Burns 2023-08-20 23:33:09 +01:00
parent d4f6359820
commit a34390c986
5 changed files with 44 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPanel.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
View file

10
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/AppPreview.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
View file

@ -1,7 +1,7 @@
<script>
import { get } from "svelte/store"
import { onMount, onDestroy } from "svelte"
import { store, selectedScreen, currentAsset } from "builderStore"
import { store, selectedComponent, selectedScreen, currentAsset } from "builderStore"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import {
ProgressCircle,
@ -65,7 +65,9 @@
$: refreshContent(json)
// Determine if the add component menu is active
$: isAddingComponent = $isActive(`./new`)
$: isAddingComponent = $isActive(
`./components/${$selectedComponent?._id}/new`
)
// Register handler to send custom to the preview
$: sendPreviewEvent = (name, payload) => {
@ -208,9 +210,9 @@
const toggleAddComponent = () => {
if (isAddingComponent) {
$goto(`../`)
$goto(`./components/${$selectedComponent?._id}`)
} else {
$goto(`./new`)
$goto(`./components/${$selectedComponent?._id}/new`)
}
}

0
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/DevicePreviewSelect.svelte → packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte
View file

27
packages/builder/src/pages/builder/app/[application]/design/[screenId]/_layout.svelte
View file

@ -1,4 +1,5 @@
<script>
import AppPanel from "./_components/AppPanel.svelte"
import * as routify from "@roxi/routify"
import { syncURLToState } from "helpers/urlStateSync"
import { store } from "builderStore"
@ -20,4 +21,28 @@
onDestroy(stopSyncing)
</script>
<slot />
<div class="design">
<div class="content">
<AppPanel />
<slot />
</div>
</div>
<style>
.design {
flex: 1 1 auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
height: 0;
}
.content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex: 1 1 auto;
}
</style>

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

@ -1,6 +1,5 @@
<script>
import LeftPanel from "./_components/LeftPanel/index.svelte"
import AppPanel from "./_components/AppPanel.svelte"
import { syncURLToState } from "helpers/urlStateSync"
import { store, selectedScreen } from "builderStore"
import * as routify from "@roxi/routify"
@ -48,38 +47,20 @@
onDestroy(stopSyncing)
</script>
<div class="design">
<div class="content">
{#if $selectedScreen}
<LeftPanel />
<AppPanel />
{#if routeComponentId === "screen"}
<ScreenSettingsPanel />
{:else if routeComponentId === "navigation"}
<NavigationPanel />
{:else}
<ComponentSettingsPanel />
{/if}
<slot />
{/if}
</div>
<div class="left">
<LeftPanel />
</div>
{#if routeComponentId === "screen"}
<ScreenSettingsPanel />
{:else if routeComponentId === "navigation"}
<NavigationPanel />
{:else}
<ComponentSettingsPanel />
{/if}
<slot />
<style>
.design {
flex: 1 1 auto;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
height: 0;
}
.content {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex: 1 1 auto;
.left {
order: -1;
}
</style>