Adjust design section page layouts to stop remounting left nav on screen change
This commit is contained in:
parent
a4a639c2ba
commit
d0414812cf
3 changed files with 8 additions and 13 deletions
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
|
||||||
|
|
Loading…
Reference in a new issue