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

Add warning to navigation section when using an old screen with a custom layout, and allow upgrading

This commit is contained in:
Andrew Kingston 2022-05-13 13:50:15 +01:00
parent a7395a40cf
commit b488293e92
3 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/builder/src/builderStore/store/frontend.js
View File

@ -1,6 +1,12 @@
import { get, writable } from "svelte/store" import { get, writable } from "svelte/store"
import { cloneDeep } from "lodash/fp" import { cloneDeep } from "lodash/fp"
import { currentAsset, mainLayout, selectedComponent } from "builderStore" import {
currentAsset,
mainLayout,
selectedComponent,
selectedScreen,
store,
} from "builderStore"
import { import {
datasources, datasources,
integrations, integrations,
@ -280,6 +286,18 @@ export const getFrontendStore = () => {
promises.push(store.actions.screens.save(screen)) promises.push(store.actions.screens.save(screen))
return await Promise.all(promises) return await Promise.all(promises)
}, },
removeCustomLayout: async screen => {
// Pull relevant settings from old layout, if required
const layout = get(store).layouts.find(x => x._id === screen.layoutId)
screen.layoutId = null
if (screen.showNavigation == null) {
screen.showNavigation = layout?.props.navigation !== "None"
}
if (screen.width == null) {
screen.width = layout?.props.width || "Large"
}
await store.actions.screens.save(screen)
},
}, },
preview: { preview: {
saveSelected: async () => { saveSelected: async () => {

19
packages/builder/src/pages/builder/app/[application]/design/[screenId]/navigation/_components/NavigationInfoPanel.svelte
View File

@ -1,10 +1,27 @@
<script> <script>
import Panel from "components/design/Panel.svelte" import Panel from "components/design/Panel.svelte"
import { Body, Layout } from "@budibase/bbui" import { Body, Layout, Banner } from "@budibase/bbui"
import { selectedScreen, store } from "builderStore"
import { get } from "svelte/store"
const removeCustomLayout = async () => {
return store.actions.screens.removeCustomLayout(get(selectedScreen))
}
</script> </script>
<Panel borderLeft title="Navigation" icon="InfoOutline"> <Panel borderLeft title="Navigation" icon="InfoOutline">
<Layout paddingX="L" paddingY="XL" gap="S"> <Layout paddingX="L" paddingY="XL" gap="S">
{#if $selectedScreen.layoutId}
<Banner
type="warning"
extraButtonText="Detach custom layout"
extraButtonAction={removeCustomLayout}
showCloseButton={false}
>
You can't preview your navigation settings using this screen as it uses
a custom layout, which is deprecated
</Banner>
{/if}
<Body size="S"> <Body size="S">
Your navigation is configured for all the screens within your app. Your navigation is configured for all the screens within your app.
</Body> </Body>

16
packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenSettingsPanel.svelte
View File

@ -148,19 +148,7 @@
] ]
const removeCustomLayout = async () => { const removeCustomLayout = async () => {
let screen = get(selectedScreen) return store.actions.screens.removeCustomLayout(get(selectedScreen))
// Pull relevant settings from old layout, if required
const layout = get(store).layouts.find(x => x._id === screen.layoutId)
screen.layoutId = null
if (screen.showNavigation == null) {
screen.showNavigation = layout?.props.navigation !== "None"
}
if (screen.width == null) {
screen.width = layout?.props.width || "Large"
}
await store.actions.screens.save(screen)
} }
</script> </script>
@ -173,7 +161,7 @@
{#if $selectedScreen.layoutId} {#if $selectedScreen.layoutId}
<Banner <Banner
type="warning" type="warning"
extraButtonText="Update" extraButtonText="Detach custom layout"
extraButtonAction={removeCustomLayout} extraButtonAction={removeCustomLayout}
showCloseButton={false} showCloseButton={false}
> >