CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-09-15 08:47:37 +12:00
Code Issues Projects Releases Wiki Activity

Add warning banner for old screens and allow updating screens to remove custom layouts

Browse source
This commit is contained in:
Andrew Kingston 2022-04-27 15:47:59 +01:00
parent 14bd507566
commit 74d123eb04
2 changed files with 41 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
packages/bbui/src/Banner/Banner.svelte
View file

@ -8,6 +8,7 @@
export let size = "S"
export let extraButtonText
export let extraButtonAction
export let showCloseButton = true
let show = true
@ -39,22 +40,24 @@
</button>
{/if}
</div>
<div class="spectrum-Toast-buttons">
<button
class="spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--size{size}"
on:click={clear}
>
<div class="spectrum-ClearButton-fill">
<svg
class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross100"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Cross100" />
</svg>
</div>
</button>
</div>
{#if showCloseButton}
<div class="spectrum-Toast-buttons">
<button
class="spectrum-ClearButton spectrum-ClearButton--overBackground spectrum-ClearButton--size{size}"
on:click={clear}
>
<div class="spectrum-ClearButton-fill">
<svg
class="spectrum-ClearButton-icon spectrum-Icon spectrum-UIIcon-Cross100"
focusable="false"
aria-hidden="true"
>
<use xlink:href="#spectrum-css-icon-Cross100" />
</svg>
</div>
</button>
</div>
{/if}
</div>
{/if}
@ -63,4 +66,8 @@
pointer-events: all;
width: 100%;
}
.spectrum-Button {
border: 1px solid rgba(255, 255, 255, 0.2);
margin: 8px 0 4px 0;
}
</style>

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

@ -8,6 +8,7 @@
Button,
Toggle,
Checkbox,
Banner,
notifications,
} from "@budibase/bbui"
import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
@ -128,6 +129,13 @@
},
},
]
const removeCustomLayout = async () => {
let screen = get(selectedScreen)
screen.layoutId = null
screen.showNavigation = true
await store.actions.screens.save(screen)
}
</script>
<SettingsPanel
@ -135,6 +143,16 @@
icon={$selectedScreen.routing.route === "/" ? "Home" : "WebPage"}
>
<Layout gap="S" paddingX="L" paddingY="XL">
{#if $selectedScreen.layoutId}
<Banner
type="warning"
extraButtonText="Update"
extraButtonAction={removeCustomLayout}
showCloseButton={false}
>
This screen uses a custom layout, which is deprecated
</Banner>
{/if}
{#each screenSettings as setting (setting.key)}
<PropertyControl
control={setting.control}