From 7bf25d9a7b1ad4bdbc89dd44cf0a3f2a04e608fd Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 27 Apr 2022 08:47:06 +0100 Subject: [PATCH] Don't show selected components unless the components tab is active and automatically route to components whenever selecting on in the preview --- .../builder/src/builderStore/store/frontend.js | 1 + .../design/_components/AppPanel.svelte | 6 +++++- .../design/_components/AppPreview.svelte | 14 +++++++++----- 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 8827aea3a8..3c76d391db 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -5,6 +5,7 @@ import { mainLayout, selectedComponent, selectedAccessRole, + store, } from "builderStore" import { datasources, diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/AppPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/AppPanel.svelte index 7934a85225..bb5db46e40 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/_components/AppPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/_components/AppPanel.svelte @@ -39,7 +39,11 @@ {#if $store.clientFeatures.devicePreview} {/if} - diff --git a/packages/builder/src/pages/builder/app/[application]/design/_components/AppPreview.svelte b/packages/builder/src/pages/builder/app/[application]/design/_components/AppPreview.svelte index c1d0d810a0..e2f9bad292 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/_components/AppPreview.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/_components/AppPreview.svelte @@ -13,6 +13,7 @@ } from "@budibase/bbui" import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw" import { findComponent, findComponentPath } from "builderStore/componentUtils" + import { isActive, goto } from "@roxi/routify" let iframe let layout @@ -41,7 +42,10 @@ screen = $selectedScreen layout = $store.layouts.find(layout => layout._id === screen?.layoutId) } - $: selectedComponentId = $store.selectedComponentId ?? "" + // Don't show selected components unless on the components tab + $: selectedComponentId = $isActive("./components") + ? $store.selectedComponentId + : "" $: previewData = { appId: $store.appId, layout, @@ -140,10 +144,10 @@ try { if (type === "select-component" && data.id) { - store.update(state => { - state.selectedComponentId = data.id - return state - }) + $store.selectedComponentId = data.id + if (!$isActive("./components")) { + $goto("./components") + } } else if (type === "update-prop") { await store.actions.components.updateProp(data.prop, data.value) } else if (type === "delete-component" && data.id) {