CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-08 07:46:10 +12:00
Code Issues Projects Releases Wiki Activity

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

Browse source
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 { cloneDeep } from "lodash/fp"
import { currentAsset, mainLayout, selectedComponent } from "builderStore"
import {
currentAsset,
mainLayout,
selectedComponent,
selectedScreen,
store,
} from "builderStore"
import {
datasources,
integrations,
@ -280,6 +286,18 @@ export const getFrontendStore = () => {
promises.push(store.actions.screens.save(screen))
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: {
saveSelected: async () => {

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

@ -1,10 +1,27 @@
<script>
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>
<Panel borderLeft title="Navigation" icon="InfoOutline">
<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">
Your navigation is configured for all the screens within your app.
</Body>

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

@ -148,19 +148,7 @@
]
const removeCustomLayout = async () => {
let screen = 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)
return store.actions.screens.removeCustomLayout(get(selectedScreen))
}
</script>
@ -173,7 +161,7 @@
{#if $selectedScreen.layoutId}
<Banner
type="warning"
extraButtonText="Update"
extraButtonText="Detach custom layout"
extraButtonAction={removeCustomLayout}
showCloseButton={false}
>